十四. Iterator_ Generator

国维
86 阅读11分钟

十四. Iterator_ Generator

⚑ 14.1. 认识迭代器（iterator）

  • 迭代器（iterator），是确使用户可在容器对象（container，例如链表或数组）上遍访的对象，使用该接口无需关心对象的内部实现细节。

    • 在各种编程语言的实现中，迭代器的实现方式各不相同，但是基本都有迭代器，比如Java、Python等；

  • 从迭代器的定义我们可以看出来，迭代器是帮助我们对某个数据结构进行遍历的对象。

  • 在JavaScript中，迭代器也是一个具体的对象，这个对象需要符合迭代器协议（iterator protocol）：

    • 迭代器协议定义了产生一系列值（无论是有限还是无限个）的标准方式；
    • 那么在js中这个标准就是一个特定的next方法；

  • next方法有如下的要求：

    • 一个无参数或者有一个参数(生成器)的函数，返回一个应当拥有以下两个属性的对象：

    • done（boolean）

      • 如果迭代器可以产生序列中的下一个值，则为 false。（这等价于没有指定 done 这个属性。）
      • 如果迭代器已将序列迭代完毕，则为 true。这种情况下，value 是可选的，如果它依然存在，即为迭代结束之后的默认返回值。

    • value

      • 迭代器返回的任何 JavaScript 值。done 为 true 时可省略。

下面的namesIterator就是一个迭代器

 const names = ['a', 'b', 'c']
 let index = 0
 const namesIterator = {
     next: function () {
         if (index < names.length) {
             return { done: false, value: names[index++] }
         } else {
             return { done: true, value: undefined }
         }
     }
 }
 console.log(namesIterator.next()); // {done: false, value: 'a'}
 console.log(namesIterator.next()); // {done: false, value: 'b'}
 console.log(namesIterator.next()); // {done: false, value: 'c'}
 console.log(namesIterator.next()); // {done: true, value: undefined}
  • 封装一个函数，这个函数可以帮助我们生成一个迭代器
 const names = ['a', 'b', 'c']
 function createArrayIterator(arr){
     let index =0
     return {
         next: function () {
             if (index < arr.length) {
                 return { done: false, value: arr[index++]
                        }
             } else {
                 return { done: true, value: undefined
                        }
             }
         }
     }
 }
 const namesIterator= createArrayIterator(names)
 // 注意：这里不能用createArrayIterator(names).next()去打印，因为每次都会创建一个新的AO对象
 console.log(namesIterator.next()); // {done: false, value: 'a'}
 console.log(namesIterator.next()); // {done: false, value: 'b'}
 console.log(namesIterator.next()); // {done: false, value: 'c'}
 console.log(namesIterator.next()); // {done: true, value: undefined}

14.2. 可迭代对象

但是上面的代码整体来说看起来是有点奇怪的：

  • 我们获取一个数组的时候，要创建index变量，要创建所谓的迭代器对象；事实上我们可以对上面的代码进行进一步的封装，让其变成一个可迭代对象；

什么又是可迭代对象呢？

  • 它和迭代器是不同的概念；
  • 当一个对象实现了可迭代协议(iterable protocol)时，它就是一个可迭代对象；
  • 可迭代对象的要求是必须实现 @@iterator 方法，在代码中我们使用 Symbol.iterator 访问该属性；
  • Symbol.iterator是个函数，返回一个迭代器

当我们要问一个问题，我们转成这样的一个东西有什么好处呢？

  • 当一个对象变成一个可迭代对象的时候，进行某些迭代操作，比如 for...of 操作时，其实就会调用它的@@iterator 方法；

下面的iterableObj就是一个可迭代对象

 const iterableObj = {
     names: ['a', 'b', 'c'],
     [Symbol.iterator]: function () {
         let index = 0
         return {
             next: () => {
                 // 为了能访问到names，必须用箭头函数，这样this才能继续往上一层寻找作用域
                 if (index < this.names.length) {
                     return { done: false, value: this.names[index++] }
                 } else {
                     return { done: true, value: undefined }
                 }
             }
         }
     }
 }
 const iterator= iterableObj[Symbol.iterator]()
 console.log(iterator.next());// {done: false, value: 'a'}
 console.log(iterator.next());// {done: false, value: 'b'}
 console.log(iterator.next());// {done: false, value: 'c'}
 console.log(iterator.next());// {done: true, value: undefined}

for of不支持obj对象的遍历，但支持iterableObj的遍历，因为for of只支持可迭代对象的遍历

  • for of其实是个语法糖，他所做的事情就是不断执行iterator.next().value直到done为true，
 for (const item of iterableObj) {
     console.log(item); // a b c
 }
 ​
 const obj={name:'why'}
 for (const item of obj) {
     console.log(item); // TypeError: obj is not iterable
 }

14.3. 内置的可迭代对象

很多原生对象已经实现了可迭代协议，会生成一个迭代器对象的：

  • String、Array、Map、Set、arguments对象、NodeList集合；
 const str= 'hello world'
 for (const item of str) {
     console.log(item);
 }
 ​
 const arr= ['a','b','c']
 for (const item of arr) {
     console.log(item);
 }
 ​
 function foo(x, y ,z) {
     for (const item of arguments) {
         console.log(item);
     }
 }
 foo(1, 2 , 3)
 ​
 const arr2= Array.from(str)
 console.log(arr2);
 ​
 const set= new Set().add(1).add(2).add(3)
 for (const item of set) {
     console.log(item);
 }

 // 数组本身是一个可迭代对象，在创建的瞬间就实现了可迭代协议
 const names = ['a', 'b', 'c']
 // 获取可迭代的函数
 console.log(names[Symbol.iterator]);
 // 调用可迭代函数，获取到迭代器
 const iterator= names[Symbol.iterator]()
 console.log(iterator.next()); // {value: 'a', done: false}
 console.log(iterator.next()); // {value: 'b', done: false}
 console.log(iterator.next()); // {value: 'c', done: false}
 console.log(iterator.next()); // {value: undefined, done: true}

14.4. 可迭代对象的应用场景

JavaScript中语法：

  • for ...of、展开语法（spread syntax）、yield* 、解构赋值（Destructuring_assignment）；
  • 创建一些对象时：new Map([Iterable])、new WeakMap([iterable])、new Set([iterable])、new WeakSet([iterable]);
  • 一些方法的调用：Promise.all(iterable)、Promise.race(iterable)、Array.from(iterable);

Tips:

对象的展开和解构是 ES2018(ES9)添加的新特性，展开运算只能用于可迭代对象，对象的展开不是用迭代器实现的

 // ES9新增的特性：Object spread operators
 const obj= {name: 'why'}
 const newObj= {...obj, age: 18}
 console.log(newObj); // {{ name: 'why', age: 18 }}
 ​
 // 注：对象展开后必须放到{}里，不然会报错，这样写和直接用for of遍历报一样的错了
 console.log(...obj); // 报错：没有找到@@iterator方法
 ​
 // 模拟解构的内部操作，自己瞎搞的，反正不是用迭代器
 const newobj={}
 for (const iterator of Object.entries(obj)) {
     newobj[iterator[0]] = iterator[1]
 }

14.5. 自定义一个可迭代对象

自定义一个可迭代的数组

  • 在next函数后加一个return函数可以监听迭代器的终止，如果i==='b'则会触发这个终止函数

迭代器的中断

  • 比如遍历的过程中通过break、continue、return、throw中断了循环操作；
  • 比如在解构的时候，没有解构所有的值；
  • 那么这个时候我们想要监听中断的话，可以添加return方法：
 class HYarr{
     constructor( arr){ 
         this.array=arr
     }
     entry(newArr){
         this.array.push(newArr)
     }
     [Symbol.iterator](){
         let index= 0
         return {
             next:()=>{
                 if(index <this.array.length){
                     return { done: false, value: this.array[index++]}
                 }else{
                     return { done: true, value: undefined}
                 }
             },
             return:()=> {
                 console.log('迭代器提前结束了');
                 return { done: true, value: undefined}
             }
         }
     }
 }
 const hyarr= new HYarr(['a','b','c'])
 hyarr.entry('d')
 ​
 for (const i of hyarr) {
     console.log(i);
     if(i==='b') break
 }

⚑ 14.6. 认识生成器(Generator)

生成器是ES6中新增的一种函数控制、使用的方案，它可以让我们更加灵活的控制函数什么时候继续执行、暂停执行等。

平时我们会编写很多的函数，这些函数终止的条件通常是返回值或者发生了异常。

生成器函数也是一个函数，但是和普通的函数有一些区别：

  • 首先，生成器函数需要在function的后面加一个符号：*

  • 其次，生成器函数可以通过yield关键字来控制函数的执行流程：

  • 最后，生成器函数的返回值是一个Generator（生成器）：

    • 生成器事实上是一种特殊的迭代器；
    • MDN：Instead, they return a special type of iterator, called a Generator
function* foo() {
    const value1 = 1
    console.log('第一段代码:'+value1);
    yield

    const value2 = 2
    console.log('第二段代码:'+value2);
    yield

    const value3 = 3
    console.log('第三段代码:'+value3);
    yield

    console.log('执行结束');
}
// 调用生成器函数时，会返回一个生成器对象
const generator= foo()
generator.next() // 第一段代码:1
generator.next() // 第二段代码:2
generator.next() // 第三段代码:3
generator.next() // 执行结束

14.7. 生成器函数执行

我们发现上面的生成器函数foo的执行体压根没有执行，它只是返回了一个生成器对象。

  • 那么我们如何可以让它执行函数中的东西呢？调用next即可；
  • 我们之前学习迭代器时，知道迭代器的next是会有返回值的；
  • 但是我们很多时候不希望next返回的是一个undefined，这个时候我们可以通过yield来返回结果；

注：一：当遇到return的时候，生成器就停止执行，done为true，value为返回的值

二：但遇到yield的时候，生成器就暂停执行，done为false，value为yield后面的值

image-20220318164134138.png

14.8. 生成器传递参数-next()

函数既然可以暂停来分段执行，那么也可以给每个分段来传递参数

  • 我们在调用next函数的时候，可以给它传递参数，那么这个参数会作为上一个yield语句的返回值；
  • 注：第一段代码执行时需要传递参数时，在生成器执行时传入就行
 function* foo(m) {
     const value1 = 1 * m
     console.log('第一段代码:' + value1); // 第一段代码:30
     const n = yield value1
 ​
     const value2 = 2 * n
     console.log('第二段代码:' + value2); // 第二段代码:40
     yield value2
 ​
     const value3 = 3
     console.log('第三段代码:' + value3); // 第三段代码:3 
     yield value3
 ​
     console.log('执行结束'); // 执行结束 
     return '到底了'
 ​
 }
 const generator = foo(30)
 // 第一段代码执行时需要传递参数时，在生成器执行时传入就行
 console.log(generator.next());
 // 后面的代码(如第二段)执行，需要一个变量n，用变量去接收上一个yield的返回值
 console.log(generator.next(20));   
 console.log(generator.next());
 console.log(generator.next());

14.9. 生成器提前结束-return() -- 用的少

还有一个可以给生成器函数传递参数的方法是通过return函数：

  • return传值后这个生成器函数就会结束，之后调用next迭代器不会继续生成值了；
 function* foo(m) {
     const value1 = 1 * m
     console.log('第一段代码:' + value1); // 第一段代码:30
     const n = yield value1
     // return n
 ​
     const value2 = 2 * n
     console.log('第二段代码:' + value2); // 第二段代码:40
     yield value2
 ​
     const value3 = 3
     console.log('第三段代码:' + value3); // 第三段代码:3 
     yield value3
 ​
     console.log('执行结束'); // 执行结束 
     return '到底了'
 ​
 }
 const generator = foo(30) 
 console.log(generator.next()); // { value: 30, done: false }
 // 第二段代码的执行，使用了return
 // 这等同在第一段代码后面加了return，所以会提前终止生成器函数的执行
 console.log(generator.return(20)); // { value: 20, done: true }
 console.log(generator.next()); // { value: undefined, done: true }
 console.log(generator.next()); // { value: undefined, done: true }

14.10. 生成器抛出异常–throw函数 -- 用的少

除了给生成器函数内部传递参数之外，也可以给生成器函数内部抛出异常：

  • 抛出异常后我们可以在生成器函数中捕获异常；
  • 但是在catch语句中不能继续yield新的值了，但是可以在catch语句外使用yield继续中断函数的执行；
 function* foo() { 
     console.log('+++++++++++++');  
     
     try {
        yield 111
     } catch (error) {
         console.log(error);
         yield 'aaa'
     }
  
     yield 222 
     console.log('----------------'); // 执行结束  
 }
 const generator = foo(30) 
 console.log(generator.next());  
 generator.throw('err message')
 console.log(generator.next());    
 console.log(generator.next());    

14.11. 生成器 替代 迭代器

生成器是一种特殊的迭代器，那么在某些情况下我们可以使用生成器来替代迭代器：

事实上我们还可以使用yield*来生产一个可迭代对象：

  • 这个时候相当于是一种yield的语法糖，只不过会依次迭代这个可迭代对象，每次迭代其中的一个值；
 // 生成器代替迭代器
 function* createArrayIterator(arr) {
     yield* arr
     
     // 第三种
     // for (const item of arr) {
     //     yield item
     // }
     
     // let index = 0
    // 第二种
     // yield arr[index++]
     // yield arr[index++]
     // yield arr[index++]
     
    // 第一种
     // return {
     //     next: () => {
     //         if (index < arr.length) {
     //             return { done: false, value: arr[index++] }
     //         } else {
     //             return { done: true, value: undefined }
     //         }
     //     }
     // }
 ​
 }
 const arr = ['a', 'b', 'c']
 const generator = createArrayIterator(arr)
 ​
 console.log(generator.next()); // { value: 'a', done: false }
 console.log(generator.next()); // { value: 'b', done: false }  
 console.log(generator.next()); // { value: 'c', done: false } 
 console.log(generator.next()); // { value: undefined, done: true }  

14.12. 异步代码的处理方案

需求:

  • 1> 发送why请求数据，服务器返回why；url: why -> res: why
  • 2> 拿到上次的结果拼接上aaa后再请求数据，服务器返回res+aaa；url: res + "aaa" -> res: whyaaa
  • 3> 拿到上次的结果拼接上bbb后再请求数据，服务器返回res+b；url: res + "bbb" => res: whyaaabbb
 function requestData(url) {
     return new Promise((resolve, reject) => {
         // 异步请求的代码会被放入到executor中
         setTimeout(() => {
             resolve(url)
         }, 100);
     })
 }
 ​
 // 1.第一种方案: 多次回调
 // 回调地狱
 // requestData("why").then(res => {
 //     requestData(res + "aaa").then(res => {
 //         requestData(res + "bbb").then(res => {
 //             console.log(res)
 //         })
 //     })
 // })
 ​
 // 2. 第二种方案：promise的返回值来实现
 // requestData('why').then(res=>{
 //     return res+'aaa'
 // }).then(res=>{
 //     return res+'bbb'
 // }).then(res=>{
 //     console.log(res);
 // })
 ​
 // 3. 第三种方案：promise + generator 实现
 // 每执行一次yield发送一次请求结果
 // function* getData() {
 //     const res1 = yield requestData('why')
 //     const res2 = yield requestData(res1 + 'aaa')
 //     const res3 = yield requestData(res2 + 'bbb')
 //     console.log(res3);
 // }
 ​
 // // 手动执行生成器函数
 // const generator = getData()
 // generator.next().value.then(res => {
 //     generator.next(res).value.then(res => {
 //         generator.next(res).value.then(res => {
 //             generator.next(res)
 //         })
 //     })
 // })
  
 // 3.1：第三方包co自动执行 TJ: npm install co 
 // const co= require('co')
 // co(getData)
 ​
 // 4. 第四种方案：async await
 async function getData() {
     const res1 = await requestData('why') // why 
     const res2 = await requestData(res1 + 'aaa') // whyaaa 
     const res3 = await requestData(res2 + 'bbb') // whyaaabbb 
     console.log(res3);
 }
 getData()

14.13. 补充：生成器和async await的结果接收

 function requestData(url) {
     return new Promise((resolve, reject) => { 
         setTimeout(() => {
             resolve(url)
         }, 1000);
     })
 }
 ​
 async function foo(){
     // 通常await后面跟的是一个Promise，等Promise回调resolve(结果)时，会得到一个返回值(即resolve的参数)，然后把这个返回值结果给res,然后执行then()
     // 可以用debugger验证，这里和generator有点不一样，具体如下
     const res= await requestData('why')  
     debugger
     // await后面的代码要等到执行resolve()的时候才会依次执行，
     // 我们知道resolve()执行时，是要执行then里面的回调，但这里没有写then方法，而是直接执行后面的代码了，
     // 实际上后面的代码就是在then里面执行的，只是内部实现了，我们看不到而已；整体思路和generator思路一样
     console.log(res); 
 }
 foo()
 ​
 ​
 ​
 function* getData() {
     const res1 = yield requestData('why')
     console.log(res1); // undefined
     // 注：res1 != yield requestData('why')的返回值
     // 若第二个yield不需要用到其他变量数据(如第一次请求结果)，那么第二个generator.next()执行时，不用传入参数，则res1是undefined，因为定义了一个常量但是没赋值
     // 若第二个yield需要用到其他变量数据(如第一次请求结果)，那么第二个generator.next()执行时，必须传入参数，然后在res1这里接收
     const res2 = yield requestData('aaa') 
     // 这里是最后的一段代码，执行时将上一次请求的成功当成参数，res2负责接收这个参数
     console.log(res2); // aaa
 }
 ​
 const generator = getData()
 generator.next().value.then(res => {
     generator.next().value.then(res => {
         generator.next(res)
     })
 })
avatar
文章
阅读
粉丝