du1wu2lzlz / my_blog

my personal blog
1 stars 0 forks source link

ES6/7/8 #7

Open du1wu2lzlz opened 6 years ago

du1wu2lzlz commented 6 years ago

ES6


lterator && Generator

迭代器lterator 迭代器是一种特殊对象,所有的迭代器对象都有一个next()方法,每次调用都会返回一个结果对象


生成器Generator 生成器是一种返回迭代器的函数,通过function关键字后面的( )来表示,函数中会用到新的关键字 yield 生成器每执行完一条yield语句后函数就会自动停止执行,直到再次调用迭代器的next()方法才会继续执行 yield 关键字用来暂停和恢复一个生成器函数(function 或遗留的生成器函数)

function* test() {
  yield 1;
  yield 2;
  yield 3;
  yield 4;
  yield 5;
}

var a = test();

console.log(a.next());      //  { value : 1 ,done : false }

console.log(a.next());     //  { value : 2 ,done : false }

异步操作的同步化表达

Generator 函数的暂停执行的效果,意味着可以把异步操作写在yield表达式里面,等到调用next方法时再往后执行。 这实际上等同于不需要写回调函数了,因为异步操作的后续操作可以放在yield表达式下面,反正要等到调用next方法时再执行。所以,Generator函数的一个重要实际意义就是用来处理异步操作,改写回调函数。

比如:

function* loadUI() {
  showLoadingScreen();
  yield loadUIDataAsynchronously();
  hideLoadingScreen();
}
var loader = loadUI();
// 加载UI
loader.next()

// 卸载UI
loader.next()

上面代码中,第一次调用loadUI函数时,该函数不会执行,仅返回一个遍历器。 下一次对该遍历器调用next方法,则会显示Loading界面(showLoadingScreen),并且异步加载数据(loadUIDataAsynchronously)。 等到数据加载完成,再一次使用next方法,则会隐藏Loading界面。可以看到,这种写法的好处是所有Loading界面的逻辑,都被封装在一个函数,按部就班非常清晰。


Promise

promise.all()