最后
总的来说,面试官要是考察思路就会从你实际做过的项目入手,考察你实际编码能力,就会让你在电脑敲代码,看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时,有一个清晰的逻辑思路,清楚知道自己在和面试官说项目说技术时的话就好了
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
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
五、Generator数据传递
1. 由内向外传递
通过yield表达式定义状态值,通过next方法返回对象的value获取
function\* foo() {
yield 1;
yield 2;
return 3;
}
let fn = foo();
console.log(fn.next());
console.log(fn.next());
console.log(fn.next());
执行结果如下:
2.由外向内传递
- 通过next传值,通过yield表达式接收
- 调用函数时传值,通过形参接收
执行结果如下:
六、return与throw
1. next()、throw()、return()的异同
- 相同
next()、throw()、return()这三个方法本质上都是让 Generator 函数恢复执行,并且使用不同的语句替换yield表达式。
- 不同
next()是将yield表达式替换成一个值。
throw()是将yield表达式替换成一个throw语句。
return()是将yield表达式替换成一个return语句。
最后
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
最后写上我自己一直喜欢的一句名言:
世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它
ac0)**
最后写上我自己一直喜欢的一句名言:
世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它