ES6 中对象的迭代方法详解

在 ES6 中，Javascript 引入了一系列全新的迭代方法，使得遍历数据结构变得更为便捷和灵活。这些方法同样也适用于对象，因此我们可以用新的方法来遍历对象，从而更加高效地处理对象相关的数据。

迭代方法概览

ES6 中常用的迭代方法包含以下几种：

for...in 循环

for...in 循环是最基本的迭代方法，用于遍历对象的所有可枚举属性 (enumerable properties) 。for...in 循环的基本语法如下：

for (variable in object) {
  // code to be executed
}

其中：

• variable 表示变量名，用于在循环过程中存储当前属性名；
• object 表示对象名，用于指定要被遍历的对象；

Object.keys()

Object.keys() 方法返回一个对象的所有可枚举属性 (enumerable properties) 的字符串数组，用于遍历对象。该方法的基本语法如下：

Object.keys(obj)

其中：

• obj 表示对象名，用于指定要被遍历的对象；

Object.values()

Object.values() 方法返回一个对象的所有可枚举属性 (enumerable properties) 的属性值数组，用于遍历对象。该方法的基本语法如下：

Object.values(obj)

其中：

• obj 表示对象名，用于指定要被遍历的对象；

Object.entries()

Object.entries() 方法返回一个对象的所有可枚举属性 (enumerable properties) 的属性名和属性值对组成的数组，用于遍历对象。该方法的基本语法如下：

Object.entries(obj)

其中：

• obj 表示对象名，用于指定要被遍历的对象；

迭代方法具体应用

接下来，让我们通过实例来看看如何使用上面介绍的迭代方法来遍历对象。

for...in 循环

我们先来看看如何使用 for...in 循环来遍历一个简单对象，并输出其属性名和属性值。代码如下：

let obj = { name: 'Alice', age: 20, gender: 'female' };

for (let prop in obj) {
  console.log(`${prop}: ${obj[prop]}`);
}

上述 for...in 循环输出的结果为：

name: Alice
age: 20
gender: female

Object.keys()

接下来，我们使用 Object.keys() 来实现上述的功能。代码如下：

let obj = { name: 'Alice', age: 20, gender: 'female' };

Object.keys(obj).forEach((prop) => {
  console.log(`${prop}: ${obj[prop]}`);
});

上述代码中，我们使用了数组的 forEach() 方法，将对象的属性名与属性值进行输出，输出结果与上文相同。

Object.values()

接下来，我们使用 Object.values() 方法来输出对象的属性值。代码如下：

let obj = { name: 'Alice', age: 20, gender: 'female' };

Object.values(obj).forEach((val) => {
  console.log(val);
});

上述代码输出的结果为：

Alice
20
female

Object.entries()

最后，我们使用 Object.entries() 方法来输出对象的属性名和属性值。代码如下：

let obj = { name: 'Alice', age: 20, gender: 'female' };

Object.entries(obj).forEach(([prop, val]) => {
  console.log(`${prop}: ${val}`);
});

上述代码输出的结果与原先 for...in 循环相同。

总结

在 ES6 中，引入了一系列全新的迭代方法，使得 Javascript 开发者能够更加便捷和灵活地处理对象相关的数据。在开发过程中，我们可以选择合适的迭代方法来遍历对象。每种方法都有其独特的优势和适用场景，需要根据实际需求进行选择。

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