简要描述：
- 一种接口机制，为各种不同的数据结构提供统一访问的机制。
- 主要供for...of消费。
- 一句话 ：不支持遍历的数据结构“可遍历”。
原生具备 Iterator 接口的数据结如下，可通过for...of进行遍历：
Array、Map、Set、String、TypedArray（用于二进制数据的）、函数的arguments对象、NodeList对象
1. 模拟一个iterator执行
function makeIterator(arr) {
let nextIndex = 0;
return {
next() {
return nextIndex < arr.length ?
{ value: arr[nextIndex++], done: false } : { value: undefined, done: true }
}
}
}
let it = makeIterator(['a', 'b', 'c'])
console.log(it.next()); //{value: 'a', done: false}
console.log(it.next()); //{value: 'b', done: false}
console.log(it.next()); //{value: 'c', done: false}
console.log(it.next()); //{value: undefined, done: true}
以上是不是让你想起了Generator函数，调用方式也是通过next一次一次调，打印的数据结构也一样，Generator函数内部封装了迭代器。
2. 拿数组举例
let arr = [1, 2, 3]
for (let key of arr) {
console.log(key)
}
console.log(Symbol.iterator) //Symbol(Symbol.iterator)
let ite = arr[Symbol.iterator]();
console.log(ite) //Array Iterator {}
console.log(ite.next()) //{value: 1, done: false}
console.log(ite.next()) //{value: 2, done: false}
console.log(ite.next()) //{value: 3, done: false}
console.log(ite.next()) //{value: undefined, done: true}
控制台中打印arr，展开[[prototype]]，发现有个Symbol(Symbol.iterator)属性，这个就是它的迭代器，就是数组能用for...of遍历的原因
image.png
想要数据能够用for...of进行遍历，就要给数据提供Iterator迭代器。
3. 为数据自定义迭代器
迭代器的条件
- 可迭代协议：当前对象是否有 Symbol.iterator 属性
- 迭代器协议：当前迭代器必须符合条件
return {
next() {
return { value: ... , done: ... }
}
}
接下来，让我们为下面的courses自制迭代器 ，让courses能够用for...of遍历到每一个数组内的元素
let courses = {
allCources: {
frontend: ['ES', '小程序', 'Vue', 'React'],
backend: ['Java', 'Python'],
webapp: ['Android', 'IOS']
}
}
courses[Symbol.iterator] = function () { //定义Symbol(Symbol.iterator)属性，值为iterator函数
let allCources = this.allCources;
let keys = Reflect.ownKeys(allCources) //取到数组的属性名，包括Symbol
let values = [];//所有元素放到这里
return {
next() {
if (!values.length) {
if (keys.length) { //没有
// 往values里添加数据，确保每次的next调用，都能return出values中的值
values = allCources[keys[0]]; //keys每次从0开始取，取过的就shift删掉，避免取重复的
keys.shift();
}
}
return {
done: !values.length, //values要是空了，代表都取过了，返回true
value: values.shift() //return出values中的值
}
}
}
}
for (let key of courses) {
console.log(key)
}
// 打印结果：ES 小程序 Vue React Java Python Android IOS
4. 异步迭代器
- Symbol.asyncIterator
- for await (...of...)
function getPromise(time) { //异步函数
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({ value: time, done: false }) //next返回值
}, time)
})
}
let arr = [getPromise(1000), getPromise(2000), getPromise(3000)];//要被遍历的数组，数组元素都是异步函数
arr[Symbol.asyncIterator] = function () { //异步迭代器
let nextIndex = 0;
return {
next() { //返回值为 在同步的返回值写法上包裹一层promise
return nextIndex < arr.length ? arr[nextIndex++] : Promise.resolve({ value: undefined, done: true })
}
}
}
async function test(){
//for await(... of ...)等到当前元素完成再遍历下一个元素，并且遍历到的是异步完成的结果值
for await (let item of arr){ //遍历到异步的结果
console.log(item) //1000 2000 3000
}
}
test(); //调用异步函数
