JS-Iterator-generator

只爱碎花裙
84 阅读5分钟

Iterator（迭代器）

定义

  • 是确保用户可在容器对象（container，如链表或数组）上遍访的对象，使用该接口无需关心对象的内部实现细节

    • 其行为像数据库中的光标，迭代器最早出现在1974年设计的CLU编程语言中

  • 定义：迭代器是帮助我们对某个数据结构进行遍历的对象

  • JS中，迭代器也是一个具体的对象，这个对象需要符合迭代器协议（iterator protocol）

    • 迭代器协议定义了产生一系列值的标准方式
    • 在js中这个标准就是一个特定的next方法

next方法

  • 一个无参（或者一个参数）的函数，返回一个应当拥有以下两个属性的对象
    • done（boolean）
      • 如果迭代器可以产生序列中的下一个值，则为false。（即没有指定done这个属性）
      • 如果迭代器已将序列迭代完毕，则为true。这种情况下，value是可选的，如果它依然存在，即为迭代结束之后的默认返回值
    • value
      • 迭代器返回的任何value值
      • done为true时可省略

可迭代对象

  • 当一个对象实现了iterator protocol协议时，他就是一个可迭代对象
  • 这个对象的要求是必须实现**@@iterator方法，在代码中我们使用Symbol.iterator访问该属性**

原生迭代器对象

  • 很多原生对象已经实现了可迭代协议，会生成一个迭代器对象的：
    • String，Array，Map，Set，arguments对象，NodeList集合

可迭代对象的应用

  • JS中语法：for...of，展开语法（spread syntax），yield，解构赋值（Destructuring）
  • 创建一些对象时，new Map([iterable])，Promise.race(iterable)，Array.from(iterable)

自定义类的迭代

  • 在面向对象开发中，可以通过class定义一个自己的类，如果希望自己的类创建出来的对象默认是可迭代的，那么在设计类的时候我们就可以添加上**@@iterator**方法

迭代器的中断

  • 迭代器在某些情况下会在没有完全迭代的情况下中断
    • 遍历的过程中被break，continue，return，throw中断了操作
    • 解构的时候，没有解构所有的值
  • 通过添加return方法监听中断

案例

  • 创建classroom的类

    • 有自己的位置，名称，当前教室的学生
    • 可以push新学生
    • 创建的教室对象是可迭代对象
  • class Classroom {
    constructor(address, name, students) {
        this.address = address
        this.name = name
        this.students = students
    }

    entry(newStudent) {
        this.students.push(newStudent)
    }

    [Symbol.iterator]() {
        let index = 0
        return {
            next: () => {
                if (index < this.students.length) {
                    return {done: false, value: this.students[index++]}
                } else {
                    return {done: true, value: undefined}
                }
            },
            return: () => {
                console.log('迭代器提前中止了');
                return {done: true, value: undefined}
            }
        }
    }

}
const classroom = new Classroom('303', '计算机教室', ['zhu', 'lin', 'fen'])
classroom.entry('lei')

for(const stu of classroom) {
    console.log(stu);
    if (stu === 'lin') {
        break
    }
}

generator（生成器）（ES6）

  • 生成器是ES6新增的一种函数控制，使用的方案，可以让我们更灵活的控制函数的执行和暂停

  • 一般函数是因为返回值或者发生异常才会终止

  • 生成器函数和普通函数的区别

    • 生成器函数需要在function后面加一个 *
    • 生成器函数可以通过yield关键字来控制函数的执行流程
    • 生成器函数的返回值是一个Generator（生成器）

  • 生成器函数是一种特殊的迭代器

函数执行

  • 通过yield可以将函数代码块分割
  • 通过next方法去依次调用被分割的代码块

传递参数-next函数

  • 在调用next的时候，可以传递参数，这个参数会作为上一个yield语句的返回值
  • 也就是说我们为本次的函数代码块执行提供了一个值

提前结束-return函数

  • return传值后这个生成器函数就会结束，之后调用next就不会继续生成值了

抛出异常-throw函数

  • 抛出异常后我们就可以在生成器函数中捕获异常

生成器替代迭代器

  • // 1.生成器替代迭代器
function* createArrayIterator(arr) {
    for(const item of arr) {
        yield item
    }
}

const names =[ 'a', 'b', 'c']
const nameIterator = createArrayIterator(names)
console.log(nameIterator.next());
console.log(nameIterator.next());
console.log(nameIterator.next());
console.log(nameIterator.next());

  • 还可以使用yield*来生产一个可迭代对象

    • 相当于是一种yield的语法糖，只不过会依次迭代这个可迭代对象，每次迭代其中的一个值

异步代码的处理方案

// 通过promise
function requestData(url) {
    // 异步请求代码
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(url);
        }, 1000);
    });
}

// 1.第一种方案：回调地狱
requestData("zzy")
    .then((res) => {
    requestData(res + "aa").then((res) =>
                                 requestData(res + "bb").then((res) => console.log(res))
                                );
})
    .catch((err) => console.log(err));

// 2.第二种方案：Promise种then的返回值
requestData("lll")
    .then((res) => {
    return requestData(res + "aa");
})
    .then((res) => {
    return requestData(res + "bb");
})
    .then((res) => console.log(res));

// 3.第三种方式，Promise+Generator实现
function* getData() {
    const res1 = yield requestData("lei");
    const res2 = yield requestData(res1 + "aa");
    const res3 = yield requestData(res2 + "bb");
    const res4 = yield requestData(res3 + "cc");
    console.log(res4);
}

// 3.1手动执行生成器函数
const generator = getData();
generator.next().value.then((res) => {
    generator.next(res).value.then((res) => {
        generator.next(res).value.then((res) => {
            generator.next(res);
        });
    });
});

// 3.2自己封装自动化执行函数
function execGenerator(generatorFn) {
    const generator = generatorFn();
    function exec(res) {
        const result = generator.next(res);
        if (result.done) {
            return result.value;
        }
        result.value.then((res) => {
            exec(res);
        });
    }
    exec();
}
execGenerator(getData);

// 3.3通过npm引入co包，自动执行函数
// TJ（作者）/co/n(node版本切换工具，只支持mac，windows是nvm)/commander(vue cli用到)/express/koa(egg基于koa)
const co = require('co')
co(getData)

// 4.第四种方案 async await（ES8）
async function getData1() {
    const res1 = await requestData("lei");
    const res2 = await requestData(res1 + "A");
    const res3 = await requestData(res2 + "B");
    const res4 = await requestData(res3 + "C");
    console.log(res4);
}

getData1()

补充

  • TJ 前端大佬
    • co自动执行函数
    • n (node版本切换工具，只支持mac，windows是nvm)
    • commander (vue cli用到)
    • express
    • koa (egg基于koa)
avatar
文章
阅读
粉丝