JS迭代器及异步

黄名富

已于 2023-10-16 00:20:23 修改

阅读量278

点赞数

分类专栏： JavaScript权威指南文章标签： javascript 前端 vue.js

于 2023-10-16 00:19:28 首次发布

本文链接：https://blog.csdn.net/qq_25308331/article/details/133850022

版权

JavaScript权威指南专栏收录该内容

15 篇文章 0 订阅

订阅专栏

可迭代对象及其相关的迭代器是ES6的一个特性。ES6新增的期约让编写异步代码更容易。关键字async和await是ES2017中引入的，为了简化异步编程提供的新语法，最后，异步迭代器和for/aswait循环是ES2018中引入的，允许在看起来同步的简单循环中操作异步事件流。

1 迭代器与生成器

迭代器3个不同类型：

1）可迭代对象，指的是任何具有专用迭代器方法，且该方法返回迭代器对象的对象。

2）迭代器对象，指的是任何具有next()方法，且该方法返回迭代结果对象的对象。

3）迭代结果对象，具有属性value和done的对象。

可迭代对象的迭代器方法没有使用惯用名称，而是使用了符号Symbol.iterator作为名字。

迭代器本身也是可迭代的。（它们也有Symbol.iterator方法，且返回它们自己。）

1.1 实现可迭代对象

迭代器的return()方法，如果迭代在next()方法done属性为true的结果前停止(常见原因是通过break语句提前退出for/of循环)，那么解释器会检查迭代器对象是否有return()方法，如果有，则会调用它。这个return()方法必须返回一个迭代器结果对象，这个对象的属性会被忽略，但返回非对象值会导致报错。

1.2 生成器

语法上类似常规的JS函数，但使用关键字是function*。调用生成器并不会实际执行函数体，而是返回一个生成器对象（是一个迭代器）。调用它的next()方法会导致生成器函数的函数体从头（或从当前位置）开始执行，直至遇见一个yield语句。yield语句的值会成为调用迭代器的next()方法的返回值。

function* numIterator() {
    console.log("numIterator begin");
    yield 1;
    console.log("yield 1 finished");
    yield 2;
    console.log("yield 2 finished");
    yield 3;
    console.log("yield 3 finished");
    console.log("numIterator begin")
}

let iterator = numIterator();
iterator.next(); // numIterator begin
iterator.next(); // yield 1 finished
iterator.next(); // yield 2 finished
iterator.next(); // yield 3 finished numIterator begin
iterator.next(); // 空输出

1.3 高级生成器特性

1）生成器函数的返回值。生成器函数可以有return语句，只是其返回值在迭代的时候会被忽略。但是手工迭代时可通过显示调用next()得到：

function* numIterator() {
    yield 1;
    yield 2;
    return "hello";
}

console.log(...numIterator()); // 1 2
let iterator = numIterator();
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 'hello', done: true }
console.log(iterator.next()); // { value: undefined, done: true }

2）yield表达式的值。yield是一个表达式，可以有值的。调用生成器next()方法时，生成器函数会一直运行直到到达一个yield表达式，yield关键字后面的表达式会被求值，该值成为next()调用的返回值。此时生成器函数在求值yield表达式中途停了下来。下次调用生成器的next()方法时，传给next()的参数会变成暂停的yield表达式的值。

function* numIterator() {
    console.log("begin");
    let y1 = yield 1;
    console.log("y1:",y1);
    let y2 = yield 2;
    console.log("y2:",y2);
}

let iterator = numIterator();
iterator.next("a"); // begin
iterator.next("b"); // y1:b
iterator.next("c"); // y2:c

3）生成器的try/finally。在实现迭代器对象时可定义return()方法，但是在生成器不行，但是生成器可以通过try/ finally来实现同等效果。

function* numIterator() {
    try{
        yield 1;
        yield 2;
        yield 3;
    } finally {
        console.log("迭代")
    }
}

console.log(...numIterator());// 迭代 1 2 3
for (let it of numIterator()) {
    console.log(it);
}
// 迭代
// 1 2 3
// 1
// 2
// 3
// 迭代

2 异步JS

期约是一种为简化异步编程而设计的核心语言特性。

2.1 期约 Promise

期约是一个对象，表示异步操作的结果。这个结果可能就绪也可能未就绪。

以动词开头来命名返回期约的函数是一种惯例。

2.1.1 处理错误

期约有两种处理错误的方式：

1）then()第二个参数传递一个处理错误的函数。

2）catch()方法。

catch()，会捕获期约链上在它位置前面所有期约的错误（如果该期约的错误没被处理的话）。

fun().then(call1).then(call2).catch(errCatch); //catch会捕获fun、call1的错误。

fun().then(call1).catch(errCatch1).then(call2).catch(errCatch2); //errCatch2只会捕获call1的错误，因为fun的错误已被errCatch1捕获并处理（未抛出）。

2.1.2 并行期约

1) Promise.all()接收一个期约对象数组作为输入，返回一个期约。如果输入期约中任意一个拒绝，返回的期约也将拒绝；否则，返回期约会以每个输入期约兑现值的数组兑现。

2）Promise.allSettled()接收一个期约对象数组作为输入，永远不拒绝返回的期约，会等所有输入期约全部落定后兑现。其返回的期约解决为一个对象数组，其中每个对象都应对应一个输入期约，且都有一个status属性，值为fulfilled或rejected,如果status属性值为fulfilled，值该对象还有个value属性，包含兑现的值。如果status为rejected，那该对象还有个reason属性。

3）Promise.race()，接收一个期约对象数组作为输入，返回一个期约，这个期约会在输入数组中的期约有一个兑现或拒绝时马上兑现或拒绝。

2.1.3 创建期约

1）从头开始创建期约。

2）基于其他期约的期约。

3）基于同步值的期约。

Promise.resolve() 接收一个值作为参数，并会立即（异步）以该值兑现一个期约。Promise.reject()则返回以该参数作为理由而拒绝的期约。

Promise.resolve("hello").then(res => {
console.log("res:",res); // res: hello
})

2.2 async 和 await

ES2017 新增了async和await两个关键字。

实现细节，编译器将async函数包装成一个返回期约的函数。

黄名富

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS迭代器及异步

可迭代对象及其相关的迭代器是ES6的一个特性。ES6新增的期约让编写异步代码更容易。关键字async和await是ES2017中引入的，为了简化异步编程提供的新语法，最后，异步迭代器和for/aswait循环是ES2018中引入的，允许在看起来同步的简单循环中操作异步事件流。
复制链接

扫一扫

专栏目录