ECMAScript 2017 中的 Object.values() 和 Object.entries()：更好的对象处理
在前端开发中，JavaScript 对象是我们经常使用的数据类型之一，所以更好的对象处理变得尤为重要。在 ECMAScript 2017 中，新增了 Object.values() 和 Object.entries() 方法，让我们更加方便地处理对象。本文将详细介绍这两个方法的使用方法以及实际应用场景。
Object.values() 方法
Object.values() 方法返回一个给定对象中所有可枚举属性的值的数组。属性的值的顺序与使用 for...in 循环遍历该对象时返回的顺序一致（属性名称的枚举顺序可能不同）。Object.values() 方法与 Object.keys() 方法类似，只不过 Object.values() 返回的是对象属性值而非属性名称。
示例代码：
const object = {a: 'one', b: 'two', c: 'three'}
const values = Object.values(object)
console.log(values) // ['one', 'two', 'three']在上面的例子中，我们创建了一个对象 object，包含了三个属性，调用 Object.values() 方法返回了这个对象的属性值的数组 values。
Object.entries() 方法
Object.entries() 方法返回一个给定对象自身可枚举属性 [key, value] 数组。这些数组的顺序与使用 for...in 循环遍历该对象时返回的顺序一致（属性名称的枚举顺序可能不同）。这个方法的返回值可以被用于 Object.fromEntries() 方法，以便将一个对象转换为一个 Map 对象。
示例代码：
const object = {a: 'one', b: 'two', c: 'three'}
const entries = Object.entries(object)
console.log(entries) // [['a', 'one'], ['b', 'two'], ['c', 'three']]在上面的例子中，我们创建了一个对象 object，包含了三个属性，调用 Object.entries() 方法返回了这个对象的属性 [key, value] 数组 entries。
应用场景
下面是一些实际应用的场景，可以帮助您更好地理解 Object.values() 和 Object.entries() 方法。
- 循环遍历对象属性
可以使用 Object.values() 和 Object.entries() 方法对对象的属性进行遍历，并对其进行处理。
-- -------------------- ---- ------- ----- ------ - --- ------ -- ------ -- -------- --- ------ ----- -- ---------------------- - ------------------ - -- ----- -- ----- -- ------- --- ------ ----- ------ -- ----------------------- - -------------------- ---------- - -- --- ---- -- --- ---- -- --- ------
- 使用 Object.values() 方法求和
可以使用 Object.values() 方法对一个包含数字的对象属性进行求和。
const object = {a: 1, b: 2, c: 3}
const sum = Object.values(object).reduce((acc, cur) => acc + cur, 0)
console.log(sum) // 6在上面的例子中，我们首先使用 Object.values() 方法获取了对象属性值的数组，然后使用 reduce() 方法将数组的元素进行累加求和，得到了最终的结果 6。
- 使用 Object.entries() 方法转换对象格式
可以使用 Object.entries() 和 Object.fromEntries() 方法在对象属性中进行添加或删除。
const object = {a: 'one', b: 'two', c: 'three'}
const newObject = Object.fromEntries(
Object.entries(object).map(([key, value]) => [key.toUpperCase(), value])
)
console.log(newObject) // {A: 'one', B: 'two', C: 'three'}在上面的例子中，我们首先使用 Object.entries() 方法获取了对象属性 [key, value] 数组，然后使用 map() 方法进行属性转换，最后使用 Object.fromEntries() 方法将属性 [key, value] 数组转换成对象。
总结
Object.values() 和 Object.entries() 方法在处理对象上具有很大的作用。在实际开发中，我们可以根据需要使用这两个方法，以达到更好的面向对象编程的目的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f47db9f6b2d6eab3d7b556