揭秘 JavaScript ES6学习-for/of 循环的独特魅力

2024-01-21 09:56:31

JavaScript ES6 中的 for/of 循环是一种简洁且易用的工具，用于遍历数据结构。它不仅可以轻松迭代数组和对象，还可以处理更复杂的结构，如 Set 和 Map。与传统的 for 循环不同，for/of 循环不需要手动管理循环变量，使其成为在 JavaScript 中遍历数据结构的首选。

语法格式

for (const element of iterable) {
  // 循环体
}

const element ：代表要遍历的数据结构中的每个元素。
iterable ：代表可迭代的数据结构，如数组、对象、Set、Map 等。

1. 数组遍历

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

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

2. 对象遍历

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

for (const key in person) {
  console.log(key, person[key]); 
  // 输出：name John
  //       age 30
  //       city New York
}

3. Set 遍历

const fruits = new Set(["Apple", "Banana", "Orange"]);

for (const fruit of fruits) {
  console.log(fruit); // 输出：Apple Banana Orange
}

4. Map 遍历

const fruitsAndPrices = new Map([
  ["Apple", 1.50],
  ["Banana", 2.00],
  ["Orange", 1.75]
]);

for (const [fruit, price] of fruitsAndPrices) {
  console.log(fruit, price); // 输出：Apple 1.50
  //                       Banana 2.00
  //                       Orange 1.75
}

5. 自定义迭代器

JavaScript ES6 引入了 Symbol.iterator 属性，允许开发人员创建自定义迭代器，从而使任何对象都可以通过 for/of 循环进行遍历。

class MyIterable {
  constructor() {
    this.data = ["A", "B", "C"];
  }

  [Symbol.iterator]() {
    let index = 0;

    return {
      next: () => {
        if (index < this.data.length) {
          return { value: this.data[index++], done: false };
        } else {
          return { value: undefined, done: true };
        }
      }
    };
  }
}

const myIterable = new MyIterable();

for (const element of myIterable) {
  console.log(element); // 输出：A B C
}