ES6 中的 iterator 接口详解-JavaScript中文网-JavaScript教程资源分享门户

什么是 iterator 接口

在 ES6 中，我们可以使用 for...of 循环来遍历数组、字符串等数据结构。这里所用到的就是 iterator 接口。简单来说，iterator 接口为不同的数据结构提供了统一的访问机制，使得我们可以像访问数组和字符串一样访问其他数据结构。

iterator 接口的实现原理

ES6 对于 iterator 接口的实现原理非常简单。我们只需要让对象实现一个 next 方法，该方法返回一个对象，该对象具有两个属性：value 和 done。value 表示当前遍历到的值，done 表示是否已经遍历完成。

下面是一个简单的 iterator 接口的实现示例：

// javascriptcn.com 代码示例
let obj = {
  data: [1, 2, 3],
  index: 0,
  next() {
    if (this.index >= this.data.length) {
      return {
        value: undefined,
        done: true
      };
    } else {
      return {
        value: this.data[this.index++],
        done: false
      };
    }
  }
};

在上述示例中，我们定义了一个 obj 对象，该对象包括一个数组 data 和一个 next 方法。当我们需要使用 for...of 循环来遍历 obj 对象时，for...of 循环会自动调用 obj 对象的 next 方法，返回一个对象，直到 done 属性为 true。

更简单的 iterator 接口实现方式

上述示例中，我们需要手动编写 next 方法，它的编写过程相对繁琐。ES6 提供了更加简单的方式来实现 iterator 接口，即使用 Generator。

我们可以通过 Generator 函数来生成一个 iterator，其具有默认的 next 方法。下面是一个简单的示例：

let obj = {
  data: [1, 2, 3],
  *[Symbol.iterator]() {
    for (let i = 0; i < this.data.length; i++) {
      yield this.data[i];
    }
  }
};

在上述示例中，我们通过 *[Symbol.iterator]() 定义了一个 Generator 函数，它可以生成一个可遍历的对象。在该示例中，我们只需要使用 yield 返回每个元素的值即可。这个 Generator 函数可以非常方便地应用于各种数据结构中。

iterator 接口应用示例

下面我们来看一个具体的示例。在该示例中，我们将用 iterator 接口来实现自定义的集合类。我们首先定义一个 Set 类，该类可以实现添加、删除和查询元素等基本功能。

// javascriptcn.com 代码示例
class Set {
  constructor() {
    this.items = {};
  }

  has(value) {
    return this.items.hasOwnProperty(value);
  }

  add(value) {
    if (!this.has(value)) {
      this.items[value] = value;
      return true;
    }
    return false;
  }

  delete(value) {
    if (this.has(value)) {
      delete this.items[value];
      return true;
    }
    return false;
  }

  clear() {
    this.items = {};
  }

  size() {
    return Object.keys(this.items).length;
  }

  values() {
    let values = [];
    for (let i in this.items) {
      if (this.items.hasOwnProperty(i)) {
        values.push(this.items[i]);
      }
    }
    return values;
  }
}

在上述示例中，我们使用了 ES6 的 class 关键字来定义一个 Set 类。该类具有一些基本的方法，如 add、delete 和 has 等方法，用于实现添加、删除和查询元素等基本功能。

接着，我们需要实现 iterator 接口，使得我们能够方便地遍历集合中的元素。我们只需要在 Set 类中加入如下几行代码即可：

// javascriptcn.com 代码示例
class Set {
  constructor() {
    this.items = {};
  }

  // 上面的方法省略
  // ...

  *[Symbol.iterator]() {
    for (let value of this.values()) {
      yield value;
    }
  }
}

在上述代码中，我们使用 Generator 函数生成了一个可遍历的对象。该对象可以直接被 for...of 循环遍历。我们可以使用以下代码来使用 Set 类：

let set = new Set();
set.add(1);
set.add(2);
set.add(3);

for (let value of set) {
  console.log(value);
}

在上述代码中，我们来定义了一个 Set 对象，并向其中添加了一些元素。接着，我们使用 for...of 循环来遍历该集合对象，输出所有的值。

总结

以上就是 ES6 中的 iterator 接口的详细介绍。使用 iterator 接口可以方便地遍历各种数据结构，为我们的编程带来了很大的便利。当我们需要将自定义的数据结构变成可遍历的对象时，只需要实现它的 iterator 接口即可。在实际开发中，我们可以使用 Generator 函数来快速实现 iterator 接口。

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