用 ES8 的 Object.entries() 和 Object.fromEntries() 方法管理对象

引言

在 JavaScript 的开发中，经常需要对对象进行操作和管理。ES8 中引入了两个新方法，Object.entries() 和 Object.fromEntries()，这两个方法可以极大地提高代码的可读性和编程效率，特别是在处理对象时。本文将详细介绍这两个方法的使用和优势，并通过示例代码来阐述。

Object.entries() 方法

Object.entries() 方法返回一个给定对象自身可枚举属性的键值对数组，即一个由键值对组成的二维数组。每个键值对的第一项表示属性的键名，第二项表示该属性的值。这个方法可以让我们更方便地对对象进行遍历和操作。

示例

const obj = { x: 1, y: 2 };
const entries = Object.entries(obj);
console.log(entries); // [["x", 1], ["y", 2]]

优势

使用 Object.entries() 方法可以让我们更方便地对对象进行遍历，可以用 for...of 循环、Array.prototype.forEach() 等多种方式来遍历二维数组中的键值对，然后就可以针对每个属性进行操作，不必再使用 for...in 循环和 hasOwnProperty() 方法来判断是否是自身属性。

const obj = { x: 1, y: 2 };
for (const [key, value] of Object.entries(obj)) {
  console.log(key, value);
  // x 1
  // y 2
}

Object.fromEntries() 方法

Object.fromEntries() 方法是 Object.entries() 方法的反向操作。它接受一个二维数组，将其转换为一个新的对象。可以说，Object.fromEntries() 方法把 Object.entries() 返回的数组转换为了一个对象，使得我们可以更加方便地创建一个新的对象。

示例

const entries = [["x", 1], ["y", 2]];
const obj = Object.fromEntries(entries);
console.log(obj); // { x: 1, y: 2 }

优势

使用 Object.fromEntries() 可以更方便地创建一个新的对象，而不必再使用 Object.create() 方法或者用字面量的形式进行赋值。另外，如果我们需要将一个 Map 类型的数据结构转换成对象，Object.fromEntries() 方法也是非常好用的，如下所示：

const map = new Map([["x", 1], ["y", 2]]);
const obj = Object.fromEntries(map);
console.log(obj); // { x: 1, y: 2 }

总结

本文主要介绍了 ES8 中的 Object.entries() 和 Object.fromEntries() 方法的使用和优势。可以看出，这两个方法对于对象的操作非常的方便，极大地提高了代码的可读性和编程效率。我们可以在遍历对象的时候使用 Object.entries() 方法来获取对象的键值对数组，进而对每个属性进行操作；而在需要创建新的对象时，使用 Object.fromEntries() 方法来创建一个新的对象。

参考

1. MDN web docs
2. ES6新特性——Object.entries()和Object.fromEntries()

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c8cbf75ad90b6d0414b6f5