ES6 中的 for...of 循环

在 ES6 中，引入了新的循环语法 for...of，它可以遍历可迭代对象（包括数组、字符串、Set、Map 等），并且比传统的 for 循环更加简洁和易读。

基本语法

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

for (let item of iterable) {
  // 循环体
}

其中，item 为迭代器返回的值，iterable 为可迭代对象。在循环体内，可以直接使用 item 变量。

示例代码

下面是一个简单的示例代码，使用 for...of 循环遍历一个数组并输出每个元素的值：

const arr = [1, 2, 3];
for (let item of arr) {
  console.log(item);
}
// 输出：1 2 3

for...of vs. for 循环

相比传统的 for 循环，for...of 循环更加简洁和易读，同时也可以避免一些常见的错误。

代码简洁

使用 for...of 循环，可以避免使用索引变量和数组长度等临时变量，从而使代码更加简洁。

比如，下面是一个使用传统 for 循环遍历数组的示例代码：

const arr = [1, 2, 3];
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}
// 输出：1 2 3

相比之下，使用 for...of 循环可以更加简洁：

const arr = [1, 2, 3];
for (let item of arr) {
  console.log(item);
}
// 输出：1 2 3

避免越界错误

使用传统的 for 循环遍历数组时，容易出现数组越界的错误。

比如，下面的示例代码中，由于 i 的范围超出了数组的长度，会导致访问 undefined，从而产生错误。

const arr = [1, 2, 3];
for (let i = 0; i <= arr.length; i++) {
  console.log(arr[i]); // Uncaught TypeError: Cannot read property '3' of undefined
}

相比之下，使用 for...of 循环可以避免这种错误：

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

支持迭代器

for...of 循环不仅支持数组等内置可迭代对象，还支持自定义迭代器。

比如，下面是一个自定义迭代器的示例代码，它可以遍历一个字符串并输出每个字符的 ASCII 码：

const str = 'hello';
for (let char of str) {
  console.log(char.charCodeAt(0));
}
// 输出：104 101 108 108 111

总结

ES6 中的 for...of 循环是一种简洁、易读、避免越界错误、支持迭代器的循环语法，可以用于遍历可迭代对象。在实际开发中，建议尽可能使用 for...of 循环，以提高代码的可读性和可维护性。

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