在JavaScript中耍转三种迭代方式：for...in、for...of与for await...of

JavaScript 中的循环与迭代

在 JavaScript 中，循环和迭代是至关重要的概念，它们允许我们重复执行代码块，直到满足特定条件。有三种主要类型的循环和迭代：for...in 、for...of 和 for await...of 。

for...in 循环

for...in 循环用于迭代对象的可枚举属性 。它遍历对象的每个可枚举属性，并将其名称分配给循环变量。

例如：

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

for (const property in person) {
  console.log(property); // 输出："name", "age", "city"
}

for...of 循环

for...of 循环用于迭代可迭代对象 ，如数组、字符串和集合。它遍历对象的每个元素，并将其值分配给循环变量。

例如：

const numbers = [1, 2, 3, 4, 5];

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

for await...of 循环

for await...of 循环用于迭代异步可迭代对象 ，如 Promise 对象。它等待每个 Promise 对象完成，然后将其结果值分配给循环变量。

例如：

async function getNumbers() {
  return [1, 2, 3, 4, 5];
}

async function main() {
  for await (const number of getNumbers()) {
    console.log(number); // 输出：1, 2, 3, 4, 5
  }
}

main();

选择合适的迭代方式

选择合适的迭代方式取决于要迭代的对象类型以及具体需求：

• for...in 循环：迭代对象的可枚举属性
• for...of 循环：迭代可迭代对象 ，如数组和字符串
• for await...of 循环：迭代异步可迭代对象 ，如 Promise 对象

总结

for...in 、for...of 和 for await...of 是 JavaScript 中强大的迭代方式，使我们能够有效地遍历对象、数组和异步对象。通过理解它们的用法和差异，我们可以编写出更高效和更简洁的代码。

常见问题解答

1. for...in 循环是否只迭代自身属性？

   • 是的，for...in 循环只迭代对象的自身属性，不包括继承的属性。

2. for...of 循环是否可以迭代对象？

   • 不能，for...of 循环只能迭代可迭代对象，如数组和字符串。

3. for await...of 循环是否可以迭代同步对象？

   • 不能，for await...of 循环只能迭代异步可迭代对象，如 Promise 对象。

4. 哪种循环最快？

   • for...of 循环通常比 for...in 循环快，因为它只迭代可枚举属性。

5. 我应该总是使用 for await...of 循环来迭代异步对象吗？

   • 是的，for await...of 循环是迭代异步对象的首选方式，因为它可以有效地暂停和恢复执行。