Open du1wu2lzlz opened 6 years ago
迭代器lterator 迭代器是一种特殊对象,所有的迭代器对象都有一个next()方法,每次调用都会返回一个结果对象
生成器Generator 生成器是一种返回迭代器的函数,通过function关键字后面的( )来表示,函数中会用到新的关键字 yield 生成器每执行完一条yield语句后函数就会自动停止执行,直到再次调用迭代器的next()方法才会继续执行 yield 关键字用来暂停和恢复一个生成器函数(function 或遗留的生成器函数)
function
yield
next()
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函数的一个重要实际意义就是用来处理异步操作,改写回调函数。
Generator
next
比如:
function* loadUI() { showLoadingScreen(); yield loadUIDataAsynchronously(); hideLoadingScreen(); } var loader = loadUI(); // 加载UI loader.next() // 卸载UI loader.next()
上面代码中,第一次调用loadUI函数时,该函数不会执行,仅返回一个遍历器。 下一次对该遍历器调用next方法,则会显示Loading界面(showLoadingScreen),并且异步加载数据(loadUIDataAsynchronously)。 等到数据加载完成,再一次使用next方法,则会隐藏Loading界面。可以看到,这种写法的好处是所有Loading界面的逻辑,都被封装在一个函数,按部就班非常清晰。
loadUI
Loading
showLoadingScreen
loadUIDataAsynchronously
promise.all()
ES6
lterator && Generator
迭代器lterator 迭代器是一种特殊对象,所有的迭代器对象都有一个next()方法,每次调用都会返回一个结果对象
生成器Generator 生成器是一种返回迭代器的函数,通过
function
关键字后面的( )来表示,函数中会用到新的关键字yield
生成器每执行完一条yield
语句后函数就会自动停止执行,直到再次调用迭代器的next()
方法才会继续执行 yield 关键字用来暂停和恢复一个生成器函数(function 或遗留的生成器函数)异步操作的同步化表达
Generator
函数的暂停执行的效果,意味着可以把异步操作写在yield
表达式里面,等到调用next
方法时再往后执行。 这实际上等同于不需要写回调函数了,因为异步操作的后续操作可以放在yield
表达式下面,反正要等到调用next
方法时再执行。所以,Generator
函数的一个重要实际意义就是用来处理异步操作,改写回调函数。比如:
上面代码中,第一次调用
loadUI
函数时,该函数不会执行,仅返回一个遍历器。 下一次对该遍历器调用next方法,则会显示Loading
界面(showLoadingScreen
),并且异步加载数据(loadUIDataAsynchronously
)。 等到数据加载完成,再一次使用next
方法,则会隐藏Loading
界面。可以看到,这种写法的好处是所有Loading
界面的逻辑,都被封装在一个函数,按部就班非常清晰。Promise
promise.all()