JavaScript中你不知道的Object.entries用法

作者：小括号时间：2026-10-24 16:50:45浏览：653

本文介绍JavaScript中Object.entries方法的两个实用技巧。首先，通过Object.entries将普通对象转换为键值对数组，使其支持for...of遍历，避免for...in遍历原型链的繁琐。其次，利用Map构造函数和Object.fromEntries实现普通对象与Map对象的双向转换，提升代码简洁性与执行效率。

前言

在日常开发中，我们频繁使用Object类的静态方法，如Object.keys、Object.values和Object.assign等，但Object.entries的使用频率相对较低。本文将深入讲解Object.entries方法的两个实用技巧。

作用

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

示例


const obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]

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

// array like object with random key ordering
const anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.entries(anObj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ]

// getFoo is property which isn't enumerable
const myObj = Object.create({}, { getFoo: { value() { return this.foo; } } });
myObj.foo = 'bar';
console.log(Object.entries(myObj)); // [ ['foo', 'bar'] ]

// non-object argument will be coerced to an object
console.log(Object.entries('foo')); // [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ]

// iterate through key-value gracefully
const obj = { a: 5, b: 7, c: 9 };
for (const [key, value] of Object.entries(obj)) {
  console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
}

// Or, using array extras
Object.entries(obj).forEach(([key, value]) => {
console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"

1. 使用 for...of 遍历普通对象

许多前端初学者可能尝试过以下代码：


let obj = {
  a: 1,
  b: 2
}

for (let value of obj) {
  // ...
}

但运行后会发现报错：

Uncaught TypeError: obj is not iterable

因此，遍历普通对象通常只能使用for...in循环。然而，for...in不仅遍历对象自身的属性，还会遍历原型链上的属性，因此使用时需要添加过滤条件，例如：


for (let key in obj) {
  if (Object.prototype.hasOwnProperty.call(obj, key)) {
    // ...
  }
}

这种写法显得不够优雅。普通对象无法直接使用for...of遍历，是因为它未实现iterator接口（关于JS迭代器将另文详解）。而JavaScript数组实现了iterator接口，因此通过Object.entries获取的键值对数组可以直接使用for...of进行遍历：


for (let [key, value] of Object.entries(obj)) {
  // ...
}

Object.entries返回对象自身可枚举属性的键值对数组，不包含原型上的属性

2. 普通对象与 Map 对象相互转换

在项目中，将普通对象转换为Map对象时，常看到使用for...in遍历的方式：


let obj = {
  a: 1,
  b: 2
}

let map = new Map();

for (let key in obj) {
  if (Object.prototype.hasOwnProperty.call(obj, key)) {
    map.set(key, obj[key]);
  }
}

实际上，Map构造函数可以接受一个键值对数组进行初始化，这意味着可以使用Object.entries将普通对象转换为Map对象：


let map = new Map(Object.entries(obj));

那么，如何将Map对象转换回普通对象呢？无需遍历，可以使用Object.fromEntries静态方法实现转换：


let obj = Object.fromEntries(map);

至此，许多开发者可能仍对普通对象、键值对数组和Map对象之间的转换关系感到困惑。以下图表总结了它们之间的关系：

Object.entries 和 Object.fromEntries 是两个相反的操作

总结

本文介绍了JavaScript中Object.entries的两种用法。更多相关js Object.entries用法内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

参考

Object.entries() - MDN 文档
Map() 构造函数 - MDN 文档

作者最新文章

JS语法错误会阻止加载吗？区分SyntaxError与资源加载失败

2026-11-05 16:08:46

JavaScript常见SyntaxError语法错误排查与修复方法

2026-11-05 13:58:44

JS中slice、substring和substr截取字符串的区别

2026-11-05 13:43:47

JS 转 TS 手动迁移最佳实践：从配置 tsconfig 到消除 any 类型

2026-11-05 11:53:32

为什么JS数组push后得到的是数字而不是数组？

2026-11-05 09:59:18