在 ECMAScript 2015 (ES6) 中，引入了 iterable 和 iterator 的概念，这些概念为 JavaScript 中的集合和迭代提供了更好的支持。在 ECMAScript 2018 (ES9) 中，iterable 和 iterator 进一步得到了改进和扩展。本文将介绍 iterable 和 iterator 的基础知识，以及在实际开发中的应用和指导意义。
iterable 和 iterator 的概念
在 JavaScript 中，一个集合 (collection) 是指包含一组值或对象的数据结构。例如，数组、字符串、Map、Set 等都是集合。一个可迭代对象 (iterable) 是指具有 Symbol.iterator 属性的对象，该属性返回一个迭代器 (iterator) 对象。迭代器对象是一个具有 next() 方法的对象，该方法返回一个包含 value 和 done 属性的对象，value 表示当前迭代的值，done 表示是否迭代完成。
下面是一个简单的示例，展示了如何使用 iterable 和 iterator：
-- -------------------- ---- ------- ----- --- - --- -- --- --- ------ ---- -- ---- - ------------------ - ----- ---- - ----------------------- ------------------------- -- - ------ -- ----- ----- - ------------------------- -- - ------ -- ----- ----- - ------------------------- -- - ------ -- ----- ----- - ------------------------- -- - ------ ---------- ----- ---- -
在上面的示例中，我们先使用 for...of 循环遍历了一个数组，然后使用 arrSymbol.iterator 方法获取了一个迭代器对象，然后使用迭代器对象的 next() 方法逐个迭代数组中的值。
iterable 和 iterator 的改进和扩展
在 ECMAScript 2018 (ES9) 中，iterable 和 iterator 得到了改进和扩展，主要包括以下几个方面：
1. 对象可以直接使用 for...of 循环
在 ES9 中，对象 (Object) 也可以直接使用 for...of 循环进行迭代。这是因为 Object 对象现在也是一个可迭代对象，它的默认迭代器返回对象的键值对 (key-value pairs)。
下面是一个简单的示例，展示了如何使用 for...of 循环迭代对象：
const obj = { a: 1, b: 2, c: 3 };
for (const [key, value] of Object.entries(obj)) {
console.log(key, value);
}在上面的示例中，我们使用 Object.entries() 方法将对象转换为键值对数组，然后使用 for...of 循环迭代数组中的键值对。
2. 支持异步迭代器
在 ES9 中，迭代器对象可以是异步的，即迭代器对象的 next() 方法可以返回 Promise 对象。这使得我们可以在迭代集合的过程中使用异步操作，例如从远程服务器获取数据等。
下面是一个简单的示例，展示了如何使用异步迭代器：
-- -------------------- ---- -------
----- --------- ---------------- -
----- --
----- --
----- --
-
------ ---------- -
--- ----- ------ ---- -- ----------------- -
------------------
-
-----在上面的示例中，我们定义了一个异步迭代器 asyncGenerator()，它使用 yield 关键字返回一系列值。然后我们使用 for await...of 循环迭代异步迭代器，注意，这里使用的是 for await...of，而不是 for...of。
3. 支持生成器函数作为默认迭代器
在 ES9 中，我们可以使用生成器函数 (Generator Function) 作为默认迭代器。这意味着我们可以使用 yield 关键字定义集合中的值，而不必手动实现迭代器对象。
下面是一个简单的示例，展示了如何使用生成器函数作为默认迭代器：
-- -------------------- ---- -------
----- --- - -
- ------------------- -
----- --
----- --
----- --
-
--
--- ------ ---- -- ---- -
------------------
-在上面的示例中，我们使用生成器函数定义了一个默认迭代器，它使用 yield 关键字返回一系列值。然后我们使用 for...of 循环迭代对象，注意，这里没有使用 objSymbol.iterator 方法获取迭代器对象。
iterable 和 iterator 在实际开发中的应用和指导意义
在实际开发中，iterable 和 iterator 的应用非常广泛。例如：
- 遍历数组、字符串、Map、Set 等集合对象。
- 实现异步迭代器，从远程服务器获取数据等。
- 实现自定义迭代器，例如生成器函数、对象的 Symbol.iterator 属性等。
- 遍历对象的键值对，使用 Object.entries() 方法将对象转换为数组。
总之，iterable 和 iterator 是 JavaScript 中非常重要的概念，掌握它们的基础知识和应用技巧对于前端开发人员来说非常必要。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d94be8a941bf71340e12af
