ECMAScript 2018（ES9）中的 Iterator 详解与使用-JavaScript中文网-JavaScript教程资源分享门户

前言

ECMAScript 2018 (ES9) 是 JavaScript 的第九个版本，于2018年6月发布。它包含了一些新的特性和语言功能，其中一个重要的特性是 Iterator。

Iterator 是 JavaScript 中的一个迭代器接口，可以用于遍历集合中的元素。在 ES6 中，Iterator 已经被引入，但是在 ES9 中，Iterator 又有了新的变化和扩展，使得它更加强大和灵活。

本文将对 ES9 中的 Iterator 进行详细的介绍和讲解，包括 Iterator 的基本概念、使用方法、示例代码等内容。

Iterator 基本概念

在 JavaScript 中，Iterator 是一个接口，它定义了一个访问集合中元素的标准方式。一个对象如果实现了 Iterator 接口，就可以使用 for...of 循环进行遍历操作。

Iterator 接口包含一个 next() 方法，它返回一个对象，这个对象包含两个属性：value 和 done。其中，value 表示当前元素的值，done 表示遍历是否结束。

下面是一个简单的 Iterator 实现示例：

// www.javascriptcn.com code example
const myIterable = {}
myIterable[Symbol.iterator] = function* () {
  yield 1
  yield 2
  yield 3
}

for (let value of myIterable) {
  console.log(value)
}
// output: 1 2 3

在上面的代码中，我们定义了一个对象 myIterable，并且在这个对象上定义了一个 Symbol.iterator 方法，这个方法返回了一个 Generator 函数，该函数使用 yield 关键字返回了三个值。因此，通过 for...of 循环遍历 myIterable 对象时，会依次输出 1、2、3。

Iterator 的使用方法

在 ES9 中，Iterator 又有了新的变化和扩展，可以更加方便地使用 Iterator 进行遍历操作。

1. 字符串的 Iterator

在 ES9 中，字符串也实现了 Iterator 接口，因此可以使用 for...of 循环遍历字符串中的每个字符。

const str = 'hello'
for (let char of str) {
  console.log(char)
}
// output: h e l l o

2. 对象的 Iterator

在 ES9 中，对象也可以实现 Iterator 接口，因此可以使用 for...of 循环遍历对象中的每个属性。

// www.javascriptcn.com code example
const obj = { a: 1, b: 2, c: 3 }
obj[Symbol.iterator] = function* () {
  const keys = Object.keys(obj)
  for (let key of keys) {
    yield [key, obj[key]]
  }
}

for (let [key, value] of obj) {
  console.log(key, value)
}
// output: a 1 b 2 c 3

在上面的代码中，我们给 obj 对象定义了一个 Symbol.iterator 方法，该方法返回了一个 Generator 函数，该函数使用 yield 关键字返回了每个属性的键值对。因此，通过 for...of 循环遍历 obj 对象时，会依次输出 a、1、b、2、c、3。

3. 异步 Iterator

在 ES9 中，Iterator 还可以是异步的，也就是说，可以使用 async/await 进行异步操作。

// www.javascriptcn.com code example
const asyncIterable = {
  [Symbol.asyncIterator]: async function* () {
    yield new Promise(resolve => setTimeout(resolve, 1000, 1))
    yield new Promise(resolve => setTimeout(resolve, 2000, 2))
    yield new Promise(resolve => setTimeout(resolve, 3000, 3))
  }
}

async function f() {
  for await (let num of asyncIterable) {
    console.log(num)
  }
}

f()
// output: 1 2 3

在上面的代码中，我们定义了一个异步的 Iterator，该 Iterator 返回了三个 Promise 对象。通过 for await...of 循环遍历异步 Iterator，可以依次输出每个 Promise 对象的结果。

Iterator 的指导意义

Iterator 是 JavaScript 中一个非常重要的特性，它可以方便地遍历集合中的元素，而不需要使用传统的 for 循环或者 forEach 方法。在 ES9 中，Iterator 又得到了扩展和改进，使得它更加强大和灵活。

学习 Iterator 不仅可以帮助我们更好地理解 JavaScript 中的集合类型，还可以帮助我们更加高效地进行遍历操作。因此，我们应该深入学习 Iterator，掌握其使用方法和技巧，为我们的编程工作带来更多的便利。

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

ECMAScript 2018（ES9）中的 Iterator 详解与使用

前言