JavaScript中的循环：for of

在JavaScript中，for of是一种用于迭代数组、字符串和类数组对象的循环结构。它可以替代传统的for循环和forEach方法。

语法

for (variable of iterable) {
  statement
}

其中，variable是声明的变量，用于存储每次迭代的值。iterable是一个可迭代的对象，比如数组、字符串或类数组对象。statement是每次迭代时执行的语句块。

以下是一个简单的例子，使用for of迭代一个数组：

const fruits = ['apple', 'banana', 'orange'];

for (const fruit of fruits) {
  console.log(fruit);
}

// Output:
// 'apple'
// 'banana'
// 'orange'

特点

for of循环有以下特点：

1. 它可以迭代数组、字符串和类数组对象，但不能迭代普通对象。
2. 它支持break和continue语句，可以在循环中控制流程。
3. 它和forEach方法不同，在循环中可以使用await关键字，实现异步操作。但需要注意的是，如果迭代的是Promise对象，需要用await关键字来等待异步操作结果返回。

示例

以下是一些示例代码，展示for of循环的用法：

// 迭代字符串
const str = 'hello';

for (const char of str) {
  console.log(char);
}

// Output:
// 'h'
// 'e'
// 'l'
// 'l'
// 'o'


// 迭代类数组对象
const obj = { length: 3, 0: 'cat', 1: 'dog', 2: 'monkey' };

for (const value of Array.from(obj)) {
  console.log(value);
}

// Output:
// 'cat'
// 'dog'
// 'monkey'


// 迭代Promise对象
async function asyncFunc() {
  const fruits = ['apple', 'banana', 'orange'];

  for (const fruit of fruits) {
    await asyncOperation(fruit);
  }
}

function asyncOperation(fruit) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log(fruit);
      resolve();
    }, 1000);
  });
}

asyncFunc();

// Output:
// 'apple' (after 1s)
// 'banana' (after another 1s)
// 'orange' (after another 1s)

对于无法迭代的普通对象，可以使用Object.keys()、Object.values()或Object.entries()方法转换成可迭代的对象。例如：

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

// 迭代键
for (const key of Object.keys(obj)) {
  console.log(key);
}

// Output:
// 'a'
// 'b'
// 'c'


// 迭代值
for (const value of Object.values(obj)) {
  console.log(value);
}

// Output:
// 1
// 2
// 3


// 迭代键值对
for (const [key, value] of Object.entries(obj)) {
  console.log(key + ': ' + value);
}

// Output:
// 'a: 1'
// 'b: 2'
// 'c: 3'

总结

for of循环是一种现代化的、简洁高效的循环结构。尽管它有一些限制，如无法迭代普通对象，但在大多数情况下，使用for of循环可以让代码更加清晰易懂。