JavaScript for...of 循环

在 JavaScript 中，for...of 是一种循环语句，可以用来迭代数组、字符串、集合等可迭代对象的元素。它为每个可迭代对象的值创建了一个块级作用域，并且不需要我们手动跟踪索引或使用计数器。

语法

for (variable of iterable) {
  // 在这里执行操作
}

• variable: 在每次迭代时，这个变量将被赋值为当前正在迭代的元素的值。
• iterable: 一个可迭代的对象，如数组、字符串、集合等。

示例

迭代数组

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

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

输出：

1
2
3
4
5

迭代字符串

const str = 'Hello';

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

输出：

H
e
l
l
o

迭代集合

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

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

输出：

1
2
3
4
5

注意事项

• for...of 循环只能迭代可迭代的对象，如果尝试将其用于非可迭代对象，将会抛出错误。
• for...of 循环不能直接迭代对象字面量（plain objects），因为它们不是可迭代的。但是可以使用 Object.keys()、Object.values() 或 Object.entries() 将它们转换为可迭代对象，然后进行迭代。

结论

for...of 循环是 JavaScript 中一种便捷的迭代机制，它使得我们可以轻松遍历可迭代对象的每个元素。无论是数组、字符串、还是集合，for...of 都能够很好地完成任务。它也是我们在处理循环时的首选选择之一。

通过 for...of 循环，我们可以避免使用传统的 for 循环或 forEach() 方法，使代码更加简洁和可读。