利用 ES8 中的 Object.values() 方法对 Object 对象进行遍历-JavaScript中文网-JavaScript教程资源分享门户

前言

前端开发中，经常遇到需要对一个 Object 对象进行遍历的需求。在过去，我们通常会使用 for-in 循环来遍历 Object 对象。但是使用 for-in 循环存在一些问题，例如：

经常遍历到原型链上的属性，需要使用 hasOwnProperty() 判断
for-in 循环不保证属性的顺序
不能遍历 Symbol 类型的属性

ES8 中的 Object.values() 方法

ES8 中新增了 Object.values() 方法，该方法可返回一个对象中所有可枚举属性的值，返回值为一个数组。

Object.values() 方法的语法如下：

Object.values(obj)

其中，obj 为需要遍历的 Object 对象。

Object.values() 方法的使用

Object.values() 方法可用于遍历 Object 对象中的属性。例如，我们有一个对象 person，包括姓名、年龄和性别属性，如下所示：

const person = {
  name: 'Tom',
  age: 18,
  gender: 'male'
};

我们可以使用 Object.values() 方法获取该对象的所有属性值，并将其保存在一个数组中：

const values = Object.values(person);
console.log(values); // ['Tom', 18, 'male']

Object.values() 方法的注意事项

当使用 Object.values() 方法遍历 Object 对象时，需要考虑以下一些注意事项：

1. Symbol 属性不会被遍历到

在 Object 对象中，Symbol 类型的属性是一种特殊的属性，它不会被枚举到。当我们使用 Object.values() 方法遍历 Object 对象时，Symbol 类型的属性会被忽略。

例如，我们有一个对象 foo，包括两个属性 name 和 Symbol('age')：

const foo = {
  name: 'Tom',
  [Symbol('age')]: 18
};

使用 Object.values() 方法遍历该对象时，只会返回 name 的值，而不是 Symbol('age') 的值：

const values = Object.values(foo);
console.log(values); // ['Tom']

2. Object.prototype 上的属性会被枚举到

当一个对象包括一些继承自 Object.prototype 的属性时，这些属性也会被 Object.values() 方法枚举到。例如，我们有一个对象 bar，它继承自 Object.prototype，包括一个属性 name：

function Bar() {}
Bar.prototype.name = 'Tom';

const bar = new Bar();

使用 Object.values() 方法遍历该对象时，会返回 name 的值：

const values = Object.values(bar);
console.log(values); // ['Tom']

3. Object.values() 方法返回的是属性值数组，而非包含属性名和属性值的二元组

在有些编程语言（例如 Python）中，遍历一个 Object 对象通常会获得一个二元组，包括属性名和属性值。但是，在 JavaScript 中，Object.values() 方法返回的是属性值数组，不包括属性名。

总结

Object.values() 方法是 ES8 新增的一个方法，可用于遍历 Object 对象中的属性。相比于传统的 for-in 循环，使用 Object.values() 方法可以简化代码，并且不会遍历到原型链上的属性，也不会遍历 Symbol 类型的属性。但是需要注意，Object.prototype 上的属性会被枚举到，返回的是属性值数组，而非包括属性名和属性值的二元组。建议在遍历 Object 对象时，优先使用 Object.values() 方法，尽量避免使用 for-in 循环，以提高代码的可读性和性能。

示例代码

// javascriptcn.com 代码示例
// 定义一个对象 person，包括姓名、年龄和性别属性
const person = {
  name: 'Tom',
  age: 18,
  gender: 'male'
};

// 使用 Object.values() 方法获取该对象的所有属性值，并将其保存在一个数组中
const values = Object.values(person);
console.log(values); // ['Tom', 18, 'male']

// 定义一个对象 foo，包括两个属性 name 和 Symbol('age')
const foo = {
  name: 'Tom',
  [Symbol('age')]: 18
};

// 使用 Object.values() 方法遍历该对象时，只会返回 name 的值，而不是 Symbol('age') 的值
const values2 = Object.values(foo);
console.log(values2); // ['Tom']

// 定义一个对象 bar，它继承自 Object.prototype，包括一个属性 name
function Bar() {}
Bar.prototype.name = 'Tom';

const bar = new Bar();

// 使用 Object.values() 方法遍历该对象时，会返回 name 的值
const values3 = Object.values(bar);
console.log(values3); // ['Tom']

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