在前端开发中，对象是经常被使用的一种数据类型。在使用对象的时候，经常需要对对象进行循环遍历，以便对其中的属性进行操作。在 ECMAScript 2017（ES8）中，引入了 Object.values 和 Object.entries 两种新的方法，用于对对象进行快速循环。本文将介绍 Object.values 和 Object.entries 的使用方法和优劣势，并给出一些示例代码供读者参考。
Object.values
Object.values 是 ECMAScript 2017 中新增的静态方法，它的作用是返回一个给定对象自身属性值的数组，顺序与使用 for...in 循环遍历该对象时返回的顺序一致。下面是 Object.values 的使用方法示例：
----- --- - --- -- -- -- -- --- ----- ------ - ------------------- -------------------- -- --- -- --
上面的代码中，我们定义了一个对象 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 的使用方法示例：
----- --- - --- -- -- -- -- --- ----- ------- - -------------------- --------------------- -- ------ --- ----- --- ----- ---
上面的代码中，我们同样定义了一个对象 obj，使用 Object.entries 方法获取了 obj 中所有的可枚举属性键值对，赋值给变量 entries，并输出。可以看到，entries 数组中包含了 obj 中的所有可枚举属性键值对，每个键值对都是一个数组，第一个元素是键，第二个元素是值。
Object.entries 的优点在于它可以让我们快速地遍历对象的属性键值对，而无需使用 for...in 循环。它也可以处理任何具有 iterable 接口的对象。但需要注意的是，它只会返回对象自身可枚举的属性键值对，不包括继承的属性键值对。
示例代码
下面是一个示例代码，演示了如何使用 Object.entries 方法来遍历对象的属性键值对，并计算属性值的和：
----- --- - --- -- -- -- -- --- --- --- - -- ---------------------------------- ------- -- - --- -- ------ --- ----------------- -- -
上面的代码中，我们定义了一个对象 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