揭秘 Iterator 接口：轻松驾驭 JavaScript 数据遍历

2024-02-22 21:50:56

Iterator 接口：遍历的万能钥匙

JavaScript 中提供了多种遍历数组的方式，但当我们想要遍历其他数据结构时，该如何操作呢？Iterator 接口应运而生，它为我们提供了遍历各种数据结构的统一机制。

Iterator 接口定义了一个名为 next() 的方法，该方法返回一个包含两个属性的对象：value（当前元素的值）和 done（一个布尔值，表示是否已遍历到最后一个元素）。通过反复调用 next() 方法，我们可以逐个遍历数据结构中的所有元素。

遍历数据结构的多种姿势

Iterator 接口的强大之处在于，它不仅适用于数组，还可用于其他数据结构，如链表、集合、字符串等。这意味着，我们可以使用统一的语法遍历不同类型的数据结构，简化了编程过程。

以下是一些使用 Iterator 接口遍历不同数据结构的示例：

数组：

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

for (const num of arr) {
  console.log(num);
}

链表：

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

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

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

    if (this.head === null) {
      this.head = newNode;
    } else {
      let current = this.head;
      while (current.next !== null) {
        current = current.next;
      }

      current.next = newNode;
    }
  }

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

    while (current !== null) {
      yield current.data;
      current = current.next;
    }
  }
}

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

for (const num of list) {
  console.log(num);
}

字符串：

const str = 'Hello, world!';

for (const char of str) {
  console.log(char);
}

自制 Iterator 接口

除了使用内置的 Iterator 接口外，我们还可以为自定义的数据结构实现自己的 Iterator 接口。这为我们提供了更大的灵活性，可以根据实际需求设计出更适合的数据遍历方式。

要实现自己的 Iterator 接口，需要遵循以下步骤：

为数据结构定义一个 Symbol.iterator 属性，该属性是一个函数，返回一个 Iterator 对象。
在 Iterator 对象中定义一个 next() 方法，该方法返回一个包含 value 和 done 属性的对象。
在 next() 方法中，使用 yield 来生成 value 和 done 属性的值。

以下是一个自定义 Iterator 接口的示例：

class MyArray {
  constructor(...args) {
    this.data = args;
  }

  *[Symbol.iterator]() {
    for (const item of this.data) {
      yield item;
    }
  }
}

const myArray = new MyArray(1, 2, 3, 4, 5);

for (const num of myArray) {
  console.log(num);
}