ECMAScript 2018: 如何用 Object.entries() 和 Object.values()- 完成 ES6 新对象特性
ECMAScript 6（简称 ES6）是 JavaScript 的重要更新版本，它加入了新语法和新特性，让开发者更加方便地编写复杂的应用程序。其中最引人注目的新特性莫过于对象特性的更新。在 ES6 中，我们可以使用 Object.entries() 和 Object.values() 方法来轻松地处理对象和数组的数据。
Object.entries()
Object.entries() 可以将对象转换成一个数组，数组中的每一个元素是由键值对组成的一个子数组。键值对的格式是 [key, value]，其中 key 是对象的属性名称，value 是对应的属性值。这个方法非常有用，因为它可以让我们很快地遍历一个对象。
下面是一个使用 Object.entries() 遍历对象的示例代码：
-- -------------------- ---- ------- ----- --- - - -- -- -- -- -- - -- --- ------ ----- ------ -- -------------------- - -------------------- ----------- - -- ------- -- -- - -- -- - -- -- -
我们可以看到，Object.entries() 方法返回了一个包含对象属性和属性值的二维数组，在 for 循环中我们使用了解构赋值来获取每个子数组中的 key 和 value。
通过 Object.entries() 方法我们还可以非常容易地将对象转换成 Map 数据结构：
const obj = { a: 1, b: 2, c: 3 };
const map = new Map(Object.entries(obj));
console.log(map);
// Output:
// Map(3) { 'a' => 1, 'b' => 2, 'c' => 3 }Object.values()
Object.values() 方法可以将对象的值转换成一个数组：
const obj = { a: 1, b: 2, c: 3 };
const values = Object.values(obj);
console.log(values);
// Output:
// [1, 2, 3]同样地，Object.values() 方法可以让我们便捷地处理对象的值。
Object.entries() 和 Object.values() 与 for-in 循环的区别
在 ES6 之前，我们通常使用 for-in 循环来遍历对象中的属性。但是 for-in 循环有一个缺陷：它会将对象原型链上的属性也进行遍历。也就是说，如果我们的对象存在原型链上的属性，那么我们可能会不小心遍历到一些不该遍历到的属性。
通过使用 Object.entries() 和 Object.values() 方法，我们可以避免这个问题：
-- -------------------- ---- ------- ----- --- - - -- -- -- -- -- - -- ------------------ - -- --- ------ --- -- ---- - -------------------- -------------- - -- ------- -- -- - -- -- - -- -- - -- -- - --- ------ ----- ------ -- -------------------- - -------------------- ----------- - -- ------- -- -- - -- -- - -- -- - ----- ------ - ------------------- -------------------- -- ------- -- --- -- --
我们可以看到，for-in 循环会遍历到 obj 对象原型链上的属性 d，而 Object.entries() 和 Object.values() 方法都不会。
结论
Object.entries() 和 Object.values() 是 ES6 中非常有用的对象特性，它们使开发者可以更加方便地处理对象和数组的数据。这两个方法可以让我们快速遍历对象、转换对象成数组或 Map 数据结构以及方便地获取对象的值。同时，它们也可以避免因为 for-in 循环而遍历到不该遍历到的对象属性。因此，在开发中，我们应该尽可能使用 ES6 的新特性来提高效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f543ddc5c563ced5724461