在 ES6 中使用 Generators 和 Iterators-JavaScript中文网-JavaScript教程资源分享门户

在 ES6 中使用 Generators 和 Iterators

在 JavaScript 中，ES6 的引入让生成器和迭代器成为了一种非常流行的编程模式，它们的组合在前端开发中具有广泛的应用。在本文中，我们将深入探讨 ES6 中如何使用 Generators 和 Iterators 进行编程和优化，帮助你更好地理解这个概念。

I. Generators

生成器 (Generator) 是一种返回迭代器 (Iterator) 对象并且可以在执行时暂停的函数。Generator 对比普通函数的一个非常显著的特点是，当函数执行时可以使用 yield 关键字来暂停执行并返回值，同时返回的值还可以用来控制 Generator 的后续执行流程。

使用 Generator 函数创建迭代器

在 ES6 中，可以通过 Generator 函数来创建迭代器，它可以轻松地生成自定义的可迭代对象，一般的实现方法如下：

function* generateSequence() {
  yield 1
  yield 2
  return 3
}

let generator = generateSequence()

在定义生成器函数中使用 * 表示这是一个 Generator 函数，返回值使用 yield 关键字，当执行到 return 语句时，Generator 函数终止。调用生成器函数后可以通过 next() 来获取迭代器并逐次获取值。

生成器的应用

实际上，使用生成器可以进行很多有趣的编程操作。例如：

-- -------------------- ---- -------
--------- ----------- -
  --- - - -
  --- - - -

  ----- ------ -
    ----- -
    ---- -- - --- - - --
  -
-

--- --- - -----------

--- ---- - - -- - - --- ---- -
  -----------------------------
-

fibonacci 是一个非常有名的数列，通过 Generator 函数可以较为简便地完成其计算过程。执行过程中可以通过迭代器获取数列的值，且没有任何限制。这种用法在前端开发中也经常出现，例如异步事件的处理，其内部是由一系列的回调函数组成的，就可以通过 Generator 函数表达。

II. Iterators

迭代器 (Iterator) 是一种实现迭代器协议的对象，它的实现方法为，定义一个有 next() 方法的对象，每次返回一个包含 value 和 done 属性的对象。value 为当前迭代器指向的值，done 即表示迭代是否结束。常见的迭代器对象包括数组，Set，Map 等。

for-of 语句

在 ES6 中，通过 for-of 语句可以轻松地遍历迭代器对象：

let array = [1, 2, 3]

for (let number of array) {
  console.log(number)
}

上述代码中的 let number of array 即使用了 for-of 语句遍历了数组，每次遍历都会将当前迭代指针所指向的值赋给 number，直到遍历到最后一个元素。

调用 Iterator

另外，还可以使用迭代器的 next() 方法显式地控制迭代器对象的行为。例如：

let array = [1, 2, 3]
let it = array[Symbol.iterator]()

console.log(it.next().value)
console.log(it.next().value)
console.log(it.next().value)

上面的代码通过调用数组的 Symbol.iterator 方法获取了一个数组迭代器，通过 next() 方法获取迭代器下一条记录的内容并打印，直到所有的记录遍历结束。

总结

在 ES6 中，Generator 和 Iterator 被广泛应用于前端开发中，可以用来简化异步编程、提高代码效率等。虽然这一部分的 API 可能较为复杂，但你只需学会其中几个基础的用法即可。

参考代码如下：

-- -------------------- ---- -------
-- ---------
--------- ------------------ -
  ----- -
  ----- -
  ------ -
-

--- --------- - ------------------

-----------------------------------
-----------------------------------
-----------------------------------

--------- ----------- -
  --- - - -
  --- - - -

  ----- ------ -
    ----- -
    ---- -- - --- - - --
  -
-

--- --- - -----------

--- ---- - - -- - - --- ---- -
  -----------------------------
-

--- ----- - --- -- --

--- ---- ------ -- ------ -
  -------------------
-

--- -- - ------------------------

----------------------------
----------------------------
----------------------------

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