ES6 赋能 JavaScript，for…of 循环全解

深入理解 JavaScript 中的 for…of 循环

1. for…of 循环的简介

for…of 循环是 ES6 中引入的一种新型迭代循环，旨在提供更简洁、高效的迭代方式，主要用于遍历可迭代对象（如数组、对象、字符串）。for…of 循环采用 let/const 来定义循环变量，并在循环体内使用该变量访问每个迭代元素的值。

const numbers = [1, 2, 3, 4, 5];
for (const number of numbers) {
  console.log(number); // 输出：1 2 3 4 5
}

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

for…of 循环主要用于遍历可迭代对象。它提供了比传统 for 循环和 forEach() 方法更简洁、高效的语法，尤其适用于需要按顺序迭代对象元素的场景。

1. 遍历数组：

const numbers = [1, 2, 3, 4, 5];
for (const number of numbers) {
  console.log(number); // 输出：1 2 3 4 5
}

2. 遍历对象：

const person = {
  name: 'John Doe',
  age: 30,
  city: 'New York'
};

for (const key of Object.keys(person)) {
  console.log(key); // 输出：name, age, city
}

for (const value of Object.values(person)) {
  console.log(value); // 输出：John Doe, 30, New York
}

3. 遍历字符串：

const str = 'Hello World';
for (const char of str) {
  console.log(char); // 输出：H e l l o W o r l d
}

3. for…of 循环的优势

1. 简洁性：
for…of 循环的语法简洁明了，不需要显式声明循环变量的类型和初始值，循环变量直接使用 const/let 关键字声明即可，代码更加精简。

// 传统 for 循环
for (let i = 0; i < numbers.length; i++) {
  const number = numbers[i];
  console.log(number);
}

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

2. 性能提升：
for…of 循环在迭代数组时，能够直接访问数组元素的值，避免了对数组索引的额外计算，因此性能优于传统的 for 循环。

// 传统 for 循环
const numbers = [1, 2, 3, 4, 5];
let sum = 0;
for (let i = 0; i < numbers.length; i++) {
  sum += numbers[i];
}
console.log(sum); // 输出：15

// for...of 循环
const numbers = [1, 2, 3, 4, 5];
let sum = 0;
for (const number of numbers) {
  sum += number;
}
console.log(sum); // 输出：15

3. 可迭代对象的支持：
for…of 循环可以迭代任何可迭代对象，包括数组、对象、字符串、Map、Set 等，使用起来更加灵活。

// 迭代数组
const numbers = [1, 2, 3, 4, 5];
for (const number of numbers) {
  console.log(number);
}

// 迭代对象
const person = {
  name: 'John Doe',
  age: 30,
  city: 'New York'
};
for (const key of Object.keys(person)) {
  console.log(key);
}

// 迭代字符串
const str = 'Hello World';
for (const char of str) {
  console.log(char);
}

4. for…of 循环的限制

1. 不可修改迭代元素：
for…of 循环在迭代过程中无法修改迭代元素的值，如果需要修改元素值，可以使用传统的 for 循环或forEach() 方法。

const numbers = [1, 2, 3, 4, 5];
for (const number of numbers) {
  number += 1; // 报错：TypeError: Assignment to constant variable.
}

2. 无法使用 break 和 continue 语句：
在 for…of 循环中不能使用 break 和 continue 语句，如果需要提前终止循环或跳过某个迭代元素，可以使用传统的 for 循环或forEach() 方法。

const numbers = [1, 2, 3, 4, 5];
for (const number of numbers) {
  if (number === 3) {
    break; // 报错：SyntaxError: Unexpected token 'break'
  }
}