ECMAScript 2021 for-in 和 for-of 循环语句的使用

前言

在前端开发中，我们经常需要遍历数组或对象中的元素。在 ECMAScript 2021 中，for-in 和 for-of 循环语句有了一些新的特性和用法。本文将详细介绍这些特性和用法，并提供示例代码和指导意义。

for-in 循环

for-in 循环用于遍历对象中的属性。其语法如下：

for (variable in object) {
  // code block to be executed
}

其中，variable 为变量名，用于指定遍历对象中的属性；object 为要遍历的对象。

示例代码

下面是一个使用 for-in 循环遍历对象的示例代码：

const person = {name: 'Alice', age: 25, gender: 'female'};

for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}

输出结果为：

name: Alice
age: 25
gender: female

新特性

在 ECMAScript 2021 中，for-in 循环语句添加了一个新的选项，即 for-in 循环的 enumerableOnly 参数。该参数可用于指定只遍历对象中可枚举的属性。

for (variable in object, { enumerableOnly: true }) {
  // code block to be executed
}

指导意义

使用 for-in 循环遍历对象时，需要注意以下几点：

• 遍历对象的属性顺序不确定，可能与属性在对象中的定义顺序不一致；
• 遍历对象的属性时，可能会遍历到原型链上的属性；
• 对于非可枚举的属性，需要使用其他方法进行遍历。

for-of 循环

for-of 循环用于遍历可迭代对象中的元素。其语法如下：

for (variable of iterable) {
  // code block to be executed
}

其中，variable 为变量名，用于指定遍历可迭代对象中的元素；iterable 为要遍历的可迭代对象。

示例代码

下面是一个使用 for-of 循环遍历数组的示例代码：

const colors = ['red', 'green', 'blue'];

for (let color of colors) {
  console.log(color);
}

输出结果为：

red
green
blue

新特性

在 ECMAScript 2021 中，for-of 循环语句添加了一个新的选项，即 for-of 循环的 await 参数。该参数可用于指定在遍历异步迭代器时等待每个元素的 Promise 对象。

for await (variable of iterable) {
  // code block to be executed
}

指导意义

使用 for-of 循环遍历可迭代对象时，需要注意以下几点：

• 可迭代对象必须实现一个 Symbol.iterator 方法，用于返回一个迭代器对象；
• 迭代器对象必须实现一个 next 方法，用于返回一个包含 value 和 done 属性的对象；
• 对于异步迭代器，需要使用 for await of 循环，并在每个元素上等待 Promise 对象的解决。

结论

在 ECMAScript 2021 中，for-in 和 for-of 循环语句有了一些新的特性和用法。对于遍历对象和可迭代对象的场景，这些新特性可以提高代码的可读性和效率。在使用这些循环语句时，需要注意它们的特点和限制，并根据具体场景进行选择和使用。

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