【JS基础】从JavaScript中的for...of说起(上) - iterator 和 generator

const arr = [1, 2, 3];for(const i of arr) {    console.log(i); // 1，2，3}

typeof Array.prototype[Symbol.iterator] === 'function'; // truetypeof Array.prototype[Symbol.iterator]() === 'object'; // true

{    next: function(){        return {            done: boolean, // 布尔值，表示迭代是否完成，如果没有这个属性，则默认为false            value: any // 迭代器返回的任何javascript值。如果迭代已经完成，value属性可以被省略        }    }}

typeof Array.prototype[Symbol.iterator]().next === 'function' // trueArray.prototype[Symbol.iterator]().next() // {value: undefined, done: true}
const iteratorObj = [1,2,3][Symbol.iterator]();iteratorObj.next(); // { value: 1, done: false }iteratorObj.next(); // { value: 2, done: false }iteratorObj.next(); // { value: 3, done: false }iteratorObj.next(); // { value: undefined, done: true }

const myIterator = {    [Symbol.iterator]: function() {        return {            i: 0,            next: function() {                if(this.i < 2) {                    return { value: this.i++ , done: false };                } else {                    return { done: true };                }            }        }    }}for(const item of myIterator) {    console.log(item);}
// 0// 1

function* gen() { // gen一个生成器函数  yield 1;  yield 2;  yield 3;}const g = gen(); // g是一个生成器对象，是可迭代的Object.prototype.toString.call(g) === "[object Generator]" // trueg.next(); // { value: 1, done: false }g.next(); // { value: 2, done: false }g.next(); // { value: 3, done: false }g.next(); // { value: undefined, done: true }

function* gen2() {    yield 'a';    yield 'b';    yield 'c';}const g2 = gen2();for(const i of g2) {    console.log(i);}// a// b// c

function *gen1(i) {    yield i+1;    yield i+2;    yield *gen2(i+2); // 将执行权移交给gen2    yield i+3;}
function *gen2(i) {    yield i*2;}
const g = gen1(0);g.next(); // { value: 1, done: false }g.next(); // { value: 2, done: false } g.next(); // { value: 4, done: false }g.next(); // { value: 3, done: false }g.next(); // { value: undefined, done: true }

function* gen3() {    let a = yield 1;    console.log('a:', a);     let b = yield a + 1;    yield b + 10;}const g = gen3();g.next(); // { value: 1, done: false } 这个时候，代码执行到gen3里第一行等号右边g.next(100); // a: 100 , { value: 101, done: false }。代码执行第一行等号的左边，我们传入了100，这个100会作为a的值，接着执行第二行的log, 然后执行到第三行等号的右边。g.next(); // { value: NaN, done: false }。代码执行第三行等号的左半部分，由于我们没有传值，b就是undefined, undefined + 10 就是NaN了。g.next(); // { value: undefined, done: true }

function* gen4() {    let a = yield 1;    let b = yield a + 1;    yield b + 10;}const g4 = gen4();for(const i of g4) {    console.log(i);}// 1// NaN// NaN

function* fibonacci() {    let [prev, curr] = [0, 1];    while(1){        [prev, curr] = [curr, prev + curr];        yield curr;    }}for (let n of fibonacci()) {    if (n > 100) {        break    }    console.log(n);}

// 我们先定义发起ajax的函数，这里用setTimeout模拟一下function myAjax(url, cb) {    setTimeout(function(){        const data = 'ajax返回了';        cb && cb(resData);    }, 1000);}
// 一般情况下，要实现需求，一般可以这样写myAjax('https://xxxx', function(url){    myAjax(url, function(data){        console.log(data);    });});

// 先把ajax函数改造一下, 把url提出来作为一个参数，然后返回一个只接受回调函数作为参数的newAjax函数// 这种只接受回调函数作为参数的函数被称为thunk函数。function thunkAjax(url) {    return function newAjax(cb){        myAjax(url, cb);    }}
// 我们定义一个generator functionfunction* gen() {    const res1 = yield thunkAjax('http://url1.xxxx');    console.log('res1', res1);    const res2 = yield thunkAjax(res1);    console.log('res2', res2);}
// 实现需求。const g = gen();const y1 = g.next(); // y1 = { value: ƒ, done: false }. 这里的value，就是一个newAjax函数，接受一个回调函数作为参数y1.value(url => {  // 执行y1.value这个函数，并且传入了一个回调函数作为参数    const y2 = g.next(url); // 传入url作为参数，最终会赋值给上面代码中的res1。 y2 = { value: f, done: false }    y2.value(data => {        g.next(data); // 传入data作为参数，会赋值给上面代码中的res2。至此，迭代也完成了。    });});
// 最终的输出为：// 1s后输出：res1 ajax返回了// 1s后输出：res2 ajax返回了

function autoRun(generatorFun) {    const generator = generatorFun();    const run = function(data){        const res = generator.next(data);        if(res.done) {            return;        }        return res.value(run);    }    run();}

function* gen() {    const res1 = yield thunkAjax('http://url1.xxxx');    console.log('res1', res1);    const res2 = yield thunkAjax(res1);    console.log('res2', res2);    const res3 = yield thunkAjax(res2);    console.log('res3', res3);    ...}// 自动执行autoRun(gen);

const fn = async function(){    const res1 = await func1;    console.log(res1);    const res2 = await func2;    console.log(res2);    ...}fn();