JavaScript for...of 循环介绍

在 JavaScript 中，for...of 语句提供了一种迭代可迭代对象（如数组、字符串、Map、Set，等等）的简洁语法。

基本语法

以下是 for...of 循环的基本语法：

for (variable of iterable) {
  // 需要执行的代码块
}

其中，variable 表示迭代过程中当前元素的值，iterable 表示一个可迭代对象。

示例代码

以下是一个 for...of 循环的示例代码，用于遍历一个数组并打印每个元素：

const array = [1, 2, 3, 4, 5];

for (const element of array) {
  console.log(element);
}

输出结果为：

1
2
3
4
5

获取索引值

如果需要在 for...of 循环中获取当前元素的索引值，可以使用 entries() 函数返回一个包含索引值和元素值的迭代器对象。以下是一个示例代码：

const array = [1, 2, 3, 4, 5];

for (const [index, element] of array.entries()) {
  console.log(`Index: ${index} Element: ${element}`);
}

输出结果为：

Index: 0 Element: 1
Index: 1 Element: 2
Index: 2 Element: 3
Index: 3 Element: 4
Index: 4 Element: 5

对字符串进行迭代

字符串也可以使用 for...of 循环进行迭代，以下是一个示例代码：

const str = 'Hello, World!';

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

输出结果为：

H
e
l
l
o
,
 
W
o
r
l
d
!

迭代 Map

for...of 循环也可以用于迭代 Map 对象，以下是一个示例代码：

const map = new Map();
map.set('name', 'Alice');
map.set('age', 25);

for (const [key, value] of map) {
  console.log(`${key}: ${value}`);
}

输出结果为：

name: Alice
age: 25

迭代 Set

for...of 循环也可以用于迭代 Set 对象，以下是一个示例代码：

const set = new Set(['apple', 'banana', 'orange']);

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

输出结果为：

apple
banana
orange

总结

for...of 循环提供了一种简洁的语法用于迭代可迭代对象。它适用于数组、字符串、Map、Set，等等。如果需要获取当前元素的索引值，可以使用 entries() 函数返回一个包含索引值和元素值的迭代器对象。