ECMAScript 2017 中新增的 Object.values() 和 Object.entries() 如何实用

在 ECMAScript 2017 的草案中，增加了两个新的 Object 方法：Object.values() 和 Object.entries()。它们都是用于对象的遍历和操作，并且极大地提高了 ECMAScript 在对象处理上的灵活性和效率。本文将会详细介绍它们的具体使用方法。

Object.values()

Object.values() 是一个返回 Object 属性值的数组的方法。你可以很方便地通过这个方法列出对象中所有值。

const obj = {a: 1, b: 2, c: 3};
const vals = Object.values(obj);
console.log(vals); // [1, 2, 3]

以前我们如果想要获取一个对象的值，可能需要使用循环语句或者 Object.keys() 和 map 等方法来达到目的。但是，使用 Object.values() 可以大大简化这种处理方式，并且在代码上更加简洁明了。同时，这个方法还支持 ES6 中的可迭代对象类型，并且可以获取字符串类型的键值对。

const obj = {a: 1, b: 2, c: 3};
const vals = Object.values(obj);
console.log(vals); // [1, 2, 3]

const str = 'hello';
const chrs = Object.values(str);
console.log(chrs); // ['h', 'e', 'l', 'l', 'o']

Object.values() 也可以用来过滤出一个对象中特定的属性值：

const obj = {a: 1, b: 2, c: 3};
const vals = Object.values(obj).filter(val => val > 1);
console.log(vals); // [2, 3]

Object.entries()

Object.entries() 是一个返回键值对数组的方法。你可以很方便地通过这个方法列出对象中所有键值对。

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

这个方法可以把一个对象转换为一个数组，并且每个数组项都是表示对象的一个键值对数组。在数组项中，第一项是键名，第二项是键值。这个方法快速、简便地让你打印出包含对象所有键值对的一个数组。同时，这个方法还支持 ES6 中的可迭代对象类型。

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

const str = 'hello';
const pairs = Object.entries(str);
console.log(pairs); // [['0', 'h'], ['1', 'e'], ['2', 'l'], ['3', 'l'], ['4', 'o']]

相比于 Object.keys() 和 map 等方法，Object.entries() 能够产生相同的输出并且这个输出更加全面清晰。这个方法也使得操作对象中的键值对更加方便。例如，我们可以使用 Object.entries() 来判断一个对象是否存在特定的键值对：

const obj = {a: 1, b: 2, c: 3};
const hasProp = Object.entries(obj).some(([key, val]) => key === 'b' && val > 1);
console.log(hasProp); // true

在这个例子中，我们使用 some 方法来判断对象中是否有包含键名为 'b' 并且键值大于 1 的项。这个做法非常简洁和方便。

总结

Object.values() 和 Object.entries() 两个方法已经成为 ECMAScript 2017 版本中比较重要的新增特性之一。它们不仅增加了对对象处理的灵活性，同时也能够简化对象操作时的代码量。使用这两个方法，能够非常方便地列出对象中所有值和键值对，并且还能够方便地通过一些函数进行过滤和判断等操作。在实际的代码开发中， Object.values() 和 Object.entries() 两个方法已经被广泛采用，让我们的代码变得更加优雅和高效。

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