引言
JavaScript 一直以来都是前端开发的必备语言，但是随着时代的发展，JavaScript 也在不断地更新和完善自己，其中最具有代表性的就是 ES6。ES6 在同样解决了一些历史问题的同时，还引入了一些新的语法和特性，其中之一就是可迭代协议。
本文将对可迭代协议作详细的解析和讲解，希望能够对大家深入理解 JavaScript 有所帮助。
可迭代协议是什么？
可迭代协议是一种在 JavaScript 中用于操作数据的协议 (protocol)。它定义了一个对象所需要实现的方法，以便其他代码可以使用 for...of 循环进行迭代，也就是遍历该对象所包含的数据。
需要注意的是，“可迭代对象” (iterable object) 是指实现了可迭代协议的对象，而不是对数据可迭代。
基本语法
要实现“可迭代对象”，需要在对象上实现一个名为 [Symbol.iterator] 的方法，这个方法会返回一个叫迭代器的对象 (iterator object)。迭代器对象定义了一个 next() 方法，该方法返回一个带有 value 和 done 属性的对象，其中 value 属性用于表示当前返回的值，done 属性则用于表示整个迭代过程是否结束。
下面是一个简单的实现示例：
-- -------------------- ---- -------
----- ---------- - -
------------------ --------- -- -
----- --
----- --
----- --
-
-
--- ------ ----- -- ----------- -
-------------------
-
-- ------- - - -在上述示例中，“可迭代对象”是 myIterable，它实现了 [Symbol.iterator] 方法，该方法返回一个生成器对象，生成器对象通过 yield 关键字返回三个数字，作为 myIterable 的值。然后使用 for...of 循环迭代 myIterable 对象，执行 console.log() 函数输出遍历的结果。
使用场景示例
自定义容器对象
假设我们需要一个可以添加和删除数据元素的容器对象，该对象需要支持 for...of 迭代。我们可以通过实现可迭代协议的方式来完成这个需求。
下面是一个示例代码实现：
-- -------------------- ---- -------
----- ----------- -
------------- -
---------- - ---
-
-- ----------------- -------------
------------------- -
--- - - --
----- ----- - -----------
-- --------- ------ --
------ -
------ -
-- -- - ------------- -
------ - ------ ----------- ----- ----- -
- ---- -
------ - ----- ---- -
-
-
-
-
--------- -
----------------------
-
------------ -
----- ----- - -------------------------
-- ------ -- -- -
------------------------ ---
-
-
-
----- ----------- - --- --------------
-------------------------
-------------------------
--- ------ ---- -- ------------ -
------------------
-
-- ------- ----- -----在上述示例中，我们定义了一个 MyContainer 类。该类包含一个 items 数组用于存储数据，同时也实现了可迭代协议。我们在 MyContainer 类定义的 [Symbol.iterator] 方法中实现了一个迭代器对象，每次调用 next() 方法都会返回一个对象，该对象代表了迭代器的当前状态 (值及是否已经遍历完所有元素)。
创建自定义迭代器
假设我们要实现一个从天下所有城市中随机选取五个城市的函数，该函数返回的结果需要使用 for...of 迭代。我们可以通过实现可迭代协议的方式来快速实现该需求。
下面是一个示例代码实现：
-- -------------------- ---- -------
--------- -------------- -
----- ------ - -
---- ------ -------- --------- -------- ---- ---------
---- -- --------- ---------- -------- --------- ------
--
----- -------- - ---
----- ---------------- - -- -
----- ----------- - ------------------------ - ---------------
----- ---- - --------------------
-- -------------------------- -
--------------------
----- -----
-
-
-
--- ------ ---- -- --------------- -
-------------- ---- -----------
-
-- ------- ----- - ----在上述示例中，我们定义了一个 randomCities() 函数，它是一个生成器函数，内部实现了从 10 个城市中随机选取 5 个城市的逻辑，同时也实现了可迭代协议。当我们使用 for...of 进行迭代时，randomCities() 函数就会返回每个随机选出来的城市，并在控制台输出一条信息。
结论
本文已经详细介绍了可迭代协议的语法和场景应用，相信读者已经对其有了一定的理解。为方便大家练习，建议读者自行动手实现一下简单的示例代码。
虽然可迭代协议看起来很抽象，但是它实际上在 JavaScript 中有着广泛的应用场景，能够帮助我们更好地操作和管理各种数据对象，也为我们提供了更加高效和简单的 API 接口。希望读者能够在实践中深入掌握此技能，为自己的开发工作打下坚实的基础。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6702b0c5d91dce0dc84881da