Javascript的迭代器和迭代接口详解
1，什么是迭代器
2，自定义迭代接口
3，原生语言的迭代
总结
1，什么是迭代器每一个可迭代对象都对应着一个可迭代接口[Symbol.iterator]；
[Symbol.iterator]接口并不是迭代器，他是一个迭代器工厂函数，调用该迭代接口即可返回一个待执行状态的迭代器；
不同的原生全局对象都对应着不同的迭代器；
const arr = new Array()
const map = new Map()
const set = new Set()
console.log(arr[Symbol.iterator]()) //Array Iterator {}
console.log(map[Symbol.iterator]()) //MapIterator {}
console.log(set[Symbol.iterator]()) //SetIterator {}
将迭代器状态从待执行状态变为真正的执行：调用迭代器对象的 .next()方法；而其的返回值，就是next()方法的返回值对象:
const iterator = new Array(1, 2, 3, 4)[Symbol.iterator]()
console.log(iterator.next()) //{value: 1, done: false}
console.log(iterator.next()) //{value: 2, done: false}
console.log(iterator.next()) //{value: 3, done: false}
console.log(iterator.next()) //{value: 4, done: false}
console.log(iterator.next()) //{value: undefined, done: true}
可以看到，当我执行第四次的时候，也就是对应着arr[3]，但此时返回的对象中，done属性依旧是false，而执行第五次时，value变成了undefined，done变成了true，为什么会出现这种情况呢
在解答这个问题之前，我们需要在重新认识一下迭代器：
本质上来说，迭代器对象就是实现了next()方法的对象
const myIterator = {
next() {
if (length) {
return { value: 1, done: false }
} else {
return { value: undefined, done: true }
}
},
}
如上述，就是一个最简单的迭代器。调用next()，会执行迭代，返回done为false的迭代器生成对象，直到符合某种条件，返回done为true的迭代器生成对象。
你可以简单的把Array迭代器原理看作如下所示：
const myIterator = {
next() {
if (length) {
return { value: 1, done: false }
} else {
return { value: undefined, done: true }
}
},
}
输出的结果也是一样的：
const iterator = new MyArray(1, 2, 3, 4)[Symbol.iterator]()
console.log(iterator.next()) //{value: 1, done: false}
console.log(iterator.next()) //{value: 2, done: false}
console.log(iterator.next()) //{value: 3, done: false}
console.log(iterator.next()) //{value: 4, done: false}
console.log(iterator.next()) //{value: undefined, done: true}
那么，之前的问题就迎刃而解了。
或许你已经发现了，我自定义了一个类MyArray，并且我手动改写了他的迭代器接口。那么是否只要为某个不可迭代的对象，实现了[Symbol.iterator]，就可以把它变成一个可迭代对象呢？
答案是肯定的。只要你想，你可以为任何对象加上可迭代协议，并把它变成可迭代对象。因为迭代对象的定义便是：实现迭代接口的对象。
2，自定义迭代接口按照以上思路，我们就可以自己手动实现一个可迭代的Object对象了：
const prototype = {
[Symbol.iterator]() {
const entries = Object.entries(this)
const { length } = entries
let index = 0
return {
next() {
return index < length
? {
value: {
key: entries[index][0],
value: entries[index++][1],
},
done: false,
}
: { value: undefined, done: true }
},
}
},
}
const obj = Object.create(prototype)
obj.name = 'zhang san'
obj.age = 28
const objIterator = obj[Symbol.iterator]()
console.log(objIterator.next()) //{value: {key:'name',value:'zhang san'}, done: false}
console.log(objIterator.next()) //{value: {key:'age',value:28}, done: false}
console.log(objIterator.next()) //{value: undefined, done: true}
首先，我们声明了一个改写了迭代接口的对象，接着用Obejct.create()创建了以此对象为原型的obj。
该对象实例本身是没有迭代接口的，但是会沿着原型链去寻找prototype对象是否存在迭代接口。只要能在其原型链上找到迭代接口，那么就代表其是一个可迭代对象。如：
const objSon = Object.create(obj, {
name: {
enumerable: true,
writable: true,
value: 'zhang xiao san',
},
age: {
enumerable: true,
writable: false,
value: 2,
},
secret: {
enumerable: false,
writable: true,
value: 'secret',
},
})
const sonIterator = objSon[Symbol.iterator]()
console.log(sonIterator.next()) //{value: {key:'name',value:'zhang xiao san'}, done: false}
console.log(sonIterator.next()) //{value: {key:'age',value:2}, done: false}
console.log(sonIterator.next()) //{value: undefined, done: true}
objSon依旧是一个可迭代对象。
那么现在，我们就通过改造迭代接口[Symbol.iterator]的方式，把一个原本不是迭代类型的对象，变成了可迭代对象。
我们可以用该迭代接口来遍历任何enumerable的属性。但如果你想将enumrable为false的secret属性也遍历出来，那么只需要将迭代接口中的entries改造一下即可，一切皆由你想：
// const entries = Object.entries(this)
const ownKeys = Object.getOwnPropertyNames(this)
const entries = ownKeys.reduce(
(result, key) => [...result, [key, this[key]]],
[]
)
3，原生语言的迭代
以for - of 为例
for (const item of obj) {
console.log(item)
}
//{key:'name',value:'zhang san'}
//{key:'age',value:28}
for (const item of objSon) {
console.log(item)
}
//{key:'name',value:'zhang xiao san'}
//{key:'age',value:2}
可以看到，无论是obj，还是objSon，都可以正常用for of 循环，并且返回值为迭代器生成对象value属性的值。
你可以这么理解for - of 的机制：后台调用提供的可迭代对象的工厂函数[Symbol.iterator]，从而创建一个迭代器，然后自动调用迭代器next执行。done为false，则将迭代器生成对象value赋值给item；done为true，则跳出循环：
const objIterator = obj[Symbol.iterator]()
{
const { value: item,done } = objIterator.next()
if(done) break
console.log(item) //{key:'name',value:'zhang san'}
}
{
const { value: item,done } = objIterator.next()
if(done) break
console.log(item) //{key:'age',value:28}
}
{
const { value: item,done } = objIterator.next()
if(done) break
console.log(item)
}
不仅仅是for - of，原生语言的迭代机制，都与此类似。数组解构，拓展操作符，Array.from，new Set()，new Map()，Promise.all()，Promise.race()，yield * 操作符等，都属于原生迭代语言。
了解了for - of 循环的机制之后，大家可以观察一下下面的例子：
const arr = [1, 2, 3, 4, 5, 6, 7, 8]
for (const item of arr) {
console.log(item)
if (item > 3) break
}
for (const item of arr) {
console.log(item)
}
//输出结果：1，2，3，4 | 1，2，3，4，5，6，7，8
const arrIterator = arr[Symbol.iterator]()
for (const item of arrIterator) {
console.log(item)
if (item > 3) break
}
for (const item of arrIterator) {
console.log(item)
}
//输出结果：1，2，3，4 | 5，6，7，8
循环arr的输出结果与循环arr迭代器arrIterator的结果明显的不同。为什么会出现这种现象呢？
在迭代器对象中，还有一个很重要的知识点：迭代器对象是一个一次性的，不可逆的对象。
因此，在迭代中某个地方终止，那么只能接着上一次终止的位置继续执行，而不会从头开始。
那么为什么对于arr本身使用for - of，却没有接着执行而是从头开始呢？可以回到介绍for - of 循环机制的那部分，其中有一句话：后台调用提供的可迭代对象的工厂函数[Symbol.iterator]，从而创建一个迭代器。
也就是说，每调用一次for - of循环，都会创建一个新的迭代器对象，而该迭代器对象，在循环结束时就会被当作垃圾对象被回收。
虽然arr连续调用了两次for - of循环，但是在循环体的内部，并不是同一个迭代器对象。因此，即使上一个迭代器在item>3这个条件处中止了，但是下一次循环的迭代器对象，是一个全新的，还没有执行过的迭代器对象。
那么对于调用arr[Symbol.iterator]接口生成的的迭代器对象arrIterator，为什么会出现继续上次执行的情况呢，换句话说，为什么arrIterator的两次for循环，没有产生两次迭代器对象？
其实，迭代器对象本身，也实现了迭代器接口，也就是说。arr有一个迭代器接口[Symbol.iterator]，而迭代器对象arrIterator也有一个迭代器接口[Symbol.iterator]，并且，调用该迭代器对象，返回其本身：
console.log(arrIterator[Symbol.iterator]() === arrIterator) // true
所以虽然每次执行for-of循环都会同样的调用迭代器接口，但是该迭代器接口返回的对象就是arr的迭代器对象本身，而迭代器对象是一个一次性，不可逆的对象。因此，为什么会出现上述现象，也就显而易见了。
细心的朋友可能会想到一个问题：我们在之前手动实现的可迭代对象，其迭代器对象是否支持了迭代接口？是的，他不能。
for (const item of objIterator) {
console.log(item)
}
//Uncaught TypeError: objIterator is not iterable
但其实我们要优化也很简单，只要将该迭代器对象也实现一个迭代接口，并且该迭代接口工厂函数返回其本身，即可。
const prototype = {
[Symbol.iterator]() {
// const entries = Object.entries(this)
const ownKeys = Object.getOwnPropertyNames(this)
const entries = ownKeys.reduce(
(result, key) => [...result, [key, this[key]]],
[]
)
const { length } = entries
let index = 0
return {
next() {
return index < length
? {
value: {
key: entries[index][0],
value: entries[index++][1],
},
done: false,
}
: { value: undefined, done: true }
},
[Symbol.iterator]() {
return this
},
}
},
}
const objIterator = obj[Symbol.iterator]()
for (const item of objIterator) {
console.log(item)
if (item.key === 'name') break
}
for (const item of objIterator) {
console.log(item)
}
// {key: 'name', value: 'zhang san'}
// {key: 'age', value: 28}
现在，你可以用文中所介绍的方法，将任何对象变成一个可迭代对象。
总结本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注软件开发网的更多内容!
