JavaScript for...of 循环

什么是 for...of 循环？

在现代 JavaScript 中，for...of 循环是一种遍历数据集合的强大且简洁的方式。与 for...in 循环不同，for...of 循环专注于遍历可迭代对象的 “值”，而不是属性名或索引。

for...of 循环用于遍历可迭代对象的元素值。它直接访问集合中每个元素的实际值，而不需要通过索引或属性名。

语法：

for (const value of iterable) {
    ……
}

说明：

iterable 是一个可迭代对象，比如数组、字符串、Set、Map 等。在每次迭代时，会当前元素的值赋给变量 value。

示例 1：使用 for...of 遍历数组

const fruits = ["苹果", "香蕉", "橙子"];

for (const fruit of fruits) {
    console.log(fruit);
}

运行结果如下。

苹果
香蕉
橙子

分析：

在这个例子中，我们使用 for...of 循环来遍历 fruits 数组的每一个元素。在每次迭代中，fruit 变量依次取到数组中的值："苹果"、"香蕉"、"橙子"。

什么是可迭代对象（Iterable）？

在 JavaScript 中，可迭代对象指的是实现了迭代器协议（Iteration Protocol）的对象。简单来说，就是可以通过迭代器依次访问其元素的集合。

JavaScript 中常见的内置可迭代对象包括：

• Array ( 数组 )。
• String ( 字符串 )。
• Map。
• Set。
• TypedArray（类数组）。
• arguments 对象。
• NodeList 等 DOM 集合。

示例 2：使用 for...of 遍历字符串

const site = "绿叶网";

for (const char of site) {
    console.log(char);
}

运行结果如下。

绿
叶
网

分析：

字符串是一个可迭代对象，for...of 循环会遍历字符串的每一个字符。

示例 3：使用 for...of 遍历 Set

const set = new Set([1, 2, 2, 3, 4, 4]);

for (const item of set) {
    console.log(item);
}

运行结果如下。

1
2
3
4

分析：

Set 是 ES6 新增的一种数据类型，它是一种存储唯一值的集合。其中，for...of 循环遍历 Set 中的每一个唯一元素。

示例 4：使用 for...of 遍历 Map

const students = new Map([
    ["Jack", 90],
    ["Lucy", 85],
    ["Tony", 80]
]);

for (const item of students) {
    console.log(item);
}

运行结果如下。

[ 'Jack', 90 ]
[ 'Lucy', 85 ]
[ 'Tony', 80 ]

分析：

Map 是 ES6 新增的一种数据类型，它是一种存储键值对的集合。使用 for...of 遍历 Map 时，每一次迭代得到的是一个包含当前键值对的数组，如 ["Jack", 90]。

其中，我们还可以使用下面解构赋值的方式来直接方便地获取键和值。

const students = new Map([
    ["Jack", 90],
    ["Lucy", 85],
    ["Tony", 80]
]);

for (const [name, grade] of students) {
    console.log(name, grade);
}

for...of 与 for...in 的区别

很多初学的小伙伴容易把 for...of 与 for...in 这两个搞混，实际上它们有着本质上的区别。

• for...of：用于遍历可迭代对象（如数组、字符串、Map、Set 等）的元素值。
• for...in：用于遍历对象的属性名。

示例 5：for...in 遍历数组

const arr = ["red", "green", "blue"]; 

for (let key in arr) {
    console.log(key);
}

运行结果如下。

0
1
2

分析：

数组本质上也是一个对象，而 for...in 会遍历对象的属性名。当我们使用 for...in 遍历数组时，本质上遍历的是数组的索引（属性名）。

示例 6：for...of 遍历数组

const arr = ["red", "green", "blue"]; 

for (const value of arr) {
    console.log(value);
}

运行结果如下。

red
green
blue

分析：

for...of 遍历的是数组的元素值。通常情况下，遍历数组应该使用 for 循环、forEach() 或 for...of，而不是 for...in。