<!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 = nullwhile(!(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 prevyield currwhile(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) returnresult.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>
