阅读 2773

JavaScript 遍历、枚举与迭代的骚操作(下篇)

前言

JavaScript 遍历、枚举与迭代的骚操作(上篇)总结了一些常用对象的遍历方法,大部分情况下是可以满足工作需求的。但下篇介绍的内容,在工作中95%的情况下是用不到的,仅限装逼。俗话说:装得逼多必翻车!若本文有翻车现场,请轻喷。

ES6 迭代器(iterator)、生成器(generator)

上一篇提到,for of循环是依靠对象的迭代器工作的,如果用for of循环遍历一个非可迭代对象(即无默认迭代器的对象),for of循环就会报错。那迭代器到底是何方神圣?

迭代器是一种特殊的对象,其有一个next方法,每一次枚举(for of每循环一次)都会调用此方法一次,且返回一个对象,此对象包含两个值:

  • value属性,表示此次调用的返回值(for of循环只返回此值);
  • done属性,Boolean值类型,标志此次调用是否已结束。

生成器,顾名思义,就是迭代器他妈;生成器是返回迭代器的特殊函数,迭代器由生成器生成。

生成器声明方式跟普通函数相似,仅在函数名前面加一个*号(*号左右有空格也是可以正确运行的,但为了代码可读性,建议左边留空格,右边不留);函数内部使用yield关键字指定每次迭代返回值。

    // 生成器
    function *iteratorMother() {
        yield 'we';
        yield 'are';
        yield 'the BlackGold team!';
    }

    // 迭代器
    let iterator = iteratorMother();

    console.log(iterator.next());  // { value: "we", done: false }
    console.log(iterator.next());  // { value: "are", done: false }
    console.log(iterator.next());  // { value: "the BlackGold team!", done: false }

    console.log(iterator.next());  // { value: undefined, done: false }
    console.log(iterator.next());  // { value: undefined, done: false }
复制代码

上面的例子展示声明了一个生成器函数iteratorMother的方式,调用此函数返回一个迭代器iterator。

yield是ES6中的关键字,它指定了iterator对象每一次调用next方法时返回的值。如第一个yield关键字后面的字符串"we"即为iterator对象第一次调用next方法返回的值,以此类推,直到所有的yield语句执行完毕。

注意:当yield语句执行完毕后,调用iterator.next()会一直返回{ value: undefined, done: true },so,别用for of循环遍历同一个迭代器两次

    function *iteratorMother() {
        yield 'we';
        yield 'are';
        yield 'the BlackGold team!';
    }

    let iterator = iteratorMother();

    for (let element of iterator) {
        console.log(element);
    }

    // we
    // are
    // the BlackGold team!

    for (let element of iterator) {
        console.log(element);
    }

    // nothing to be printed
    // 这个时候迭代器iterator已经完成他的使命,如果想要再次迭代,应该生成另一个迭代器对象以进行遍历操作
复制代码

注意:可以指定生成器的返回值,当运行到return语句时,无论后面的代码是否有yield关键字都不会再执行;且返回值只返回一次,再次调用next方法也只是返回{ value: undefined, done: true }

    function *iteratorMother() {
        yield 'we';
        yield 'are';
        yield 'the BlackGold team!';
        return 'done';

        // 不存在的,这是不可能的
        yield '0 error(s), 0 warning(s)'
    }

    // 迭代器
    let iterator = iteratorMother();

    console.log(iterator.next());  // { value: "we", done: false }
    console.log(iterator.next());  // { value: "are", done: false }
    console.log(iterator.next());  // { value: "the BlackGold team!", done: false }

    console.log(iterator.next());  // { value: "done", done: false }
    console.log(iterator.next());  // { value: undefined, done: false }
复制代码

注意third time:yield关键字仅可在生成器函数内部使用,一旦在生成器外使用(包括在生成器内部的函数例使用)就会报错,so,使用时注意别跨越函数边界

    function *iteratorMother() {
        let arr = ['we', 'are', 'the BlackGold team!'];

        // 报错了
        // 以下代码实际上是在forEach方法的参数函数里面使用yield
        arr.forEach(item => yield item);
    }
复制代码

上面的例子,在JavaScript引擎进行函数声明提升的时候就报错了,而非在实例化一个迭代器实例的时候才报错。

注意fourth time:别尝试在生成器内部获取yield指定的返回值,否则会得到一个undefined

    function *iteratorMother() {
        let a = yield 'we';
        let b = yield a + ' ' +  'are';
        yield b + ' ' + 'the BlackGold team!';
    }

    let iterator = iteratorMother();

    for (let element of iterator) {
        console.log(element);
    }

    // we
    // undefined are
    // undefined the BlackGold team!
复制代码

note:可以使用匿名函数表达式声明一个生成器,只要在function关键字后面加个可爱的*号就好,例子就不写了;但是不可以使用箭头函数声明生成器

为对象添加生成器

使用for of循环去遍历一个对象的时候,会先去寻找此对象有没有生成器,若有则使用其默认的生成器生成一个迭代器,然后遍历此迭代器;若无,报错!

上篇也提到,像Set、Map、Array等特殊的对象类型,都有多个生成器,但是自定义的对象是没有内置生成器的,不知道为啥;就跟别人有女朋友而我没有女朋友一样,不知道为啥。没关系,自己动手,丰衣足食;我们为自定义对象添加一个生成器(至于怎么解决女朋友的问题,别问我)

    let obj = {
        arr: ['we', 'are', 'the BlackGold team!'],
        *[Symbol.iterator]() {
            for (let element of this.arr) {
                yield element;
            }
        }
    }

    for (let key of obj) {
        console.log(key);
    }

    // we
    // are
    // the BlackGold team!
复制代码

好吧,我承认上面的例子有点脱了裤子放P的味道,当然不是说这个例子臭,而是有点多余;毕竟我们希望遍历的是对象的属性,那就换个方式搞一下吧

    let father = {
        *[Symbol.iterator]() {
            for (let key of Reflect.ownKeys(this)) {
                yield key;
            }
        }
    };

    let obj = Object.create(father);

    obj.a = 1;
    obj[0] = 1;
    obj[Symbol('PaperCrane')] = 1;
    Object.defineProperty(obj, 'b', {
        writable: true,
        value: 1,
        enumerable: false,
        configurable: true
    });

    for (let key of obj) {
        console.log(key);
    }

    /* 看起来什么鬼属性都能被Reflect.ownKeys方法获取到 */
    // 0
    // a
    // b
    // Symbol(PaperCrane)
复制代码

通过上面例子的展示的方式包装对象,确实可以使用for of来遍历对象的属性,但是使用起来还是有点点的麻烦,目前没有较好的解决办法。我们在创建自定义的类(构造器)的时候,可以加上Symbol.iterator生成器,那么类的实例就可以使用for of循环遍历了。

note:Reflect对象是反射对象,其提供的方法默认特性与底层提供的方法表现一致,如Reflect.ownKeys的表现就相当于Object.keys、Object.getOwnPropertyNames、Object.getOwnPropertySymbols三个操作加起来的操作。上篇有一位ID为“webgzh907247189”的朋友提到还有这种获取对象属性名的方法,这一篇就演示一下,同时也非常感谢这位朋友的宝贵意见。

迭代器传值

上面提到过,如果在迭代器内部获取yield指定的返回值,将会得到一个undefined,但代码逻辑如果依赖前面的返回值的话,就需要通过给迭代器的next方法传参达到此目的

    function *iteratorMother() {
        let a = yield 'we';
        let b = yield a + ' ' +  'are';
        yield b + ' ' + 'the BlackGold team!';
    }

    let iterator = iteratorMother(),
        first, second, third;

    // 第一次调用next方法时,传入的参数将不起任何作用
    first = iterator.next('anything,even an Error instance');
    console.log(first.value);                // we
    second = iterator.next(first.value);
    console.log(second.value);               // we are
    third = iterator.next(second.value);
    console.log(third.value);                // we are the BlackGold team!
复制代码

往next方法传的参数,将会成为上一次调用next对应的yield关键字的返回值,在生成器内部可以获得此值。所以调用next方法时,会执行对应yield关键字右侧至上一个yield关键字左侧的代码块;生成器内部变量a的声明和赋值是在第二次调用next方法的时候进行的。

note:往第一次调用的next方法传参时,将不会对迭代有任何的影响。此外,也可以往next方法传递一个Error实例,当迭代器报错时,后面的代码将不会执行。

解决回调地狱

每当面试时问到如何解决回调地狱问题时,我们的第一反应应该是使用Promise对象;如果你是大牛,可以随手甩面试官Promise的实现原理;但是万一不了解Promise原理,又想装个逼,可以试试使用迭代器解决回调地狱问题

    // 执行迭代器的函数,参数iteratorMother是一个生成器
    let iteratorRunner = iteratorMother => {
        let iterator = iteratorMother(),
            result = iterator.next(); // 开始执行迭代器
        
        let run = () => {
            if (!result.done) {
                // 假如上一次迭代的返回值是一个函数
                // 执行result.value,传入一个回调函数,当result.value执行完毕时执行下一次迭代
                if ((typeof result.value).toUpperCase() === 'FUNCTION') {
                    result.value(params => {
                        result = iterator.next(params);

                        // 继续迭代
                        run();
                    });
                } else {
                    // 上一次迭代的返回值不是一个函数,直接进入下一次迭代
                    result = iterator.next(result.value);
                    run();
                }
            }
        }

        // 循环执行迭代器,直到迭代器迭代完毕
        run();
    }

        // 异步函数包装器,为了解决向异步函数传递参数问题
    let asyncFuncWrapper = (asyncFunc, param) => resolve => asyncFunc(param, resolve),
        // 模拟的异步函数
        asyncFunc = (param, callback) => setTimeout(() => callback(param), 1000);

    iteratorRunner(function *() {
        // 按照同步的方式快乐的写代码
        let a = yield asyncFuncWrapper(asyncFunc, 1);
        a += 1;
        let b = yield asyncFuncWrapper(asyncFunc, a);
        b += 1;
        let c = yield asyncFuncWrapper(asyncFunc, b);

        let d = yield c + 1;
        console.log(d);          // 4
    });
复制代码

上面的例子中,使用setTimeout来模拟一个异步函数asyncFunc,此异步函数接受两个参数:param和回调函数callback;在生成器内部,每一个yield关键字返回的值都为一个包装了异步函数的函数,用于往异步函数传入参数;执行迭代器的函数iteratorRunner,用于循环执行迭代器,并运行迭代器返回的函数。最后,我们可以在匿名生成器里面以同步的方式处理我们的代码逻辑。

以上的方式虽然解决了回调地狱的问题,但本质上依然是使用回调的方式调用代码,只是换了代码的组织方式。生成器内部的代码组织方式,有点类似ES7的async、await语法;所不同的是,async函数可以返回一个promise对象,搬砖工作者可以继续使用此promise对象以同步方式调用异步函数。

    let asyncFuncWrapper = (asyncFunction, param) => {
            return new Promise((resolve, reject) => {
                asyncFunction(param, data => {
                    resolve(data);
                });
            });
        },
        asyncFunc = (param, callback) => setTimeout(() => callback(param), 1000);

    async function asyncFuncRunner() {
        let a = await asyncFuncWrapper(asyncFunc, 1);
        a += 1;
        let b = await asyncFuncWrapper(asyncFunc, a);
        b += 1;
        let c = await asyncFuncWrapper(asyncFunc, b);

        let d = await c + 1;
        return d;
    }

    asyncFuncRunner().then(data => console.log(data));    // 三秒后输出 4
复制代码

委托生成器

在这个讲求DRY(Don't Repeat Yourself)的时代,生成器也可以进行复用。

    function *iteratorMother() {
        yield 'we';
        yield 'are';
    }

    function *anotherIteratorMother() {
        yield 'the BlackGold team!';
        yield 'get off work now!!!!!!';
    }

    function *theLastIteratorMother() {
        yield *iteratorMother();
        yield *anotherIteratorMother();
    }

    let iterator = theLastIteratorMother();

    for (let key of iterator) {
        console.log(key);
    }

    // we
    // are
    // the BlackGold team!
    // get off work now!!!!!!
复制代码

上面的例子中,生成器theLastIteratorMother定义里面,复用了生成器iteratorMother、anotherIteratorMother两个生成器,相当于在生成器theLastIteratorMother内部声明了两个相关的迭代器,然后进行迭代。需要注意的是,复用生成器是,yield关键字后面有星号。

几个循环语句性能

上一篇有小伙伴提到对比一下遍历方法的性能,我这边简单对比一下各个循环遍历数组的性能,测试数组长度为1000万,测试代码如下:

    let arr = new Array(10 * 1000 * 1000).fill({ test: 1 });

    console.time();
    for (let i = 0, len = arr.length; i < len; i++) {}
    console.timeEnd();

    console.time();
    for (let i in arr) {}
    console.timeEnd();

    console.time();
    for (let i of arr) {}
    console.timeEnd();

    console.time();
    arr.forEach(() => {});
    console.timeEnd();
复制代码

结果如下图(单位为ms,不考虑IE):

以上的结果可能在不同的环境下略有差异,但是基本可以说明,原生的循环速度最快,forEach次之,for of循环再次之,forin循环又次之。其实,如果数据量不大,遍历的方法基本不会成为性能的瓶颈,考虑如何减少循环遍历或许更实际一点。

总结

含泪写完这一篇,我要下班了,再见各位。

@Author: PaperCrane

关注下面的标签,发现更多相似文章
评论

查看更多 >