ES9：如何中断循环

在 JavaScript 中，我们经常需要使用循环语句来遍历数组或对象。但是，有时候我们需要在循环过程中中断循环，比如找到符合条件的元素后就不需要继续遍历了。在 ES9 中，新增了一种中断循环的语法：for-await-of。

传统的中断循环方法

在 ES6 之前，我们使用 for 循环或 while 循环来遍历数组或对象，并使用 break 或 continue 来中断循环。

// javascriptcn.com 代码示例
const arr = [1, 2, 3, 4, 5];
let result = null;

for (let i = 0; i < arr.length; i++) {
  if (arr[i] === 3) {
    result = arr[i];
    break;
  }
}

console.log(result); // 3

上面的代码中，我们使用 for 循环遍历数组 arr，当找到值为 3 的元素时，使用 break 关键字中断循环，并将找到的元素赋值给变量 result。

for-await-of 循环

ES9 中新增的 for-await-of 循环语法，可以用来遍历异步迭代器，同时它也支持中断循环的功能。

// javascriptcn.com 代码示例
async function fetchUsers() {
  const users = [
    { name: "Alice", age: 20 },
    { name: "Bob", age: 25 },
    { name: "Charlie", age: 30 },
  ];

  for await (const user of users) {
    if (user.age === 25) {
      console.log(user.name);
      break;
    }
  }
}

fetchUsers(); // Bob

上面的代码中，我们使用 for-await-of 循环遍历异步迭代器 users，当找到年龄为 25 的用户时，使用 break 关键字中断循环，并将该用户的姓名打印输出。

需要注意的是，for-await-of 循环只支持异步迭代器，如果要遍历普通的数组或对象，需要将它们转化为异步迭代器。

const arr = [1, 2, 3, 4, 5];
const asyncIterator = arr[Symbol.asyncIterator]();

(async function () {
  for await (const item of asyncIterator) {
    console.log(item);
  }
})();

上面的代码中，我们将普通数组 arr 转化为异步迭代器，并使用 for-await-of 循环遍历它。

总结

在 JavaScript 中，循环语句是非常常用的语法之一，而中断循环也是经常使用的操作。ES9 中新增的 for-await-of 循环语法，可以用来遍历异步迭代器，并支持中断循环的功能，这为我们编写异步代码提供了更加方便和灵活的方式。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6552168ed2f5e1655dbced7b