ECMAScript 2017 中 for...of 循环的使用技巧与注意事项-JavaScript中文网-JavaScript教程资源分享门户

在 ECMAScript 2017 中，新增了 for...of 循环，它提供了一种遍历可迭代对象（例如数组、字符串、Map 和 Set 等）的新方式。相较于传统的 for 循环和 forEach，for...of 循环更加简洁易用，在写代码的过程中能够提高开发效率。

基本用法

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

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

其中，variable 为可选项，是一个在循环中声明的变量，用于存储当前迭代的值。iterable 则是一个可迭代的对象，可以是数组、字符串、Map 或 Set 等。

假设我们有一个数组，我们可以使用 for...of 循环来遍历它：

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

for (const value of arr) {
  console.log(value);
}
// Output: 1, 2, 3, 4

在这个例子中，我们声明一个变量 value，并使用它来存储每个迭代的值，接着使用 console.log() 方法输出每个值。

for...of 循环只能用于可迭代对象。如果你使用它来迭代对象或其他非可迭代对象，就会报错。因此，在使用 for...of 循环之前，确保对象是可迭代的。例如，当我们使用 for...of 循环时遍历了一个对象时，就会报错：

const obj = { a: 1, b: 2, c: 3 };

for (const value of obj) {
  console.log(value);
}
// Uncaught TypeError: obj is not iterable

与传统的 for 循环不同，for...of 循环没有类似 break 或 continue 的标签语法，因此无法从多层循环中轻松跳出。如果你需要跳出多层循环，可以考虑使用其他方式，例如使用 forEach 或手动抛出异常。

for...of 循环遍历对象时，它会遍历对象的属性，但是属性的顺序是不确定的。如果你需要按照特定顺序遍历对象的属性，可以使用其他方式，例如使用 Object.keys() 方法。

const obj = { a: 1, b: 2, c: 3 };

for (const key of Object.keys(obj)) {
  console.log(key, obj[key]);
}
// Output: "a 1", "b 2", "c 3"

在字符串上使用 for...of 循环，可以便利字符串中的每个字符，这对于需要操作字符串中字符的场景非常有用。

const str = 'hello';

for (const char of str) {
  console.log(char.toUpperCase());
}
// Output: "H", "E", "L", "L", "O"

在 Map 上使用 for...of 循环可以遍历 Map 中的每个键值对。在很多情况下，这比使用 forEach 更加方便且更加易读。

const map = new Map([['a', 1], ['b', 2], ['c', 3]]);

for (const [key, value] of map) {
  console.log(key, value);
}
// Output: "a 1", "b 2", "c 3"

在这个例子中，我们使用了一个解构赋值模式，将每个键值对解构为单独的 key 和 value 变量。

在 Set 上使用 for...of 循环，可以遍历 Set 中的每个值。

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

for (const value of set) {
  console.log(value);
}
// Output: 1, 2, 3, 4

for...of 循环是一个强大的遍历工具，其基本语法简洁易懂，能够提高代码效率。虽然在使用它时需要注意一些限制和特性，但是，结合一些技巧的使用，可以让你更好的发挥它的威力。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67395349317fbffedf163989