在前端开发中，对象是经常被使用的一种数据类型。在使用对象的时候，经常需要对对象进行循环遍历，以便对其中的属性进行操作。在 ECMAScript 2017（ES8）中，引入了 Object.values 和 Object.entries 两种新的方法，用于对对象进行快速循环。本文将介绍 Object.values 和 Object.entries 的使用方法和优劣势，并给出一些示例代码供读者参考。
Object.values
Object.values 是 ECMAScript 2017 中新增的静态方法，它的作用是返回一个给定对象自身属性值的数组，顺序与使用 for...in 循环遍历该对象时返回的顺序一致。下面是 Object.values 的使用方法示例：
const obj = {a: 1, b: 2, c: 3};
const values = Object.values(obj);
console.log(values); // [1, 2, 3]上面的代码中，我们定义了一个对象 obj，它包含了三个属性：a、b、c。我们使用 Object.values 方法获取了 obj 中所有的属性值，并赋值给变量 values，最后输出 values 数组。可以看到，values 数组中包含了 obj 中的所有属性值。
Object.values 的优点在于它可以让我们快速地遍历对象的属性值，而无需使用 for...in 循环。它还可以处理任何具有 iterable 接口的对象，例如数组和 Map。但需要注意的是，它只会返回对象自身可枚举的属性值，不包括继承的属性值。
Object.entries
Object.entries 也是 ECMAScript 2017 中新增的静态方法，它的作用是返回一个给定对象自身可枚举属性键值对的数组，顺序与使用 for...in 循环遍历该对象时返回的顺序一致。下面是 Object.entries 的使用方法示例：
const obj = {a: 1, b: 2, c: 3};
const entries = Object.entries(obj);
console.log(entries); // [["a", 1], ["b", 2], ["c", 3]]上面的代码中，我们同样定义了一个对象 obj，使用 Object.entries 方法获取了 obj 中所有的可枚举属性键值对，赋值给变量 entries，并输出。可以看到，entries 数组中包含了 obj 中的所有可枚举属性键值对，每个键值对都是一个数组，第一个元素是键，第二个元素是值。
Object.entries 的优点在于它可以让我们快速地遍历对象的属性键值对，而无需使用 for...in 循环。它也可以处理任何具有 iterable 接口的对象。但需要注意的是，它只会返回对象自身可枚举的属性键值对，不包括继承的属性键值对。
示例代码
下面是一个示例代码，演示了如何使用 Object.entries 方法来遍历对象的属性键值对，并计算属性值的和：
const obj = {a: 1, b: 2, c: 3};
let sum = 0;
Object.entries(obj).forEach(([key, value]) => {
sum += value;
});
console.log(sum); // 6上面的代码中，我们定义了一个对象 obj，使用 Object.entries 方法获取了 obj 中所有的键值对，然后使用 forEach 方法遍历每个键值对。在遍历的过程中，我们使用结构赋值语法将键值对中的键和值分别赋值给变量 key 和 value。然后累加每个属性值，最后输出 sum 的值，得到 6。
总结
Object.values 和 Object.entries 是 ECMAScript 2017 中新增的两种方法，它们可以让我们快速地遍历对象的属性值或属性键值对，而无需使用 for...in 循环。它们也可以处理任何具有 iterable 接口的对象，并且比 for...in 循环更加直观和易读。但需要注意的是，它们只会返回对象自身的属性值或属性键值对，不包括继承的属性值或属性键值对。在实际开发中，我们可以结合使用这两种方法，来方便地操作对象的属性值和属性键值对。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/651f6de195b1f8cacd6fc673