JavaScript中的for...of循环的用法详解

目录

什么是 for...of 循环

for...of 循环的应用场景

遍历数组

遍历字符串

遍历 Map

遍历 Set

for...of中使用 break 和 continue

总结

注意事项

结语

参考资料

---

JavaScript 是一种非常流行的编程语言，用于前端和后端开发，以及各种 Web 应用程序。其中，for...of 循环是 JavaScript 中的一种重要循环结构，它能够帮助开发者遍历各种数据结构，从而更加高效地编写代码。本文将深入探讨 JavaScript 中的 for...of 循环，包括其语法、用法、应用场景以及一些实际的例子。

什么是 for...of 循环

for...of 循环是 JavaScript 中的一种循环结构，它可以用于遍历各种数据结构，例如数组、字符串、Map、Set 等。for...of 循环通常用于替代传统的 for 循环或 forEach 循环，因为它具有更加简洁和易读的语法，能够提高代码的可读性和可维护性。

在 JavaScript 中，for...of 循环的语法如下：

for (variable of iterable) {
  // code block to be executed
}

其中，variable 是一个变量名，表示循环中每次迭代时的当前值，iterable 是一个可迭代对象，表示要遍历的数据结构。在每次循环中，变量 variable 将依次赋值为 iterable 中的每个元素，并执行一次 code block 中的代码。

在 for...of 循环中，可迭代对象可以是数组、字符串、Map、Set 等，但不能是对象。如果需要遍历对象中的属性，可以使用 for...in 循环。

for...of 循环的应用场景

for...of 循环在 JavaScript 中有许多应用场景，例如：

遍历数组

for...of 循环可以用于遍历数组中的所有元素，例如：

const arr = [1, 2, 3];
for (const element of arr) {
  console.log(element);
}

运行结果：

遍历字符串

for...of 循环也可以用于遍历字符串中的所有字符，例如：

const str = "Hello, Worl