ES8 中的对象属性遍历方案：Object.values() 和 Object.entries()-JavaScript中文网-JavaScript教程资源分享门户

随着 JavaScript 语言的不断发展，ES8 中新增了两个方便的对象属性遍历方案：Object.values() 和 Object.entries()。在本文中，我们将详细讨论这两种方案的使用方法和实际应用场景，并提供相应的示例代码。

Object.values()

Object.values() 方法返回一个由对象中的所有属性值所构成的数组。这个数组的顺序与对象自身的属性遍历顺序一致，因此它所返回的值是有序的、类数组对象，可以直接用于迭代操作。

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

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

在这个示例中，我们首先定义了一个对象 obj，它有两个属性：foo 和 baz。然后我们调用 Object.values() 方法将对象的属性值存储在一个变量 values 中，并将其打印出来。我们可以看到 values 数组与对象的属性值一一对应。

Object.values() 方法主要用于遍历对象的属性值，因为它提供了一个快速获取对象属性值的方式，以便于处理对象的属性和值。

Object.entries()

Object.entries() 方法返回一个由对象中的所有属性键值对所组成的数组。数组中的每一项都是一个二元元组，包含属性的键名和键值。因此，Object.entries() 方法与 Object.values() 方法的差异在于它们包含的信息不同。

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

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

在这个示例中，我们首先定义了一个对象 obj，它有两个属性：foo 和 baz。然后我们调用 Object.entries() 方法将对象的属性键值对存储在一个变量 entries 中，并将其打印出来。我们可以看到 entries 数组中的每一项都是一个包含属性的键名和键值的数组。

Object.entries() 方法主要用于遍历对象的键值对，因为它提供了一个获取完整键值对信息的方式，便于进行一些更加复杂的操作，比如对象属性的比较和排序等。

深入实际应用场景

除了上面的基本用法之外，Object.values() 和 Object.entries() 方法还可以在一些特定的场景下发挥更大的作用。

遍历数组对象

Object.values() 和 Object.entries() 方法可以帮助我们遍历数组对象，且这两种方法均可以用于对数组对象进行排序。

比如，我们可以通过 Object.entries() 和 Array.prototype.sort() 方法来实现对一个数组对象中的指定属性进行排序，代码如下所示：

// javascriptcn.com 代码示例
const users = [
  { name: 'John', age: 28 },
  { name: 'Tom', age: 21 },
  { name: 'Mike', age: 46 },
  { name: 'Peter', age: 32 }
];

const sortedUsers = users.sort((a, b) =>
  Object.entries(a)[0][1] > Object.entries(b)[0][1] ? 1 : -1
);

console.log(sortedUsers);

在这个示例中，我们首先定义了一个包含用户信息的数组对象 users，包含每个用户的 name 和 age 属性。然后我们调用 Array.prototype.sort() 方法按照用户年龄的升序对数组对象进行排序，并且使用 Object.entries() 方法来获取用户的年龄属性，以便于比较排序。

从对象中获取属性名

Object.entries() 方法可以用于从一个对象中获取属性名，代码如下所示：

const obj = { name: 'John', age: 28 };
const keys = Object.entries(obj).map(([key, value]) => key);

console.log(keys); // ['name', 'age']

在这个示例中，我们首先定义了一个对象 obj，包含两个属性：name 和 age。然后我们调用 Object.entries() 方法将属性键值对存储在一个变量中，并使用 Array.prototype.map() 方法从返回的所有属性中提取出所有的属性键，并将其存储在一个变量 keys 中。

从对象中获取非重复属性值

Object.values() 方法可以帮助我们快速从一个对象中获取到所有的非重复属性值，代码如下所示：

const obj = { name: 'John', age: 28, city: 'New York', country: 'USA' };
const cities = new Set(Object.values(obj));
console.log(cities); // Set{'John', 28, 'New York', 'USA'}

在这个示例中，我们首先定义了一个包含个人信息的对象 obj。然后我们调用 Object.values() 方法获取该对象中的所有属性值，并使用 ES6 中的 Set 对象来去重。最终输出的结果是一个 Set 集合，其中包含了所有的非重复属性值。

本文总结

Object.values() 和 Object.entries() 是 ES8 中两种常用的对象属性遍历方案。这两种方法均能方便地遍历对象中的属性值和属性键值对，并在实际应用场景中有着重要的作用。当我们需要获取对象中的属性信息或进行一些复杂操作时，不妨尝试使用这两种方法。

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