填坑-十万个为什么？（20）

简介:很多概念不清或忘记，重新构建自己的知识体系。每天问自己1~多个问题。我是菜鸟 成为大神之路!

1.认识es6 Generator函数！

generator（生成器）是ES6标准引入的新的数据类型

generator跟函数很像，定义如下：

function* foo(x) {
    yield x + 1;
    yield x + 2;
    return x + 3;
}

generator和函数不同的是，generator由function*定义（注意多出的*号），并且，除了return语句，还可以用yield返回多次。

function* foo(){
	let a = 1;
	yield a;
	a++;
	yield a;
	a++;
	return a;
}
let f = foo();
console.log(f.next());
console.log(f.next());
console.log(f.next());

2.es7语法糖async/await

async关键字说起，它被放置在一个函数前面。就像下面这样：

async function f() {
    return 1
}

函数前面的async一词意味着一个简单的事情：这个函数总是返回一个promise，如果代码中有return <非promise>语句，JavaScript会自动把返回的这个value值包装成promise的resolved值。

`代码①`
async function f() {
    return 1
}
f().then(function(data){console.log(data)});//1

`代码②`
async function f() {
    return Promise.resolve(1)
}
f().then(function(data){console.log(data)});//1

`代码①和代码②执行结果一样`

关键词await可以让JavaScript进行等待，直到一个promise执行并返回它的结果，JavaScript才会继续往下执行。

async function f() {
    let promise = new Promise((resolve, reject) => {
        setTimeout(() => resolve('done!'), 1000)
    })
    let result = await promise // 直到promise返回一个resolve值（*）
    console.log(result) // 'done!' 
}
f()

await字面上使得JavaScript等待，直到promise处理完成， 然后将结果继续下去。这并不会花费任何的cpu资源，因为引擎能够同时做其他工作：执行其他脚本，处理事件等等。

参考文章：
① developer.mozilla.org/en-US/docs/…
② segmentfault.com/a/119000001…