在前端开发中，我们经常使用对象来表示数据。然而，操作对象属性时可能会变得繁琐和冗长，这时候就可以使用 ECMAScript 2017（ES8）新增的 Object.values() 和 Object.entries() 方法来优化代码。
Object.values()
Object.values() 方法返回一个给定对象自身的所有可枚举属性值的数组。这对于获取对象值列表非常有用。让我们来看一个例子：
const obj = { a: 1, b: 2, c: 3 };
const values = Object.values(obj);
console.log(values); // [1, 2, 3]Object.values() 方法返回了对象obj的所有值，分别为 1、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]]Object.entries() 方法返回了对象obj的键和值对应的数组，分别为 ["a", 1]、["b", 2]、["c", 3]。
优化代码
使用这两个方法可以简化代码，尤其在遍历对象的过程中。在传统的方式中，我们通常需要使用 for...in 循环来获取所有的键或值：
-- -------------------- ---- -------
----- --- - - -- -- -- -- -- - --
--- ---- --- -- ---- -
----------------- -- ---- ---- ---
-
--- ---- --- -- ---- -
-- ------------------------- -
---------------------- -- -- -- -
-
-使用 Object.values() 和 Object.entries() 方法，我们可以非常方便地获取值或键值对数组：
const obj = { a: 1, b: 2, c: 3 };
const values = Object.values(obj);
console.log(values); // [1, 2, 3]
const entries = Object.entries(obj);
console.log(entries); // [["a", 1], ["b", 2], ["c", 3]]另外，我们还可以将它们与数组方法结合使用：
const obj = { a: 1, b: 2, c: 3 };
const values = Object.values(obj);
const sum = values.reduce((acc, cur) => acc + cur, 0);
console.log(sum); // 6上述代码使用了 reduce() 方法将 values 数组中的所有值相加，并返回结果 6。
总结
ES8 中新增的 Object.values() 和 Object.entries() 方法是非常有用的工具，它们可以帮助我们更轻松地访问对象的属性。在需要获取、遍历或计算对象值时，建议使用它们来优化你的代码。
示例代码：https://codepen.io/ChatGPT/pen/mdmwaMy
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651ab5eb95b1f8cacd28bdec