ES6 中的 for...of 循环的使用及应用场景

for...of 循环是 ES6 新增的一种循环方式，它与传统的 for 循环和 forEach 循环不同，它可以对可迭代对象进行遍历，适用于数组、字符串、Set、Map、arguments 和类数组等数据结构。

基本语法

for...of 循环有很简单的语法，其基本形式如下：

for (let item of iterable) {
  // 可迭代对象中的每个元素将被迭代，并将其分配给变量 item。
  // 这里可以对 item 进行操作
}

其中，iterable 表示可迭代对象，即可以使用 for...of 的数据类型，item 则是一个变量，用于接收每次遍历时迭代器返回的值。

示例代码

下面我们通过几个示例代码来了解该循环的使用方式。

对数组元素进行遍历

我们可以使用 for...of 循环遍历一个数组中的所有元素，如下所示：

let myArray = ['apple', 'banana', 'cherry'];
for (let fruit of myArray) {
  console.log(fruit);
  // 输出：apple、banana、cherry
}

对 Map 对象进行遍历

我们可以使用 for...of 循环遍历一个 Map 对象中的所有键或所有值，如下所示：

let myMap = new Map();
myMap.set(0, 'zero');
myMap.set(1, 'one');
for (let [key, value] of myMap) {
  console.log(key + ' = ' + value);
  // 输出：0 = zero、1 = one
}

或者只遍历所有的值：

let myMap = new Map();
myMap.set(0, 'zero');
myMap.set(1, 'one');
for (let value of myMap.values()) {
  console.log(value);
  // 输出：zero、one
}

对字符串进行遍历

我们可以使用 for...of 循环遍历一个字符串中的所有字符，如下所示：

let myString = 'Hello, World!';
for (let char of myString) {
  console.log(char);
  // 输出：H、e、l、l、o、,、 、W、o、r、l、d、!
}

应用场景

for...of 循环有许多实际的应用场景。

• 遍历数组、字符串等数据，以完成各种数据操作。
• 遍历 DOM 中的子元素，并执行相应的操作。
• 遍历异步操作，以确保它们按照预定的顺序执行。
• 遍历生成器，以实现自定义的迭代行为。

总结

for...of 循环是一个强大且灵活的工具，可以方便地遍历各种数据类型，以及自定义的迭代器对象。他可以让我们更快速，更有效地完成我们的工作，对于提高代码质量和开发效率也有非常重要的作用。

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