ES8 的新特性：Object.values() & Object.entries() 的使用-JavaScript中文网-JavaScript教程资源分享门户

引言

JavaScript 是一种动态语言，且它的核心组成部分之一是对象。在 ES2015 (ES6) 之前，要获取一个对象的值或键值对需要遍历对象，并且通过键来访问值。

ES2017 (ES8) 引入了两个新的方法 Object.values() 和 Object.entries()。在对象的处理上，Object.values() 与 Object.entries() 可以大大简化我们的操作并且带来许多便利。

在本文中，我们将了解 Object.values() 和 Object.entries() 的特性以及它们的使用方法。

Object.values() 方法返回一个数组，其元素对应于对象中具有枚举属性的值，顺序与for...in循环相同。该数组的枚举顺序与对象实体的属性值相同，即首先枚举出对象本身的属性，然后是原型链上的属性。

下面是一个简单的例子：

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

Object.entries() 方法返回一个数组，其元素对应于对象中具有枚举属性的键值对，顺序与for...in循环相同。数组中，每个元素都是一个 [key, value] 形式的数组。

该方法提供了一种迭代对象的简洁语法，使我们可以访问所有的对象属性，例如：

const obj = { one: 1, two: 2, three: 3 };
const entries = Object.entries(obj);

console.log(entries);
// [ ['one', 1], ['two', 2], ['three', 3] ]

这样我们可以方便地遍历这个数组，甚至用 for ... of 循环语句来进行遍历。

for (const [key, value] of Object.entries(obj)) {
  console.log(`${key} -> ${value}`);
}

使用拓展运算符和数组函数，我们可以从对象中快速提取属性值和键值对。

使用拓展运算符，我们可以方便地将对象的值提取到新数组中：

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

我们同样可以使用数组函数，例如 map()，filter()，reduce() 来对对象的值进行操作。

const values = Object.values(obj).filter(value => value > 40);
console.log(values); // [ 42 ]

使用 Object.entries() 我们可以轻易地将对象转换为 Map 数据结构：

const obj = { foo: 'bar', baz: 42 };
const map = new Map(Object.entries(obj));
console.log(map); // Map { 'foo' => 'bar', 'baz' => 42 }

ES2017 (ES8) 中的 Object.values() 和 Object.entries() 这两个新的方法为开发者提供了更多便利，使得对 JavaScript 对象的操作更加便利高效。使用这些新特性，可以轻轻松松地遍历对象属性，更加简单而不失灵活。

我们可以利用拓展运算符和数组函数，快速提取对象的属性值和键值对。同时，使用 Object.entries() 我们可以轻松地将对象转化为 Map 数据结构，而无需显式调用构造器。

这些技术的引入增强了 JavaScript 的功能，同时也提高了代码的可读性和可维护性。

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