如何使用 Object.entries 和 Object.values 方法简化 JavaScript 代码

在 JavaScript 编程中，我们经常需要遍历对象的属性和值。在过去，我们可能需要使用 for-in 循环和 Object.keys 方法来实现这个目的。但是，ES2017 引入了新的 Object.entries 和 Object.values 方法，使得操作对象变得更加简单和高效。本文将介绍 Object.entries 和 Object.values 方法的用法，并给出一些实际的代码示例。

Object.entries 方法

Object.entries 方法返回一个由对象的属性键值对组成的数组。每个键值对由两个元素组成，第一个元素是属性的名称，第二个元素是属性的值。下面是 Object.entries 方法的语法：

Object.entries(obj)

其中，obj 是要操作的对象。下面是一个简单的示例：

const obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj));
// Output: [ [ 'foo', 'bar' ], [ 'baz', 42 ] ]

在上面的示例中，Object.entries 方法将对象 { foo: 'bar', baz: 42 } 转换成了数组 [ [ 'foo', 'bar' ], [ 'baz', 42 ] ]。我们可以使用 for-of 循环来遍历这个数组：

const obj = { foo: 'bar', baz: 42 };
for (const [key, value] of Object.entries(obj)) {
  console.log(`${key}: ${value}`);
}
// Output:
// foo: bar
// baz: 42

在上面的示例中，我们使用解构语法来获取键值对的键和值，并使用模板字符串来输出结果。

Object.entries 方法对于遍历对象非常有用。我们可以使用它来实现一些常见的操作，例如过滤对象属性、将对象转换成 URL 查询字符串等。

Object.values 方法

Object.values 方法返回一个由对象属性值组成的数组。下面是 Object.values 方法的语法：

Object.values(obj)

其中，obj 是要操作的对象。下面是一个简单的示例：

const obj = { foo: 'bar', baz: 42 };
console.log(Object.values(obj));
// Output: [ 'bar', 42 ]

在上面的示例中，Object.values 方法将对象 { foo: 'bar', baz: 42 } 的属性值转换成了数组 [ 'bar', 42 ]。我们可以使用 for-of 循环来遍历这个数组：

const obj = { foo: 'bar', baz: 42 };
for (const value of Object.values(obj)) {
  console.log(value);
}
// Output:
// bar
// 42

Object.values 方法对于遍历对象属性值非常有用。我们可以使用它来实现一些常见的操作，例如计算对象属性值的总和、查找特定属性值等。

示例代码

下面是一些使用 Object.entries 和 Object.values 方法的示例代码：

过滤对象属性

const obj = { foo: 'bar', baz: 42, qux: 'quux' };
const filteredObj = Object.fromEntries(Object.entries(obj).filter(([key, value]) => key !== 'baz'));
console.log(filteredObj);
// Output: { foo: 'bar', qux: 'quux' }

在上面的示例中，我们使用 Object.entries 方法将对象转换成数组，然后使用 filter 方法过滤掉属性名为 'baz' 的属性，最后使用 Object.fromEntries 方法将数组转换回对象。

将对象转换成 URL 查询字符串

const obj = { foo: 'bar', baz: 42 };
const queryString = Object.entries(obj)
  .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
  .join('&');
console.log(queryString);
// Output: foo=bar&baz=42

在上面的示例中，我们使用 Object.entries 方法将对象转换成数组，然后使用 map 方法将每个属性键值对转换成 URL 查询字符串格式，最后使用 join 方法将所有属性键值对连接成一个字符串。

计算对象属性值的总和

const obj = { foo: 10, bar: 20, baz: 30 };
const sum = Object.values(obj).reduce((acc, value) => acc + value, 0);
console.log(sum);
// Output: 60

在上面的示例中，我们使用 Object.values 方法将对象属性值转换成数组，然后使用 reduce 方法计算数组元素的总和。

结论

Object.entries 和 Object.values 方法是 JavaScript 中非常有用的方法，可以帮助我们更轻松地遍历对象的属性和值。它们可以用于各种常见的编程任务，例如过滤对象属性、将对象转换成 URL 查询字符串、计算对象属性值的总和等。如果你想让你的代码更加简单和高效，那么不妨使用 Object.entries 和 Object.values 方法。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673c18f9961846b0968d3c28