ES6+ 迭代协议运用

发布时间：2023-03-27 13:57:05 所属栏目：教程来源：

导读：迭代协议包括两方面的内容 —— 可迭代协议和迭代器协议，下面我们就来看看这两个协议都是什么。

什么是可迭代协议？可以通过 JavaScript 对象定义或定制迭代行为，在 JavaScript 中有一些内置类型并且

迭代协议包括两方面的内容 —— 可迭代协议和迭代器协议，下面我们就来看看这两个协议都是什么。

什么是可迭代协议？可以通过 JavaScript 对象定义或定制迭代行为，在 JavaScript 中有一些内置类型并且满足内置的可迭代对象，具有迭代的行为。如 Array、Map、Set 等。还有一个比如字面量对象（Object）则没有，如果要对 Object 进行迭代的话需要使用 for...in 循环，但是 for...in 在循环时需要判断是否是自身属性。所以很多时候如果想用 for...of 进行迭代时就需要使用对象上的 Object.keys() 等方法提取对象中的 keys 后再去进行遍历操作。

在 ES6 中可迭代协议规定想要成为可迭代对象，这个对象必须实现 @@iterator 方法。这意味着对象（或者它原型链上的某个对象）必须有一个键为 @@iterator 的属性，可通过常量 Symbol.iterator 访问该属性。所以，一个对象满足可迭代协议的关键在于实现 Symbol.iterator 方法，这个方法的返回值是一个符合迭代器协议的对象，并且是一个无参数的函数。

上面说到了在实现 Symbol.iterator 方法时需要返回一个满足迭代器协议的方法。那么迭代器协议又是什么呢？

迭代器协议定义了产生一系列值的一个标准方式，迭起协议规定需要返回一个带 next() 方法的对象。 next() 可以被多次执行，每次执行都会返回一个对象，该对象包含两个属性，done 和 value:

done 是一个 boolean，在没有迭代完时返回 false，迭代完成后返回 true；
value 就是被迭代的返回值，当 done 为 true 时可以省略。
实现了以上两点才会满足一个迭代器协议。一般来说可迭代协议和迭代器协议在实际的场景中是同时存在的。下面我来看看什么是迭代器？并且怎么使用可迭代协议和迭代协议去实现一个迭代器。

这里说的迭代器是遵循上面两个协议来实现的，在满足两个协议时，我们可以显式地通过不断调用 next () 方法去进行迭代。在迭代一个迭代器后，我们称之为消耗了这个迭代器而，且每个迭代器只能执行一次。下面我们来看看怎么实现一个迭代器：

var obj = {}
obj[Symbol.iterator] = function() {
let index = ;
return {
next() {
if (index <= ) {
return {value: index++, done: false}
} else {
return {done: true}
}
}
}
}
上面的代码中根据可迭代协议给 obj 对象添加一个 Symbol.iterator 方法，再根据迭代器协议返回一个 next() 方法，在每次消耗 next() 时对 index 进行加 1 操作。当 index 大于 10 的时候结束迭代行为，之后再消耗 next() 返回值不变。

根据上面的代码，我们可以显式的手动调用 next()：

var iterator = obj[Symbol.iterator]();
var s = iterator.next();
while(!s.done) {
console.log(s.value);
s = iterator.next();
}
// 1
// 2
// ...
执行上面的代码，在浏览器的控制台中，可以看到大于的结果是 1 到 10。上面是我们手动执行消耗 next() 的方式，上面我们也说了，只要满足迭代协议就可以被 for...of 循环，那是不是真的是这样的呢？下面我们就使用 for...of 对 obj 进行循环。

for (let i of obj) {
console.log(i)
}
// 1
// 2
// ...
在控制台中执行上面的代码，可以看到和我们使用手动调用 next() 方式返回打印的结果是一样的。

本节我们主要学习了两个协议 —— 可迭代协议和迭代器协议，并且通过这两个协议实现了一个迭代器。通过这个迭代器我们知道，在满足这两个协议后就可以使用 for...of 进行循环，并且我们进行显示调用进行了验证。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!