for...of 语法糖剖析：剖析 JavaScript 循环的奥秘

2023-10-24 20:50:46

for...of 循环：跨越数据结构的通用遍历工具

在处理各种数据结构时，编写迭代代码往往是不可避免的。传统的for循环虽然简单易用，但当面对数组、对象甚至自定义数据结构时，就显得有些力不从心。此时，for...of循环闪亮登场，成为了解决这一难题的利器。

for...of循环基于ES6引入的Iterator接口，它是遍历数据结构的通用方法。只要一个数据部署了Symbol.iterator方法，就具备了Iterator接口，就可以使用for...of循环遍历它的成员。这种统一的遍历方式大大简化了编写循环代码的复杂度，让我们可以轻松应对各种数据结构。

揭开 Iterator 接口的神秘面纱

Iterator接口的设计遵循了面向对象编程的理念，它将数据结构的遍历过程抽象成一个个独立的对象——Iterator对象。Iterator对象提供了一个名为next的方法，每次调用next方法都会返回数据结构中的一个成员。当所有成员都遍历完成后，next方法将返回一个特殊的done属性，该属性为true表示遍历已完成。

窥探 for...of 循环的幕后运作

for...of循环的工作原理正是利用了Iterator接口。当我们使用for...of循环遍历一个数据结构时，循环内部会自动创建一个Iterator对象。然后，循环会不断调用Iterator对象的next方法，获取数据结构中的成员。如果next方法返回的done属性为true，循环就会结束；否则，循环会继续进行，直到遍历完所有成员。

for...of 循环的应用场景

for...of循环的强大之处在于它不仅能遍历数组，还能遍历各种对象。这使得它在实际开发中具有广泛的应用场景。

例如，我们可以使用for...of循环遍历数组中的元素，执行特定操作：

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

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

我们还可以使用for...of循环遍历对象中的键值对：

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

for (const [key, value] of Object.entries(person)) {
  console.log(`${key}: ${value}`); // 输出：name: John Doe, age: 30, city: New York
}

更进一步，我们甚至可以使用for...of循环遍历自定义数据结构。只要该数据结构部署了Symbol.iterator方法，就可以轻松实现遍历：

class Node {
  constructor(data) {
    this.data = data;
    this.next = null;
  }
}

class LinkedList {
  constructor() {
    this.head = null;
    this.tail = null;
  }

  add(data) {
    const node = new Node(data);

    if (this.head === null) {
      this.head = node;
      this.tail = node;
    } else {
      this.tail.next = node;
      this.tail = node;
    }
  }

  [Symbol.iterator]() {
    let current = this.head;

    return {
      next() {
        if (current === null) {
          return { done: true };
        }

        const value = current.data;
        current = current.next;

        return { done: false, value };
      }
    };
  }
}

const linkedList = new LinkedList();
linkedList.add(1);
linkedList.add(2);
linkedList.add(3);
linkedList.add(4);
linkedList.add(5);

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