将JavaScript遍历数组和集合变轻松：for...of循环指南

在JavaScript中，我们需要经常对数据进行循环访问。for...of就是ES2015中引入的一个强大工具，它使遍历数组、类数组和任何可迭代对象变得非常方便。在本文中，我们将深入探讨for...of循环，并提供一些有用的示例。

for...of循环的语法

for (variable of iterable) {
  // 循环体
}

其中：

• variable：循环变量，用于存储每次迭代的值。
• iterable：可迭代对象，可以是数组、类数组或任何可迭代的对象。

for...of循环的用法

1. 迭代数组

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

for (const number of numbers) {
  console.log(number);
}

输出：

1
2
3
4
5

2. 迭代类数组

类数组是指那些具有length属性，并且可以通过索引访问元素的对象。比如，字符串、arguments对象和NodeList对象都是类数组。

const str = "Hello";

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

输出：

H
e
l
l
o

3. 迭代对象

for...of循环还可以迭代对象，包括map、set和DOM集合等。

const map = new Map([
  ["name", "John Doe"],
  ["age", 30]
]);

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

输出：

name: John Doe
age: 30

for...of循环的优点

• 简洁 ：for...of循环的语法非常简洁，易于理解和使用。
• 高效 ：for...of循环在遍历数组和类数组时非常高效。
• 通用 ：for...of循环可以迭代各种可迭代对象，包括数组、类数组、map、set和DOM集合等。

for...of循环的限制

• 不兼容旧版本浏览器 ：for...of循环是ES2015中引入的新特性，因此不支持旧版本浏览器。

总结

for...of循环是JavaScript中一个非常有用的工具，它可以使遍历数组、类数组和可迭代对象变得更加方便、高效和简洁。