1.什么是Generator函数?
Generator 函数是 ES6 提供的一种异步编程解决方案
Generator 函数内部可以封装多个状态, 因此又可以理解为是一个状态机
2.如何定义Generator函数
只需要在普通函数的function后面加上*即可
3.Generator函数和普通函数区别
1调用Generator函数后, 无论函数有没有返回值, 都会返回一个迭代器对象,
2调用Generator函数后, 函数中封装的代码不会立即被执行
4.真正让Generator具有价值的是yield关键字
1在Generator函数内部使用yield关键字定义状态
2并且yield关键字可以让 Generator内部的逻辑能够切割成多个部分。
3通过调用迭代器对象的next方法执行一个部分代码,执行哪个部分就会返回哪个部分定义的状态
5.Generator 函数特点
1.Generator 函数也是一个函数
2.Generator 函数会返回一个迭代器对象
3.迭代器对象有next方法
4.next方法每次执行都会返回一个对象{value: xxx, done: false}
5.必须有一个叫做[Symbol.iterator]的属性
6.[Symbol.iterator]的属性会返回一个函数
7.[Symbol.iterator]返回的函数执行之后会返回一个可迭代对象
8.[Symbol.iterator]函数返回的对象中又一个名称叫做next的方法
9.next方法每次执行都会返回一个对象{value: xxx, done: false}
6.在调用next方法的时候可以传递一个参数, 这个参数会传递给上一个yield
function* gen() {
console.log("123");
let res = yield "aaa";
console.log(res);
console.log("567");
yield 1 + 1;
console.log("789");
yield true;
}
let it = gen();
console.log(it);
console.log(it.next());
console.log(it.next("张三"));
console.log(it.next());
console.log(it.next());
// 注意点: yield关键字只能在Generator函数中使用, 不能在普通函数中使用
// function say() {
// yield "abc";
// }
// say();6.dome
应用场景, 让函数返回多个值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Generator函数应用场景</title>
</head>
<body>
<script>
/*
应用场景, 让函数返回多个值
* */
/*
function calculate(a, b) {
let sum = a + b;
let sub = a - b;
return [sum, sub];
}
*/
function* calculate(a, b) {
yield a + b;
yield a - b;
}
let it = calculate(10, 5);
console.log(it.next().value);
console.log(it.next().value);
</script>
</body>
</html>应用场景: 利用 Generator 函数，可以在任意对象上快速部署 Iterator 接口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>50-Generator函数应用场景</title>
</head>
<body>
<script>
/*
1. 应用场景: 利用 Generator 函数，可以在任意对象上快速部署 Iterator 接口
*/
/*
Generator 函数特点
1.Generator 函数也是一个函数
2.Generator 函数会返回一个迭代器对象
3.迭代器对象有next方法
4.next方法每次执行都会返回一个对象{value: xxx, done: false}
*/
/*
function* gen() {
yield "aaa";
yield "bbb";
yield "ccc";
}
let it = gen();
// console.log(it);
console.log(it.next());
*/
/*
1.必须有一个叫做[Symbol.iterator]的属性
2.[Symbol.iterator]的属性会返回一个函数
3.[Symbol.iterator]返回的函数执行之后会返回一个可迭代对象
4.[Symbol.iterator]函数返回的对象中又一个名称叫做next的方法
5.next方法每次执行都会返回一个对象{value: xxx, done: false}
*/
/*
let obj = {
name: "张三",
age: 34,
gender: "man",
[Symbol.iterator](){
let keys = Object.keys(this);
// console.log(keys);
let index = 0;
let that = this;
return {
next(){
if(index < keys.length){
return {value: that[keys[index++]], done: false};
}else{
return {value: undefined, done: true};
}
}
}
}
}
// console.log(obj[Symbol.iterator]);
// let it = obj[Symbol.iterator]();
// console.log(it);
// console.log(it.next());
// console.log(it.next());
// console.log(it.next());
// console.log(it.next());
for(let value of obj){
console.log(value);
}
*/
let obj = {
name: "张三",
age: 34,
gender: "man"
}
// let obj = {
// name: "张三",
// age: 34,
// gender: "man",
// [Symbol.iterator](){
// let keys = Object.keys(this);
// // console.log(keys);
// let index = 0;
// let that = this;
// return {
// next(){
// if(index < keys.length){
// return {value: that[keys[index++]], done: false};
// }else{
// return {value: undefined, done: true};
// }
// }
// }
// }
// }
// function* gen(){
// let keys = Object.keys(obj);
// for(let i = 0; i < keys.length; i++){
// yield obj[keys[i]];
// }
// }
obj[Symbol.iterator] = function* () {
let keys = Object.keys(obj);
for(let i = 0; i < keys.length; i++){
yield obj[keys[i]];
}
}
// // console.log(obj[Symbol.iterator]);
// let it = obj[Symbol.iterator]();
// // console.log(it);
// console.log(it.next());
// console.log(it.next());
// console.log(it.next());
// console.log(it.next());
for (const item of obj) {
console.log(item);
}
</script>
</body>
</html>应用场景: 用同步的流程来表示异步的操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>51-Generator函数应用场景</title>
</head>
<body>
<script>
/*
应用场景: 用同步的流程来表示异步的操作
*/
/*
function request(fn) {
setTimeout(function () {
fn("拿到的数据");
}, 1000);
}
request(function (data) {
console.log("1", data);
request(function (data) {
console.log("2", data);
request(function (data) {
console.log("3", data);
});
});
});
*/
function request() {
return new Promise(function (resolve, reject) {
setTimeout(function () {
resolve("拿到的数据");
}, 1000);
});
}
/*
request().then(function (data) {
console.log(data, 1);
return request();
}).then(function (data) {
console.log(data, 2);
return request();
}).then(function (data) {
console.log(data, 3);
});
*/
function* gen() {
yield request();
yield request();
yield request();
}
let it = gen();
// console.log(it.next().value);
it.next().value.then(function (data) {
console.log(data, 1);
return it.next().value;
}).then(function (data) {
console.log(data, 2);
return it.next().value;
}).then(function (data) {
console.log(data, 3);
});
</script>
</body>
</html>
