生成器（Generators）

作用

• 生成器函数是ES6提供的一种异步编程解决方案，语法与传统函数完全不同

特点

• 声明和调用

function* gen() {
    console.log('1');
    yield '1-1';
    console.log('2');
    yield '2-2';
    console.log('3');
    yield '3-3';
    console.log('4');
}

let iterator = gen();

console.log(iterator.next()); // 1, {value: '1-1', done: false}
console.log(iterator.next()); // 2, {value: '2-2', done: false}
console.log(iterator.next()); // 3, {value: '3-3', done: false}
console.log(iterator.next()); // 4, {value: undefined, done: true}

//遍历
for (let v of gen()) {
    console.log(v); // 1, 1-1, 2, 2-2, 3, 3-3, 4
}

• 生成器函数参数传递

function* gen(arg) {
    console.log(arg); // aa
    let one = yield 11;
    console.log(one); // bb
    let two = yield 22;
    console.log(two); // cc
    let three = yield 33;
    console.log(three); // dd
}

// 执行获取迭代器对象
let iterator = gen('aa');
console.log(iterator.next()); // {value: '11', done: false}
// next参数可以传入实参
console.log(iterator.next('bb')); // {value: '22', done: false}
console.log(iterator.next('cc')); // {value: '33', done: false}
console.log(iterator.next('dd')); // {value: undefined, done: true}

• 异步编程简单实例

1s 后输出111, 2s后输出222, 3s后输出333

// 回调地狱模式
// setTimeout(() => {
// 	console.log(111);
// 	setTimeout(() => {
// 		console.log(222);
// 		setTimeout(() => {
// 			console.log(333);
// 		}, 3000);
// 	}, 2000);
// }, 1000);

// 生成器函数
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();