(精华)2020年7月3日 JavaScript高级篇 ES6(Iterator迭代器)

为什么要有iterator

// Map Set 等数据结构 需要一个统一的接口去处理 iterator就是提供了这么一个机制

作用

// 数据部署了iterator接口 就可以用for ... of 循环遍历

for…of 循环的遍历过程的本质

// for...of 循环遍历的过程
// 1 创建一个指针对象 指向数据的初始位置 iterator就是一个指针对象
// 2 第一次调用指针对象的next() 可以将指针指向第一个成员
// .....
// 直到结束
// !!!! 每一次调用指针对象的时候每次调用next()方法 会返回 value 指的是值 done是布尔值 用来标识遍历是否完成
const arr = [1,2]
function makeIterator(array){
    let nextIndex = 0;
    return {
        next:function(){
            return nextIndex < array.length ? {
                value:array[nextIndex++],
                done:false
            } :{
                value:undefined,
                done:true
            }
        }
    }
}
let res = makeIterator(arr)
console.log(res.next());
console.log(res.next());
console.log(res.next());
console.log(res.next());

Iterator接口部署在数据结构的Symbol.iterator属性

// 重中之重
let arr1 = [1,2,3,4,5]
// let iter = arr1[Symbol.iterator]()
// console.log(iter.next());
// console.log(iter.next());
// console.log(iter.next());
// console.log(iter.next());
// console.log(iter.next());
// console.log(iter.next());
// console.log(iter.next());
// console.log(iter.next());
// console.log(iter.next());

原生具备Iterator接口的数据结构

具有iterator接口 Array Map Set String 

对象不具备Iterator接口 可以手动部署迭代器接口 让其可以用for…of 循环遍历

// 想让对象也可以通过for...of 循环遍历
let obj = {
    data:[1,2,3,4],
    [Symbol.iterator](){
        let index = 0
        let that = this
        return {
            next(){
                if(index<that.data.length){
                    return {
                        value:that.data[index++],
                        done:false
                    }
                }else{
                    return {
                        value:undefined,
                        done:true
                    }
                }
            }
        }
    }
}

for (let i of obj ){
    console.log(i);
}