ES6 -- 迭代器和生成器

迭代器

什么是迭代？

从一个数据集合按照一定的顺序，不断取出数据的过程。

迭代和遍历的区别？

迭代强调的是依次取数据，并不保证取多少，也不保证把所有的数据取完。

遍历强调的是要把整个数据依次全部取出。

迭代器

对迭代过程的封装，在不同的语言中有不同的表现形式，通常为对象。

迭代模式

一种设计模式，用于统一迭代过程，并规范了迭代器规格：

迭代器应该具有得到下一个数据的能力。
迭代器应该具有判断是否还有后续数据的能力。

JS中的迭代器

js 规定，如果一个对象具有 next 方法，并且该方法返回一个对象，该对象格式如下：

{value: 值, done: 是否迭代完成}

则认为该对象是一个迭代器。

含义：

next()方法：用于得到下一个数据。
返回的对象：value：下一个数据的值；done：boolean，是否迭代完成。

const arr = [1, 2, 3, 4, 5];

const iterator = {
    i: 0,
    next() {
        let result = {
            value: arr[this.i],
            done: this.i >= arr.length
        }

        this.i ++;

        return result;
    }
}

console.log(iterator.next());

const arr = [1, 2, 3, 4, 5];

const iterator = {
    i: 0,
    next() {
        let result = {
            value: arr[this.i],
            done: this.i >= arr.length
        }

        this.i ++;

        return result;
    }
}

// 让迭代器不断取出下一个数据，直到没有数据为止
let data = iterator.next();
while(!data.done) {
    // 只要没有迭代完成，则取出数据
    console.log(data.value);
    // 进行下一次迭代
    data = iterator.next();
}

封装迭代创建函数 iterator create：

const arr1 = [1, 2, 3, 4, 5];
const arr2 = [11, 12, 13, 14, 15];

// 封装迭代创建函数 iterator create
function createIterator(arr) {
    let i = 0;
    return {
        next() {
            let result = {
                value: arr[i],
                done: i >= arr.length
            }

            i ++;

            return result;
        }
    }
}

const iter1 = createIterator(arr1);
const iter2 = createIterator(arr2);

依次得到斐波拉契数列前面n位的值：

// 依次得到斐波拉契数列前面n位的值
// 1  1  2  3  5  ....

// 创建一个斐波拉契数列的迭代器
function createFeiboIterator() {
    let prev1 = 1,prev2 = 1;

    let n = 1; // 当前是第几位

    return {
        next() {
            let value;

            if(n <= 2) {
                value = 1;
            }else{
                value = prev1 + prev2;
            }

            const result = {
                value,
                done: false
            }

            prev2 = prev1;
            prev1 = result.value;
            n ++;

            return result;
        }
    }
}

const iterator = createFeiboIterator();

可迭代协议与 for-of 循环

可迭代协议

迭代器概念：

迭代器（iterator）：一个具有next方法的对象，next方法返回下一个数据并且能指示是否迭代完成。
迭代器创建函数（iterator create）：一个返回迭代器的函数。

可迭代协议

ES6规定，如果一个对象具有知名符号属性`````Symbol.iterator```,并且属性值是一个迭代器创建函数，则该对象是可迭代的（iterator）。

如何知晓一个对象是否是可迭代的？

ES6规定，如果一个对象具有知名符号属性`````Symbol.iterator```,并且属性值是一个迭代器创建函数，则该对象是可迭代的（iterator）。

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

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
    const div = document.getElementsByTagName("div");
    const iterator = div[Symbol.iterator]();
    console.log(iterator.next()); // {value: div, done: false}
</script>

如何遍历一个可迭代对象？(for-of 循环)

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

while(!result.done) {
    const item = result.value; // 取出数据
    console.log(item);

    // 下一次迭代
    result = iterator.next();
}

for-of 循环

for-of 循环用于遍历可迭代对象，格式如下：

// 迭代完成后循环结束
for(const item in iterator) {
    // iterable: 可迭代对象
    // item: 每次迭代得到的数据
}

const arr = [1, 2, 3, 4, 5];

for(const item of arr) {
    console.log(item);
}

// 可迭代对象
const obj = {
    a: 1,
    b: 2,
    [Symbol.iterator]() {
        const keys = Object.keys(this);
        let i = 0;
        return {
            next:() => {
                const propName = keys[i];
                const propValue = this[propName];
                const result = {
                    value: {propName, propValue},
                    done: i >= keys.length
                }
                i ++;
                return result;
            }
        }
    }
}

for(const item of obj) {
    console.log(item); // {propName: "a", propValue: 1}  {propName: "b", propValue: 2}
}

展开运算符与可迭代对象

展开运算符可以作用于可迭代对象，这样，就可以轻松的将可迭代对象转换为数组。

// 可迭代对象
const obj = {
    a: 1,
    b: 2,
    [Symbol.iterator]() {
        const keys = Object.keys(this);
        let i = 0;
        return {
            next:() => {
                const propName = keys[i];
                const propValue = this[propName];
                const result = {
                    value: {propName, propValue},
                    done: i >= keys.length
                }
                i ++;
                return result;
            }
        }
    }
}

const arr = [...obj];
console.log(arr);

function test(a, b) {
    console.log(a, b);
}

test(...obj);

生成器 (Generator)

1. 什么是生成器？

生成器是一个通过构造函数 Generator 创建的对象，生成器既是一个迭代器，同时又是一个可迭代的对象。

如何创建生成器？

生成器的创建，必须使用生成器函数（Generator Function）。

如何创建一个生成器函数？

// 这是一个生成器函数，该函数一定返回一个生成器
function* method() {}

function *method() {}

生成器函数内部是如何执行的？

生成器函数内部是为了给生成器的每次迭代提供的数据。

每次调用生成器的next方法，将导致生成器函数运行到下一个 yield 关键字位置。

yield 是一个关键字，该关键字只能在生成器函数内部使用，表达"产生"一个迭代数据。

function* test() {
    console.log("第一次运行");
    yield 1;
    console.log("第二次运行");
    yield 2;
    console.log("第三次运行");
}

const geterator = test();
console.log(geterator.next());
console.log(geterator.next());
console.log(geterator.next());
console.log(geterator.next());