Object.entries() 和 Object.values()：ES8 中最有用的两个新 API-JavaScript中文网-JavaScript教程资源分享门户

在 ES8（ECMAScript 2017）中，JavaScript 引入了两个新的 Object API：Object.entries() 和 Object.values()。这两个 API 可以帮助开发人员更方便地处理对象。本文将详细介绍这两个 API 的使用方法和使用场景，并提供示例代码以帮助读者更好地理解。

Object.entries()

Object.entries() 方法返回一个给定对象的所有可枚举属性的键值对数组。返回的数组中，每个元素都是一个键值对数组，其中第一个元素是属性的键名，第二个元素是属性的值。这个方法的语法如下所示：

Object.entries(obj)

其中，obj 是要返回其可枚举属性的键值对数组的对象。

下面是一个使用 Object.entries() 方法的示例代码：

const obj = { a: 1, b: 2, c: 3 };
const entries = Object.entries(obj); // [['a', 1], ['b', 2], ['c', 3]]

在这个示例中，我们创建了一个对象 obj，然后使用 Object.entries() 方法将其转换为一个键值对数组。返回的数组中，每个元素都是一个键值对数组，其中第一个元素是属性的键名，第二个元素是属性的值。

Object.entries() 方法可以用于遍历对象的属性。例如，我们可以使用 for...of 循环遍历 Object.entries() 方法返回的数组，获取对象的所有属性：

const obj = { a: 1, b: 2, c: 3 };
for (const [key, value] of Object.entries(obj)) {
  console.log(`${key}: ${value}`);
}
// Output:
// a: 1
// b: 2
// c: 3

在这个示例中，我们使用 for...of 循环遍历 Object.entries() 方法返回的数组，并使用解构赋值获取每个元素的键名和键值。然后，我们将这些值打印到控制台上。

Object.values()

Object.values() 方法返回一个给定对象的所有可枚举属性的值的数组。返回的数组中，每个元素都是对象的一个属性的值。这个方法的语法如下所示：

Object.values(obj)

其中，obj 是要返回其可枚举属性的值的数组的对象。

下面是一个使用 Object.values() 方法的示例代码：

const obj = { a: 1, b: 2, c: 3 };
const values = Object.values(obj); // [1, 2, 3]

在这个示例中，我们创建了一个对象 obj，然后使用 Object.values() 方法将其转换为一个值的数组。返回的数组中，每个元素都是对象的一个属性的值。

Object.values() 方法可以用于获取对象的所有属性的值。例如，我们可以使用 reduce() 方法对 Object.values() 方法返回的数组进行求和：

const obj = { a: 1, b: 2, c: 3 };
const sum = Object.values(obj).reduce((acc, val) => acc + val, 0); // 6

在这个示例中，我们使用 reduce() 方法对 Object.values() 方法返回的数组进行求和。reduce() 方法接收一个回调函数和一个初始值（在本例中为 0），并返回一个累加器。在每次迭代中，回调函数将累加器和当前元素相加，并返回一个新的累加器。

使用场景

Object.entries() 和 Object.values() 方法可以帮助开发人员更方便地处理对象。它们通常用于以下场景：

遍历对象的属性
获取对象的所有属性的键值对或值
对对象的属性进行处理、过滤或转换

下面是一些使用 Object.entries() 和 Object.values() 方法的示例场景：

遍历对象的属性

const obj = { a: 1, b: 2, c: 3 };
for (const [key, value] of Object.entries(obj)) {
  console.log(`${key}: ${value}`);
}
// Output:
// a: 1
// b: 2
// c: 3

获取对象的所有属性的键值对或值

const obj = { a: 1, b: 2, c: 3 };
const entries = Object.entries(obj); // [['a', 1], ['b', 2], ['c', 3]]
const values = Object.values(obj); // [1, 2, 3]

对对象的属性进行处理、过滤或转换

const obj = { a: 1, b: 2, c: 3 };
const doubled = Object.values(obj).map(val => val * 2); // [2, 4, 6]
const filtered = Object.entries(obj).filter(([key, value]) => value > 1); // [['b', 2], ['c', 3]]
const mapped = Object.entries(obj).map(([key, value]) => [key.toUpperCase(), value]); // [['A', 1], ['B', 2], ['C', 3]]

在这些示例中，我们使用 Object.entries() 和 Object.values() 方法对对象的属性进行了处理、过滤或转换。例如，我们使用 Object.values() 方法和 map() 方法将对象的属性值翻倍，并使用 Object.entries() 方法和 filter() 方法过滤出值大于 1 的属性，使用 Object.entries() 方法和 map() 方法将属性的键名转换为大写字母。这些示例展示了 Object.entries() 和 Object.values() 方法的强大之处。

总结

Object.entries() 和 Object.values() 方法是 ES8 中最有用的两个新 API。它们可以帮助开发人员更方便地处理对象，例如遍历对象的属性、获取对象的所有属性的键值对或值、对对象的属性进行处理、过滤或转换。本文提供了详细的使用方法和示例代码，希望能帮助读者更好地理解这两个 API 的使用。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/657ba565d2f5e1655d644455