1 个人理解
- 生成器（将一个函数拆分成好多小函数）重要标志 function *show(){} *位置不讲究
- 讲解 generator函数 中间可以停(出租车),踹一脚走一步 普通函数,一路到底(飞机)
1.1 代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>generator函数</title>
<script>
function* show() {
alert('a');
yield;
alert('b');
};
let genObj = show();
alert(genObj);
genObj.next();
genObj.next();
</script>
</head>
<body>
</body>
</html>
2.yield拆分
2.1 个人理解
伪代码:
function *炒菜(菜市场买回来的){
洗菜->洗好的菜;
let 干净的菜=yield 洗好的菜;
干净的菜->切成丝;
let 切好的菜= yield 切成丝;
切好的菜->炒好的菜;
return 炒好的菜;
}
2.2 可以传参，可使用字符模板化的形式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>yield</title>
<script>
function* show() {
alert('a');
let a = yield;
alert('b');
alert(a);
};
let genObj = show();
alert(genObj);
genObj.next(12);
// 第一个没有办法存储起来12
genObj.next(5);
// 使用老办法获取第一个参数
function* show2(num1, num2) {
alert(`${num1},${num2}`);
alert('a');
yield;
alert('b');
return;
};
let genObj2 = show2(99, 88);
alert(genObj2);
</script>
</head>
<body>
</body>
</html>
2.3 可以返回
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>yield</title>
<script>
function* show() {
alert('a');
let a = yield;
alert('b');
alert(a);
};
let genObj = show();
alert(genObj);
console.log(genObj.next()); //{value:12,done:false}
// 第一个没有办法存储起来12
console.log(genObj.next()); //{value:undefined,done:true}
// 使用老办法获取第一个参数
</script>
</head>
<body>
</body>
</html>