简介
ES8（ECMAScript 2017）是 ECMAScript 标准化的第八个版本，引入了许多新的特性和语法。其中，Object.entries() 和 Object.values() 是两个非常实用的方法，用于获取对象中所有属性（键值对）的值。本篇文章将详细介绍它们的用法以及如何在前端开发中使用它们。
Object.entries() 方法
Object.entries() 方法返回一个给定对象自身可枚举属性的键值对数组，其排列顺序与使用 for...in 循环遍历该对象时返回的顺序一致（数字属性按升序排列在数组的前面）。每个键值对都是一个数组，第一个元素是属性名称，第二个元素是属性值。
下面是 Object.entries() 方法的示例代码：
----- --- - - ---- ------ ---- -- -- --------------------------------- -- - ------- ------- ------- --- -
在这个示例中，Object.entries() 方法返回了一个数组，包含 obj 对象的两个属性的键值对数组。第一个键值对是 ['foo', 'bar']，其中 'foo' 是属性名称，'bar' 是属性的值。第二个键值对是 ['baz', 42]，其中 'baz' 是属性名称，42 是属性的值。
Object.entries() 方法还可以与数组解构语法一起使用，将键值对数组的属性名称和属性值分别赋值给变量。示例代码如下：
----- --- - - ---- ------ ---- -- -- --- ------ ----- ------ -- -------------------- - -------------------- ----------- -- ---- ---- ---- -- -
在这个示例中，使用 for...of 循环遍历 obj 对象的每个属性的键值对数组。每次迭代时，使用数组解构从键值对数组中分别赋值给 key 和 value 变量。然后，将变量用于输出键值对的属性名称和属性值。
Object.values() 方法
与 Object.entries() 方法返回属性的键值对数组不同，Object.values() 方法返回一个给定对象自身的可枚举属性值的数组，其排列顺序与使用 for...in 循环遍历该对象时返回的一致（数字属性按升序排列在数组的前面）。
下面是 Object.values() 方法的示例代码：
----- --- - - ---- ------ ---- -- -- -------------------------------- -- ------- ---
在这个示例中，Object.values() 方法返回了一个数组，包含 obj 对象的两个属性的属性值。第一个属性值是 'bar'，它是属性 foo 的值。第二个属性值是 42，它是属性 baz 的值。
Object.values() 方法还可以与数组解构语法一起使用，将属性值依次赋值给数组中的变量。示例代码如下：
----- --- - - ---- ------ ---- -- -- --- ------ ----- -- ------------------- - ------------------- -- ---- -- -
在这个示例中，使用 for...of 循环遍历 obj 对象的每个属性的属性值数组。每次迭代时，将属性值赋值给 value 变量。然后，输出 value 变量的值。
使用示例
Object.entries() 和 Object.values() 方法非常实用，可以用于在开发中快速获取对象的所有属性的值。下面是一些使用示例：
迭代属性值数组
----- --- - - ---- ------ ---- -- -- --- ------ ----- -- ------------------- - ------------------- -- ---- -- -
计算属性值数组的总和
----- --- - - ---- -- ---- -- ---- - -- ----- --- - ------------------------------- ----- -- --- - ------ ----------------- -- -
将对象转换为 URL 查询字符串
----- ------ - - ---- ------ ---- -- -- ----- ----------- - ---------------------- ----------- ------- -- ---------------------------------------------------------- ----------- ------------------------- -- ----------------
总结
本篇文章介绍了 ES8 中的 Object.entries() 和 Object.values() 方法，详细介绍了它们的用法和示例代码。这两个方法对于在前端开发中快速获取对象的所有属性的值非常有用。在实际开发中，可以结合数组解构语法和其他 JavaScript 方法一起使用，实现更加高效和灵活的编程。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/647d4541968c7c53b0814cb4