ui设计师面试西安seo优化培训

生成器函数（Generator Function）：生成器函数是一种特殊的函数，可以通过yield关键字来暂停和恢复函数的执行，从而实现惰性计算和迭代器的功能。在例子中，我们定义了一个fibonacci生成器函数，它使用while循环来生成斐波那契数列。在每次循环中，我们使用yield关键字暂停函数的执行，并返回当前的斐波那契数。通过调用fib.next().value，我们可以逐步获取斐波那契数列的每个值。

function* fibonacci() {let a = 0;let b = 1;while (true) {yield a;[a, b] = [b, a + b];}
}const fib = fibonacci();
console.log(fib.next().value); // 0
console.log(fib.next().value); // 1
console.log(fib.next().value); // 1
console.log(fib.next().value); // 2
// ...

生成器函数有很多用途，下面是一些常见的应用场景：

惰性计算（Lazy Evaluation）：生成器函数可以实现惰性计算，即只在需要时才生成计算结果。这在处理大量数据或复杂计算时非常有用，可以节省内存和提高性能。生成器函数可以逐步生成结果，而不需要一次性计算所有结果。

function* generateNumbers() {let number = 1;while (true) {yield number;number++;}
}const numbers = generateNumbers();
console.log(numbers.next().value); // 1
console.log(numbers.next().value); // 2
console.log(numbers.next().value); // 3
// ...

这个例子中，generateNumbers生成器函数可以无限地生成自然数序列。通过调用numbers.next().value，我们可以逐步获取序列中的每个自然数。

无限序列（Infinite Sequences）：生成器函数可以用于生成无限序列，如斐波那契数列、素数序列等。由于生成器函数可以逐步生成结果，因此可以轻松处理无限序列，而不需要事先计算所有结果。

function* fibonacci() {let a = 0, b = 1;while (true) {yield a;[a, b] = [b, a + b];}
}const fib = fibonacci();
console.log(fib.next().value); // 0
console.log(fib.next().value); // 1
console.log(fib.next().value); // 1
console.log(fib.next().value); // 2
// ...

这个例子中，fibonacci生成器函数可以无限地生成斐波那契数列。通过调用fib.next().value，我们可以逐步获取斐波那契数列的每个值。

迭代器（Iterators）：生成器函数可以用于创建自定义的迭代器，使得可以通过for…of循环或…扩展运算符来遍历和操作数据。生成器函数可以定义迭代器的行为，并且可以在需要时暂停和恢复迭代的过程。

function* range(start, end) {for (let i = start; i <= end; i++) {yield i;}
}const numbers = range(1, 5);
for (let num of numbers) {console.log(num);
}
// Output:
// 1
// 2
// 3
// 4
// 5

这个例子中，range生成器函数可以生成一个指定范围内的迭代器。通过使用for…of循环，我们可以遍历并输出范围内的每个数字。

异步编程（Asynchronous Programming）：生成器函数可以与async/await语法结合使用，实现更简洁和可读性更好的异步代码。生成器函数可以通过yield关键字暂停异步操作的执行，并在异步操作完成后恢复执行。

function fetchData() {return new Promise((resolve, reject) => {setTimeout(() => {resolve('Data fetched');}, 2000);});
}function* fetchDataGenerator() {const data = yield fetchData();console.log(data);
}const generator = fetchDataGenerator();
const promise = generator.next().value;
promise.then((data) => {generator.next(data);
});

这个例子中，fetchDataGenerator生成器函数可以暂停异步操作的执行，并在异步操作完成后恢复执行。通过调用generator.next().value，我们可以获取一个Promise对象，并在Promise对象的then回调中恢复生成器函数的执行。

状态机（State Machines）：生成器函数可以用于实现状态机，即根据不同的输入和状态转换来执行不同的操作。生成器函数可以根据输入参数和当前状态的不同，选择不同的代码路径进行执行。

function* trafficLight() {let state = 'red';while (true) {if (state === 'red') {console.log('Stop');yield delay(3000);state = 'green';} else if (state === 'green') {console.log('Go');yield delay(2000);state = 'yellow';} else if (state === 'yellow') {console.log('Caution');yield delay(1000);state = 'red';}}
}function delay(ms) {return new Promise((resolve) => {setTimeout(resolve, ms);});
}const light = trafficLight();
light.next(); // Start the traffic light// Output:
// Stop
// (after 3 seconds)
// Go
// (after 2 seconds)
// Caution
// (after 1 second)
// Stop
// (after 3 seconds)
// ...

这个例子中，trafficLight生成器函数实现了一个简单的交通信号灯状态机。通过调用light.next()，我们可以逐步执行状态机的不同状态，并在每个状态改变时输出相应的信息。