在 JavaScript 编程中，我们经常需要遍历对象的属性和值。在过去，我们可能需要使用 for-in 循环和 Object.keys 方法来实现这个目的。但是，ES2017 引入了新的 Object.entries 和 Object.values 方法，使得操作对象变得更加简单和高效。本文将介绍 Object.entries 和 Object.values 方法的用法，并给出一些实际的代码示例。
Object.entries 方法
Object.entries 方法返回一个由对象的属性键值对组成的数组。每个键值对由两个元素组成，第一个元素是属性的名称，第二个元素是属性的值。下面是 Object.entries 方法的语法：
-------------------
其中，obj 是要操作的对象。下面是一个简单的示例：
----- --- - - ---- ------ ---- -- -- --------------------------------- -- ------- - - ------ ----- -- - ------ -- - -
在上面的示例中，Object.entries 方法将对象 { foo: 'bar', baz: 42 } 转换成了数组 [ [ 'foo', 'bar' ], [ 'baz', 42 ] ]。我们可以使用 for-of 循环来遍历这个数组：
----- --- - - ---- ------ ---- -- -- --- ------ ----- ------ -- -------------------- - -------------------- ----------- - -- ------- -- ---- --- -- ---- --
在上面的示例中，我们使用解构语法来获取键值对的键和值，并使用模板字符串来输出结果。
Object.entries 方法对于遍历对象非常有用。我们可以使用它来实现一些常见的操作，例如过滤对象属性、将对象转换成 URL 查询字符串等。
Object.values 方法
Object.values 方法返回一个由对象属性值组成的数组。下面是 Object.values 方法的语法：
------------------
其中，obj 是要操作的对象。下面是一个简单的示例：
----- --- - - ---- ------ ---- -- -- -------------------------------- -- ------- - ------ -- -
在上面的示例中，Object.values 方法将对象 { foo: 'bar', baz: 42 } 的属性值转换成了数组 [ 'bar', 42 ]。我们可以使用 for-of 循环来遍历这个数组：
----- --- - - ---- ------ ---- -- -- --- ------ ----- -- ------------------- - ------------------- - -- ------- -- --- -- --
Object.values 方法对于遍历对象属性值非常有用。我们可以使用它来实现一些常见的操作，例如计算对象属性值的总和、查找特定属性值等。
示例代码
下面是一些使用 Object.entries 和 Object.values 方法的示例代码：
过滤对象属性
----- --- - - ---- ------ ---- --- ---- ------ -- ----- ----------- - ---------------------------------------------------- ------- -- --- --- -------- ------------------------- -- ------- - ---- ------ ---- ------ -
在上面的示例中，我们使用 Object.entries 方法将对象转换成数组，然后使用 filter 方法过滤掉属性名为 'baz' 的属性，最后使用 Object.fromEntries 方法将数组转换回对象。
将对象转换成 URL 查询字符串
----- --- - - ---- ------ ---- -- -- ----- ----------- - ------------------- ----------- ------- -- ---------------------------------------------------------- ----------- ------------------------- -- ------- --------------
在上面的示例中，我们使用 Object.entries 方法将对象转换成数组，然后使用 map 方法将每个属性键值对转换成 URL 查询字符串格式，最后使用 join 方法将所有属性键值对连接成一个字符串。
计算对象属性值的总和
----- --- - - ---- --- ---- --- ---- -- -- ----- --- - ------------------------------- ------ -- --- - ------ --- ----------------- -- ------- --
在上面的示例中，我们使用 Object.values 方法将对象属性值转换成数组，然后使用 reduce 方法计算数组元素的总和。
结论
Object.entries 和 Object.values 方法是 JavaScript 中非常有用的方法，可以帮助我们更轻松地遍历对象的属性和值。它们可以用于各种常见的编程任务，例如过滤对象属性、将对象转换成 URL 查询字符串、计算对象属性值的总和等。如果你想让你的代码更加简单和高效，那么不妨使用 Object.entries 和 Object.values 方法。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/673c18f9961846b0968d3c28