JavaScript中的for..of循环

在ES6 (ECMAScript 2015)中引入了一种新的循环语句 for..of，用于遍历可迭代对象（如数组、字符串、Set、Map等等）。相比传统的 for 循环，for..of 循环语句更加简洁易懂，优雅简单，提高了代码的可读性和可维护性。

语法

for..of 循环的语法如下：

for (variable of iterable) {
  // statement
}

其中，variable 表示在每次迭代时存储当前项的变量名，而 iterable 表示可迭代对象。每一次循环中，variable 将会被赋值为 iterable 中的当前项，并且会一直运行 statement 直到 iterable 中的所有项都被遍历完成。

以下是一个示例，展示如何使用 for..of 循环遍历一个数组中的元素：

const arr = ['one', 'two', 'three'];

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

该代码将会输出：

one
two
three

注意事项

需要注意的是，for..of 循环只能用于遍历可迭代对象，而不能用于遍历普通的对象（Plain objects）。如果需要遍历对象，可以使用 for..in 循环。

同时，由于 for..of 循环基于迭代器（iterator）的机制实现，所以只有实现了 Iterator接口 的对象才能使用该循环语句。例如，以下是一个使用 Symbol.iterator 实现迭代器接口的对象：

const iterableObj = {
  [Symbol.iterator]() {
    let i = 0;
    return {
      next() {
        if (i < 3) {
          i++;
          return { value: i, done: false };
        } else {
          return { done: true };
        }
      }
    }
  }
}

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

该代码将会输出：

1
2
3

结论

在 JavaScript 编程中，使用 for..of 循环可以显著提高代码的可读性和可维护性，使得代码更加简洁、优雅。当需要遍历可迭代对象时，强烈推荐使用 for..of 循环语句。