ES7 中 Object.values() 和 Object.entries() 的使用方法-JavaScript中文网-JavaScript教程资源分享门户

ES7 是 JavaScript 的最新版本之一，它为开发者带来了许多新的特性和语法糖。其中，Object.values() 和 Object.entries() 就是 ES7 中的两个有趣的新功能。

什么是 Object.values() 和 Object.entries()？

在介绍用法之前，我们需要先了解 Object.values() 和 Object.entries() 的基本概念。

Object.values() 方法返回一个给定对象的所有可枚举属性值的数组，值的顺序与使用 for...in 循环遍历该对象时返回的顺序一致。
Object.entries() 方法返回一个给定对象自身可枚举属性的键值对数组，这些键值对的顺序与使用 for...in 循环遍历该对象时返回的顺序一致。

简单来说，Object.values() 可以帮助你获取一个对象的所有属性值，并以数组形式返回，而 Object.entries() 则可以帮助你获取一个对象的键值对列表，并以数组形式返回。

如何使用 Object.values() 和 Object.entries()？

Object.values()

Object.values() 方法非常简单易用，只需要在一个对象上调用 Object.values() 方法即可。例如：

const obj = {
  a: 1,
  b: 2,
  c: 3
};

const values = Object.values(obj);
console.log(values); // [1, 2, 3]

在这个例子中，我们创建了一个包含三个键值对的对象 obj，然后使用 Object.values() 方法获取了该对象的属性值列表并存储在 values 中。最后，我们将 values 打印到控制台上，输出结果为 [1, 2, 3]。

Object.entries()

Object.entries() 方法的使用方式与 Object.values() 方法类似。同样只需要在一个对象上调用 Object.entries() 方法即可。例如：

const obj = {
  a: 1,
  b: 2,
  c: 3
};

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

在这个例子中，我们创建了一个包含三个键值对的对象 obj，然后使用 Object.entries() 方法获取了该对象的键值对列表并存储在 entries 中。最后，我们将 entries 打印到控制台上，输出结果为 [['a', 1], ['b', 2], ['c', 3]]。

需要注意的是，Object.entries() 返回的是一个包含键值对数组的数组，每个键值对数组都包含两个元素。因此，在使用 Object.entries() 时，我们需要使用双重循环来遍历返回的数组。

// javascriptcn.com 代码示例
const obj = {
  a: 1,
  b: 2,
  c: 3
};

const entries = Object.entries(obj);

for (let [key, value] of entries) {
  console.log(`${key}: ${value}`);
}

// 输出结果：
// a: 1
// b: 2
// c: 3

总结

ES7 中的 Object.values() 和 Object.entries() 方法为我们提供了一种简单、快捷的方式来快速获取对象的属性值和键值对列表。它们的用法非常简单，只需要在一个对象上调用这两个方法即可。如果你正在开发一个需要遍历对象属性的 JavaScript 应用程序，那么 Object.values() 和 Object.entries() 绝对是两个令你印象深刻的实用程序。

记得要善加利用这些有用的新特性，用它们来提高你的 JavaScript 编程效率吧！

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