ECMAScript 2021 (ES12) 中的 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 循环遍历对象的可枚举属性，因此在遍历中可能会出现以下情况：

遍历顺序不确定
遍历顺序可能会受到原型链的影响
可能会遍历到非自有属性

因此，我们在使用 for-in 循环时，需要考虑到这些情况，并针对具体情况进行处理。

以下是一个 for-in 循环的示例代码：

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

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

结果输出：

a : 1
b : 2
c : 3

for-of 循环

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

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

其中，variable 代表变量名，在循环过程中它将被赋值为当前元素；而 iterable 则代表要遍历的可迭代对象。

需要注意的是，for-of 循环只能遍历实现了迭代协议的对象，比如 Array 和 String 等。

以下是一个 for-of 循环的示例代码：

const myArray = [1, 2, 3];

for (let element of myArray) {
  console.log(element);
}

结果输出：

1
2
3

for-in 循环与 for-of 循环的应用场景

通过上面的介绍，我们已经了解了 for-in 循环和 for-of 循环的用法和语法。接下来，我们将分别介绍它们各自的应用场景。

for-in 循环

由于 for-in 循环遍历的是对象的可枚举属性，因此它适用于以下场景：

遍历对象的属性并进行处理
遍历对象的属性并获取属性名或属性值

以下是一个应用 for-in 循环遍历对象属性并输出属性名和属性值的示例代码：

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

for (let propertyName in myObject) {
  console.log(`Property: ${propertyName}, Value: ${myObject[propertyName]}`);
}

结果输出：

Property: a, Value: 1
Property: b, Value: 2
Property: c, Value: 3

for-of 循环

由于 for-of 循环遍历的是可迭代对象的元素，因此它适用于以下场景：

遍历数组并对每个元素进行处理
遍历字符串并对每个字符进行处理

以下是一个应用 for-of 循环遍历数组并输出数组元素的示例代码：

const myArray = [1, 2, 3];

for (let element of myArray) {
  console.log(element);
}

结果输出：

1
2
3

总结

通过本文，我们介绍了 ECMAScript 2021 中 for-in 循环和 for-of 循环的语法、用法以及各自的应用场景。要注意的是，在使用这两种循环时，需要根据具体情况选择合适的循环类型，并注意循环中可能出现的情况，并针对具体情况进行处理。

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