IT评测·应用市场-qidao123.com

标题: 【ES6复习条记】生成器（11） [打印本页]

作者: 没腿的鸟 时间: 2024-12-29 13:00
标题: 【ES6复习条记】生成器（11）
什么是生成器函数

生成器函数是一种特殊的函数，它可以在执行过程中暂停并保存当前状态，然后在需要时规复执行。生成器函数通过 yield 关键字来实现暂停和规复执行的功能。
生成器函数的根本用法

界说生成器函数：使用 function* 关键字来界说生成器函数。
使用 yield 关键字：在生成器函数中使用 yield 关键字来返回一个值，并暂停函数的执行。
创建迭代器对象：通过调用生成器函数来创建一个迭代器对象。
使用 next() 方法：使用迭代器对象的 next() 方法来规复生成器函数的执行，并获取下一个值。

生成器函数的实例

实例 1：根本的生成器函数

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>生成器</title>
</head>
<body>
<script>
// 生成器函数
function* gen() {
yield '一只没有耳朵';
yield '一只没有尾巴';
yield '真奇怪';
}
// 创建迭代器对象
let iterator = gen();
// 使用 next() 方法获取值
console.log(iterator.next()); // { value: '一只没有耳朵', done: false }
console.log(iterator.next()); // { value: '一只没有尾巴', done: false }
console.log(iterator.next()); // { value: '真奇怪', done: false }
console.log(iterator.next()); // { value: undefined, done: true }
</script>
</body>
</html>

复制代码

实例 2：使用生成器函数实现异步操纵

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>生成器函数实例</title>
</head>
<body>
<script>
// 模拟异步获取数据
function getUsers() {
setTimeout(() => {
let data = '用户数据';
iterator.next(data);
}, 1000);
}
function getOrders() {
setTimeout(() => {
let data = '订单数据';
iterator.next(data);
}, 1000);
}
function getGoods() {
setTimeout(() => {
let data = '商品数据';
iterator.next(data);
}, 1000);
}
// 生成器函数
function* gen() {
let users = yield getUsers();
let orders = yield getOrders();
let goods = yield getGoods();
}
// 创建迭代器对象并开始执行
let iterator = gen();
iterator.next();
</script>
</body>
</html>

复制代码

实例 3：使用生成器函数处理回调地狱

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>生成器函数实例</title>
</head>
<body>
<script>
// 异步函数
function one() {
setTimeout(() => {
console.log(111);
iterator.next();
}, 1000);
}
function two() {
setTimeout(() => {
console.log(222);
iterator.next();
}, 2000);
}
function three() {
setTimeout(() => {
console.log(333);
iterator.next();
}, 3000);
}
// 生成器函数
function* gen() {
yield one();
yield two();
yield three();
}
// 创建迭代器对象并开始执行
let iterator = gen();
iterator.next();
</script>
</body>
</html>

复制代码

生成器函数的参数传递

生成器函数可以担当参数，而且可以在 yield 表达式中使用这些参数。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>生成器函数参数</title>
</head>
<body>
<script>
function* gen(arg) {
console.log(arg);
let one = yield 111;
console.log(one);
let two = yield 222;
console.log(two);
let three = yield 333;
console.log(three);
}
// 执行生成器函数并传递参数
let iterator = gen('AAA');
console.log(iterator.next());
console.log(iterator.next('BBB'));//next中传入的BBB将作为yield 111的返回结果
console.log(iterator.next('CCC'));//next中传入的CCC将作为yield 222的返回结果
console.log(iterator.next('DDD'));//next中传入的DDD将作为yield 333的返回结果
</script>
</body>
</html>

复制代码

通过以上实例，你可以看到生成器函数在处理异步操纵和避免回调地狱方面的强大能力。盼望这些教程对你有所帮助！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/)