Iterator

Iterator

Iterator 是一种统一的访问接口，用来访问不同的数据结构：object、array、map、set。都能得到统一的返回。可以用for of消费

模拟iterator结构

iterator必须有next方法，返回一个包含value和done的对象

const makeItor = function(array) {
    let index = 0;
    return {
        next() {
            return index < array.length ? 
            {value:array[index++],done:false} :
            {value:undefined, done:true}
        }
    }
} 
const it = makeItor([1,2,3]);
console.log(it.next()); // {value:1,done:false}
console.log(it.next()); // {value:2,done:false}
console.log(it.next()); // {value:3,done:false}
console.log(it.next()); // {value:undefined,done:true}

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

1. Array

const arr = [1,2,3]
const it = arr[Symbol.iterator]();
console.log(it.next()); // {value:1,done:false}
console.log(it.next()); // {value:2,done:false}
console.log(it.next()); // {value:3,done:false}
console.log(it.next()); // {value:undefined,done:true}

2. Map

const map = new Map([['a', 1], ['b', 2]])
const it = map[Symbol.iterator]();
console.log(it.next()); // { value: [ 'a', 1 ], done: false }
console.log(it.next()); // { value: [ 'b', 2 ], done: false }
console.log(it.next()); // { value: undefined, done: true }

3. Set

const set = new Set([1,2,3])
const it = set[Symbol.iterator]();
console.log(it.next()); // {value:1,done:false}
console.log(it.next()); // {value:2,done:false}
console.log(it.next()); // {value:3,done:false}
console.log(it.next()); // {value:undefined,done:true}

4. String

const str = 'a12';
const it = str[Symbol.iterator]();
console.log(it.next()); // {value:'a',done:false}
console.log(it.next()); // {value:'1',done:false}
console.log(it.next()); // {value:'2',done:false}
console.log(it.next()); // {value:undefined,done:true}

5. TypedArray
6. 函数的 arguments 对象
7. NodeList 对象

扩展运算符

const obj = {
    a:1,
    b:2,
    [Symbol.iterator]() {
        const that = this;
        const keys = Object.keys(this);
        console.log(keys);
        
        let index = 0;
        return {
            next() {
                if (index < keys.length) return {value: that[keys[index++]], done:false};
                return {value: undefined, done: true}
            }
        }
    }
}
console.log([...obj])

如下操作都会调用iterator的接口
解构运算、扩展运算符
yield*
for...of
Array.from()
Map(), Set(), WeakMap(), WeakSet()（比如new Map([['a',1],['b',2]])）
Promise.all()
Promise.race()

iterator和generator

和iterator配合最好的就是generator

let obj = {
    *[Symbol.iterator]() {
        yield 1;
        yield 2;
        yield 3;
    }
}
console.log([...obj]);

for of循环

1. 有着同for...in一样的简洁语法，但是没有for...in那些缺点。
2. 不同于forEach方法，它可以与break、continue和return配合使用。
3. 提供了遍历所有数据结构的统一操作接口。