Object.entries()

简介: Object.entries()

Object.entries() 方法返回一个给定对象自身可枚举属性的键值对数组,其排列与使用 for...in 循环遍历该对象时返回的顺序一致(区别在于 for-in 循环也枚举原型链中的属性)。

通俗点就是 Object.entries() 可以把一个对象的键值以数组的形式遍历出来,结果和 for...in 一致,但不会遍历原型属性。

示例1 -- 传入对象
const obj = { foo: 'bar', baz: 'abc' }; 
console.log(Object.entries(obj));  // [['foo', 'bar'], ['baz', 'abc']]

示例2.1 -- 数组

const arr = [1, 2, 3]; 
console.log(Object.entries(arr));  // [['0', 1], ['1', '2'], ['2', '3']]

示例2.2 -- 数组(数组中包含对象)

const arr1 = [{ a: 1 }, 2, 3]; 
console.log(Object.entries(arr1));  // [['0', { a: 1 }], ['1', '2'], ['2', '3']]

示例2.3 -- 数组(数组中的值全部为对象)

const arr2 = [{ a: 1 }, { b: 2 }, { c: 3 }]; 
console.log(Object.entries(arr2));  // [['0', { a: 1 }], ['1', { b: 2 }], ['2', { c: 3 }]]

示例3 -- 字符串

const str = '123'; 
console.log(Object.entries(str));  // [['0', '1'], ['1', '2'], ['2', '3']]

示例4 -- 数字、浮点数

const num = 123; 
console.log(Object.entries(num));  // []
const float1 = 12.3; 
console.log(Object.entries(float1));  // []
示例5 -- 将 Object 转化为 Map

new Map() 构造函数接受一个可迭代的 entries 。 借助 Object.entries 方法你可以很容易的将 Object 转换为 Map:

const obj2 = { foo: 'bar', baz: 'abc' }; 
console.log(Object.entries(obj2));  // [['foo', 'bar'], ['baz', 'abc']]
const map = new Map(Object.entries(obj2)); 
console.log(map); // Map {'foo' => 'bar', 'baz' => 'abc'}


目录
相关文章
|
druid 关系型数据库 MySQL
【数据库】数据库连接池配置 testOnBorrow
【数据库】数据库连接池配置 testOnBorrow
1135 0
|
开发工具 git Windows
经验:停止 cherry-pick,请开始 merge!
cherry-pick 是一个比较常用的 git 操作,可以将一个分支上的 commit “精选”到另一个分支上。然而在最近的开发过程中,却时不时的遇到 merge 冲突。在下文中,我将会详细的分析 cherry-pick 造成冲突的原因,以及 cherry-pick 可能造成的其他更严重问题。
7709 0
经验:停止 cherry-pick,请开始 merge!
|
11月前
|
前端开发 JavaScript
setTimeout、Promise、Async/Await 的区别
`setTimeout` 是用于延迟执行函数的简单方法;`Promise` 表示异步操作的最终完成或失败;`Async/Await` 是基于 Promise 的语法糖,使异步代码更易读和维护。三者都用于处理异步操作,但使用场景和语法有所不同。
|
11月前
|
自然语言处理 前端开发
如何理解 ES6 中 Generator ?
【10月更文挑战第7天】
|
12月前
|
JavaScript 前端开发 Go
async 和 defer的作用与区别
async 和 defer的作用与区别
|
存储 缓存 JavaScript
npm link 与 pnpm link 的用法以及不同之处
npm link 与 pnpm link 的用法以及不同之处
1036 0
|
12月前
|
JavaScript
vue3 element-ui-plus Carousel 跑马灯 的使用 及 踩坑记录
本文介绍了在Vue 3中使用Element UI Plus的Carousel组件实现跑马灯效果的方法,并分享了在实现过程中遇到的常见问题和解决方案。
vue3 element-ui-plus Carousel 跑马灯 的使用 及 踩坑记录
|
JavaScript 开发者 内存技术
修改npm源--多种方式
修改npm源--多种方式
5717 0
|
自然语言处理 资源调度 前端开发
深入解析 React-i18next:在 React 中实现国际化(一)
深入解析 React-i18next:在 React 中实现国际化(一)
1702 0