ES6 中的 JavaScript for…of 循环简介

摘要：本教程将介绍如何使用 JavaScript for...of 语句迭代可迭代对象。

JavaScript for…of 循环简介

ES6 引入了一种新的语句 for...of，它可以迭代可迭代对象，例如：

内置数组、字符串、Map、Set 等。
类似数组的对象，例如 arguments 或 NodeList。
实现迭代器协议的用户定义对象。

以下演示了 for...of 的语法：

for (variable of iterable) {
   // ...
}Code language: JavaScript (javascript)

变量

在每次迭代中，可迭代对象的属性都会被赋值给 变量。您可以使用 var、let 或 const 来声明 变量。

可迭代对象

可迭代对象是一个其可迭代属性将被迭代的对象。

JavaScript for of 循环示例

让我们来看一些使用 for...of 循环的示例。

1) 迭代数组

以下示例展示了如何使用 for...of 来迭代数组元素：

let scores = [80, 90, 70];

for (let score of scores) {
    score = score + 5;
    console.log(score);
}Code language: JavaScript (javascript)

输出

85
95
75

在本例中，for...of 迭代 scores 数组中的每个元素。它在每次迭代中将 scores 数组的元素赋值给变量 score。

如果您在循环中不改变变量，您应该使用 const 关键字而不是 let 关键字，如下所示：

let scores = [80, 90, 70];

for (const score of scores) {
    console.log(score);
}Code language: JavaScript (javascript)

输出

80
90
70

要访问循环内部数组元素的索引，可以使用 for...of 语句和数组的 entries() 方法。

array.entries() 方法在每次迭代中返回 [index, element] 对。例如：

let colors = ['Red', 'Green', 'Blue'];

for (const [index, color] of colors.entries()) {
    console.log(`${color} is at index ${index}`);
}Code language: JavaScript (javascript)

输出

Red is at index 0
Green is at index 1
Blue is at index 2

在本例中，我们使用数组解构将 entries() 方法的结果在每次迭代中赋值给 index 和 color 变量。

const [index, color] of colors.entries()Code language: CSS (css)

2) for…of 的就地对象解构

考虑以下示例：

const ratings = [
    {user: 'John',score: 3},
    {user: 'Jane',score: 4},
    {user: 'David',score: 5},
    {user: 'Peter',score: 2},
];

let sum = 0;
for (const {score} of ratings) {
    sum += score;
}

console.log(`Total scores: ${sum}`); // 14Code language: JavaScript (javascript)

输出

Total scores: 14

工作原理

ratings 是一个对象数组。每个对象都有两个属性 user 和 score。
for...of 迭代 ratings 数组并计算所有对象的总分。
表达式 const {score} of ratings 使用对象解构将当前迭代元素的 score 属性赋值给 score 变量。

3) 迭代字符串

以下示例使用 for...of 循环来迭代字符串的字符。

let str = 'abc';
for (let c of str) {
    console.log(c);
}Code language: JavaScript (javascript)

输出

a
b
c

3) 迭代 Map 对象

以下示例说明了如何使用 for...of 语句来迭代 Map 对象。

let colors = new Map();

colors.set('red', '#ff0000');
colors.set('green', '#00ff00');
colors.set('blue', '#0000ff');

for (let color of colors) {
    console.log(color);
}Code language: JavaScript (javascript)

输出

[ 'red', '#ff0000' ]
[ 'green', '#00ff00' ]
[ 'blue', '#0000ff' ]Code language: JSON / JSON with Comments (json)

4) 迭代 Set 对象

以下示例展示了如何使用 for...of 循环迭代 set 对象。

let nums = new Set([1, 2, 3]);

for (let num of nums) {
    console.log(num);
}Code language: JavaScript (javascript)

for...of vs. for...in

for...in 迭代对象的所有可枚举属性。它不会迭代 Array、Map 或 Set 等集合。

与 for...in 循环不同，for...of 迭代的是集合，而不是对象。实际上，for...of 迭代具有 [Symbol.iterator] 属性的任何集合的元素。

以下示例说明了 for...of 和 for...in 之间的区别：

let scores = [10,20,30];
scores.message = 'Hi';

console.log("for...in:");
for (let score in scores) {
  console.log(score); 
}

console.log('for...of:');
for (let score of scores) {
  console.log(score);
}
Code language: JavaScript (javascript)

输出

for...in:
0
1
2
message
for...of:
10
20
30Code language: CSS (css)

在本例中，for…in 语句迭代了 scores 数组的属性：

for...in:
0
1
2
messageCode language: CSS (css)

而 for…of 迭代数组元素：

for...of:
10
20
30Code language: CSS (css)

摘要

使用 for...of 循环来迭代可迭代对象的元素。

本教程是否有帮助？