迭代吧，前端！解析迭代器模式

顺序访问有序结构（数组，nodelist） 不知道数据的长度和内容结构，高内聚，低耦合

普遍的for循环不是迭代器，迭代器模式解决的就是for循环

//简易迭代器
const list=document.querySelectorAll("div");
list.forEach((v)=>{console.log(v)})

class DataContainer{
    data=[10,20,30,40];
    getIterator(){
        return new DataIterator(this)
    }
}
class DataIterator{
    private data:number[];
    private index=0;
    constructor(container:DataContainer){
        this.data=container.data
    }
    next():number | null {
        if(this.hasNext()){
            return this.data[this.index++]
        }
        return null;
    }
    hasNext():boolean{
        if(this.index>=this.data.length) return false
        return true;
    }
}
const container= new DataContainer();
const iterator=container.getItetator();
white(iterator.hasNext()){
    console.log(iterator.next())
}

Symbol.iterator和迭代器

所有有序对象，都内置Symbol.iterator方法，返回一个迭代器对象

const arr=[1,2,3,4]; const iterator=arr[Symbol.iterator]();

迭代器的作用

• 用于for...of
• 数组解构，扩展操作符...
• 用于创建Map,Set
• Promise.all,promise.race
• 用于yield *

Generator生成器

functoin* genNums(){
    yield 10;
    yield 20;
    yield 30;
}
const numsIterator = genNums();//返回的迭代器
console.log(numsIterator.next());
for(let n of numsIterator){
    console.log(n)
}
//------------------------------------------------
functoin* genNums2(){
    yield* [10,20,31];//有序结构
}
// Generator + yield遍历dom树
function* test(list){
    for(const ele of list){
        yield ele;
        const children= Array.for(ele.children);
        if(children.length){
            yield* test(children)
        }
    }
}