阅读量:0
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>迭代器和生成器</title> </head> <body> <script> /* 迭代器lterator(也被称作游标Cursor)，是一种设计模式 迭代器提供了一种遍历内容的方法(比如 JS 迭代器中的next)，而不需要关心内部构造。 生成器(Generator)本身也是一种设计模式，用于构造复杂对象， JS 中的生成器，用于构造迭代器。 */ // 迭代器的遍历 const s = new Set([1,2,3,4,5]) const it = s.values() // console.log(it); // SetIterator {1, 2, 3, 4, 5} const it1 = s.values() // console.log([...it1]); // [1, 2, 3, 4, 5] const it2 = s.values() for (const val of it2) { // console.log(val); // 1 2 3 4 5 } let val = null while(!(val = it.next()).done) { // console.log(val); // {value: 1, done: false} // {value: 2, done: false} // {value: 3, done: false} // {value: 4, done: false} // {value: 5, done: false} } /* Array.from(arrayLike, mapFn, thisArg) arrLike：想要转换成数组的伪数组对象或可迭代对象 mapFn：如果指定了该参数，新数组中的每个元素会执行该回调函数 thisArg：可选参数，执行回调函数 mapFn 时 this 对象 */ const it3 = s.values() const arr = Array.from(Array(5), it3.next, it3).map(x => x.value) // [1, 2, 3, 4, 5] /* 生成器 简化语法、写起来少考虑一些问题（示例少考虑了concat） 节省空间（示例中函数体不需要定义数组承载值) 分散执行片段(节省单位时间的处理量)--对于单线程的前端非常重要 构造异步语法 */ // 生成器构造无穷斐波那契数列 function* fibonacci() { let [prev, curr] = [1, 1] yield prev yield curr while(true) { [prev, curr] = [curr, prev + curr] yield curr } } const fib = fibonacci() const fib10 = Array.from(Array(10), fib.next, fib).map(x => x.value) // console.log(fib10) // [1, 1, 2, 3, 5, 8, 13, 21, 34, 55] // Generator异步语法 function request (url) { return cb => { setTimeout(() => { cb(url) }, 1000) } } function createRunner (genFunc) { const it = genFunc() function run (data) { const result = it.next(data) if (result.done) return result.value(run) } return run } createRunner(function* () { const res1 = yield request('url1') console.log(res1) const res2 = yield request('url2') console.log(res2) })() </script> </body> </html>