ES10 的 Object.values() 和 Object.entries() 方法使用详解
ES10 作为 JavaScript 最新的语言标准，引入了许多新的功能和 API。其中，Object.values() 和 Object.entries() 方法是两个非常实用的 API，它们可以极大地促进 JavaScript 前端开发的效率。在本文中，我们将详细介绍这两个方法的使用方法和注意事项。
- Object.values() 方法
Object.values() 方法是一个静态方法，接收一个对象作为参数，并返回一个数组，该数组包含给定对象中所有可枚举属性的值。该方法在我们需要获取对象属性值集合时非常有用。下面是一个简单的示例：
const obj = { a: 1, b: 2, c: 3 };
const values = Object.values(obj);
console.log(values); // 输出 [1, 2, 3]使用该方法时需要注意，只有对象属性值是可枚举的时，它们才会被返回到数组中。如果需要获取对象的所有属性，包括不可枚举的属性，应该使用 Object.getOwnPropertyNames() 方法。
- Object.entries() 方法
Object.entries() 方法与 Object.values() 方法类似，不同之处在于它返回的是一个数组，该数组的元素是键值对数组。这两个数组分别包含对象的属性和属性值。下面是一个示例：
const obj = { a: 1, b: 2, c: 3 };
const entries = Object.entries(obj);
console.log(entries); // 输出 [['a', 1], ['b', 2], ['c', 3]]可以看到，该方法返回的是由键值对组成的数组，每个键值对是一个数组，第一个元素是对象的属性，第二个元素是该属性的值。
Object.entries() 方法也需要注意一些事项。与 Object.values() 方法一样，该方法也只返回可枚举的属性。如果需要获取不可枚举属性的键值对，应该使用 Object.getOwnPropertyNames() 方法。
- 应用示例
下面是一些使用 Object.values() 和 Object.entries() 方法的实际示例。
3.1 筛选数组
如果需要将一个对象转为数组，并且只返回某些属性的值，可以使用 Object.values() 方法结合数组的 filter() 方法。例如：
const obj = { a: 1, b: 2, c: 3 };
const values = Object.values(obj).filter(val => val !== 2);
console.log(values); // 输出 [1, 3]可以看到，这里先将对象转为了数组，然后用 filter() 方法筛选了值不为 2 的元素。
3.2 使用 for-of 循环
Object.values() 和 Object.entries() 方法可以与 for-of 循环结合使用，方便遍历对象的属性。例如：
const obj = { a: 1, b: 2, c: 3 };
for (const value of Object.values(obj)) {
console.log(value); // 依次输出 1, 2, 3
}
for (const [key, value] of Object.entries(obj)) {
console.log(`Key: ${key}, Value: ${value}`); // 依次输出 'Key: a, Value: 1', 'Key: b, Value: 2', 'Key: c, Value: 3'
}可以看到，在 for-of 循环中使用这两个方法非常方便，可以直接遍历属性和属性值。
- 总结
Object.values() 和 Object.entries() 方法是 JavaScript 新语言标准 ES10 中引入的两个方法。它们可以极大地促进 JavaScript 前端开发的效率，可以方便地获取对象的属性值集合或者键值对数组。使用这两个方法时，需要注意只有可枚举属性的值才会被返回到数组中。同时可以结合 filter() 方法或者 for-of 循环等语法元素进行使用，实现更为实用的操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e2f800f6b2d6eab3e44b88