ES6--generator概念及写法(含yield与next执行机制分析)_generator遇见return也会停止执行(2)

2401对符合规定

于 2024-05-15 21:12:22 发布

阅读量970

点赞数 9

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84619986/article/details/138923745

版权

程序员专栏收录该内容

94 篇文章 0 订阅

订阅专栏

文末

技术是没有终点的，也是学不完的，最重要的是活着、不秃。

零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。

最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

自学最怕的就是缺乏自驱力，一定要自律，杜绝“三天打鱼两天晒网”，到最后白忙活一场。

高度自律的同时，要保持耐心，不抛弃不放弃，切勿自怨自艾，每天给自己一点点鼓励，学习的劲头就会很足，不容易犯困。

技术学到手后，找工作的时候一定要好好准备一份简历，不要无头苍蝇一样去海投简历，容易“竹篮打水一场空”。好好的准备一下简历，毕竟是找工作的敲门砖。

拿到面试邀请后，在面试的过程中一定要大大方方，尽力把自己学到的知识舒适地表达出来，不要因为是自学就不够自信，给面试官一个好的印象，面试成功的几率就会大很多，加油吧，骚年！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

// Gerneator函数hello内部有两个`yield`表达式`hello`和`world`，且函数有三个状态：hello,world和return语句
function\* hello() {
    yield 'hello';
    yield 'world';
    return 'ending';
}

var hw = hello();//调用hello()后返回的是一个指向内部状态的指针对象。

三、yield与next

Generator函数是分段执行的，yield表达式是暂停执行的标记，next方法可以恢复执行，并返回一个有着value和done两个属性的对象。

1. yield

yield表达式是暂停执行的标记

使用`yield`表达式的注意点：

yield表达式只能用在 Generator 函数里面，用在其他地方都会报错。
yield表达式如果用在另一个表达式之中，必须放在圆括号里面。

function\* demo() {
  console.log('Hello' + (yield)); // OK
}

用作函数参数或放在赋值表达式的右边，可以不加括号。

function\* demo() {
  foo(yield 'a', yield 'b'); // OK
  let input = yield; // OK
}

2. next

next方法可以恢复执行，并返回一个有着value和done两个属性的对象。

value属性表示当前的内部状态的值，是yield关键字后面表达式的值
done属性是一个布尔值，表示是否遍历结束。

next还可以用于传递参数

遍历器对象的`next`方法运行逻辑如下

遇到yield表达式，暂停执行，并将紧跟在yield后面的表达式的值，作为返回的对象的value属性值。
如果没有再遇到新的yield表达式，就一直运行到函数结束，直到return语句为止，并将return语句后面的表达式的值，作为返回的对象的value属性值。
如果该函数没有return语句，则返回的对象的value属性值为undefined。

运行逻辑实例讲解

在这里插入图片描述

当第一次调用add()，也就是运行到第38行时，add函数不会开始执行；
当第一次调用next()，也就是运行到第39行时，generator函数中蓝色部分开始执行，遇到yield "2"表达式暂停。【注意：第一个next()仅起到让函数开始执行的作用，不能用于传递数据】

运行结果如下：
在这里插入图片描述

当第二次调用next()，也就是运行到第40行时，generator函数中黄色部分开始执行，遇到yield "3"表达式暂停。此时传入的20会替换掉上一个yield表达式，也就是替换let x = yield "2";—>let x = 20;。

运行结果如下：
在这里插入图片描述

当第三次调用next()，也就是运行到第41行时，generator函数中绿色部分开始执行，遇到return x+y;表达式暂停。此时传入的30会替换掉上一个yield表达式，也就是替换let y = yield "3";—>let y = 30;。

运行结果如下：
在这里插入图片描述

`yield`与`return`的异同

相同：都能返回紧跟在语句后面的表达式的值。

不同：

遇到yield函数暂停执行，下次从该位置继续。return语句并不具备暂停功能。
一个函数只能执行一次return语句，可以执行多个yield表达式。

四、Generator函数状态的遍历

1. 遍历一个Generator函数状态

通过for…of遍历

注意：一旦next方法返回对象的done属性为true，for…of循环就会中止，且不包含该返回对象，所以return语句返回的值不会在for…of循环中遍历。

function\* foo() {
    yield 1;
    yield 2;
    yield 3;
    yield 4;
    yield 5;
    return 6;
}

for (let v of foo()) {
    console.log(v);
}

执行结果如下：
在这里插入图片描述

通过…解构遍历

// foo函数同上
let fn = foo();
console.log(...fn);

执行结果如下：
在这里插入图片描述

2. 在一个Generator函数内遍历另一个Generator函数的状态

手动遍历
for…of遍历
…解构遍历
yield*遍历

function\* foo() {
    yield "a";
    yield "b";
    return "result";
}

function\* bar() {
    yield "start";
    // 1.手动遍历
    yield "a";
    yield "b";
    // 2.利用for of手动遍历 foo()
    for (let i of foo()) {
        console.log(i);
    }
    // 3.利用解构赋值...遍历
    let fn = foo();
    console.log(...fn);
    // 4.利用yield\*遍历
    // yield\*表明它返回的是一个遍历器对象，结果是该遍历器对象的内部值
    yield\* foo();
    yield "ending";
}

for (let v of bar()) {
    console.log(v);
}

执行结果如下：
在这里插入图片描述

yield*介绍

用来在一个 Generator 函数里面执行另一个 Generator 函数

与不加*的对比

// foo同上
function\* bar() {
    yield\* foo();
    // 不加\*的对比
    yield foo();
}
for (let v of bar()) {
    console.log(v);
}

执行结果如下：

在这里插入图片描述

yield*可接收所调用Genertor函数return的值

// foo同上
// 如果yield\* 接收的 Generator 函数带有return语句，return返回的数据可以被接收。
function\* bar() {
    let val = yield\* foo();
    console.log(val
}
for (let v of bar()) {
    console.log(v);
}

执行结果如下：
在这里插入图片描述

任何有Iterator接口的数据结构都可以被yield*遍历，如字符串会遍历每个字符。数组会遍历每个元素。

function\* fn() {
    yield "hello";
    yield\* "hello";
}
let read = fn();
console.log(read.next().value);// hello
console.log(read.next().value);// h
console.log(read.next().value);// e
console.log(read.next().value);// l
console.log(read.next().value); // l
console.log(read.next().value);
// o