生成器和迭代器

---

生成器

跟ES6中的生成器是一样的

//1. 生成器 用法一样
function* gen(){
    yield Promise.resolve('rarrot')//同步异步
    yield '666'
    yield '123'
    yield '000'
}

const man=gen()

console.log(man.next())//{ value: Promise { 'rarrot' }, done: false }
console.log(man.next())//{ value: '666', done: false }
console.log(man.next())//{ value: '123', done: false }
console.log(man.next())//{ value: '000', done: false }
console.log(man.next())//{ value: undefined, done: true }

迭代器

迭代器是一个可以由任意对象实现的接口，支持连续获取对象产出的每一个值。任何实现 Iterable 接口的对象都有一个 Symbol.iterator 属性，这个属性引用默认迭代器。默认迭代器就像一个迭代器工厂，也就是一个函数，调用之后会产生一个实现 Iterator 接口的对象，使用这个对象可以调用next()方法。

// 2. 迭代器
// 3. 用set map做例子
let set: Set<number> = new Set([1, 1, 2, 2, 3, 3])//自动去重
//  Set(3) { 1, 2, 3 }
console.log(set)

let map: Map<any, any> = new Map()
let Arr = [1, 2, 3]
map.set(Arr, 'rarrot')
map.set('1', '你是谁')
console.log(map.get(Arr))//把Arr数组当key，'rarrot'为value，所有输出rarrot

function args() {
    console.log(arguments)//伪数组
}

// let list =document.querySelectorAll('div')//伪数组，如下图

// 自定义for of
const each = (value: any) => {
let It: any = value[Symbol.iterator]()
    let next: any = { done: false }
    while (!next.done) {
        next = It.next()
        console.log("🚀 ~ file: index.ts:39 ~ each ~ next:", next)
        if (!next.done) {
            console.log(next.value)
        }
    }
}

/*
 `  🚀 ~ file: index.ts:39 ~ each ~ next: { value: 1, done: false }
 `  1
 `  🚀 ~ file: index.ts:39 ~ each ~ next: { value: 2, done: false }
 `  2
 `  🚀 ~ file: index.ts:39 ~ each ~ next: { value: 3, done: false }
 `  3
 `  🚀 ~ file: index.ts:39 ~ each ~ next: { value: undefined, done: true }
*/
each(set)


/*
 `  🚀 ~ file: index.ts:39 ~ each ~ next: { value: [ [ 1, 2, 3 ], 'rarrot' ], done: false }
 `  [ [ 1, 2, 3 ], 'rarrot' ]
 `  🚀 ~ file: index.ts:39 ~ each ~ next: { value: [ '1', '你是谁' ], done: false }
 `  [ '1', '你是谁' ]
 `  🚀 ~ file: index.ts:39 ~ each ~ next: { value: undefined, done: true }
*/
each(map)

迭代器的语法糖(for of)

// 对象不能用for of
for(let value of map){
    // [ [ 1, 2, 3 ], 'rarrot' ]
    // [ '1', '你是谁' ]
    console.log(value)
}

解构

底层原理也是去调用iterator

let [a,b,c]=[4,5,6]

console.log(a,b,c)//4 5 6

let a1=[4,5,6]
let copy=[...a1]
console.log(...a1) // 4,5,6
console.log(copy)  // [ 4, 5, 6 ]

对象中实现迭代器

其实很简单，就是current的增加，直到current=true才停止，返回value为underfined和done为true。未停止就返回current的值，以及done为false。

let obj = {
    max: 3,
    current: 0,
    [Symbol.iterator]() {
        return {
            max: this.max,
            current: this.current,
            next() {
                if (this.current == this.max) {
                    return {
                        value: undefined,
                        done: true
                    }
                } else {
                    return {
                        value: this.current++,
                        done: false
                    }
                }
            }
        }
    }
}

for (let value of obj) {
    // 0
    // 1
    // 2
    console.log(value)
}

// 遍历这个对象并将 next() 的返回值收集到数组中
let x = [...obj]
// [ 0, 1, 2 ]
console.log(x)

// 对象解构，执行对象自己的可枚举属性的浅拷贝，它实际上不遍历obj对象。
let o = { ...obj }
/*  
{
   max: 3,
   current: 0,
   [Symbol(Symbol.iterator)]: [Function: [Symbol.iterator]]
}
*/
console.log(o)