迭代器/生成器/async await

web_girls

已于 2022-03-04 20:16:54 修改

阅读量585

点赞数

分类专栏：知识点 js 文章标签： javascript 前端 vue.js

于 2022-02-01 20:55:55 首次发布

本文链接：https://blog.csdn.net/web_girls/article/details/122747593

版权

知识点同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

8 篇文章 0 订阅

订阅专栏

迭代器定义：帮助我们对某个数据结构进行遍历的对象

在js中，迭代器也是一个具体的对象，这个对象需要符合迭代器协议。

迭代器定义了产生一系列值的标准方式（js中就是一个特定的next方法）

next方法有如下要求：是一个无参函数，返回一个拥有以下两个属性的对象（genrantor是特殊的迭代器他有参数）

done (boolean) ：如果迭代器可以产生序列中下一个值，为false（可以认为没有done这个属性）

如果迭代器将序列迭代完毕，为true，value是可选的，如果它（value）依然存在，则为迭代后的默认返回值

value：迭代器返回的任何JavaScript值，done为true可省略

==============================迭代器=============================
let arr = ['a','b','c']
    let index = 0
    const  namesIterator =  {
          next: function () {
          if (index === arr.length) {
            return {
              done: true,
              value: undefined,
            }
          } else {
            return {
              done: false,
              value: arr[index++]
            }
          }
        }
      
    }

可迭代对象：返回值是迭代器（可以被for ...of 遍历）

  ===========================可迭代对象=============================
   const iterableObj = {
      names:['a', 'b', 'c'],
      [Symbol.iterator]:function(){
        let index = 0
        return {
           next: () =>{
             console.log(this.names,'this.names');
            if (index === this.names.length) {
              return {
                done: true,
                value: undefined,
              }
            } else {
              return {
                done: false,
                value: this.names[index++]
              }
            }
          }
        }

      }
    }
   const idear = iterableObj[Symbol.iterator]() // 调用返回一个迭代器
   idear.next()

可迭代对象：Array,Set(set[Symbol.iterator]),Map,String,arguments对象，Nodelist集合

用途1： for...of 遍历

for(const item of iterableObj){
  console.log(item,'item');
}
 //  a item
 //  b item
 //  c item

用途2:展开运算符

 console.log( [...iterableObj],'iterableObj'); // ['a', 'b', 'c'] 'iterableObj'

对象的展开运算不是通过迭代器实现，而是es9(es2018)的新特性

const abc = {name:'wy',age:10}
console.log({ ...abc}); // {name:'wy',age:10}

用途3: 解构语法

const [obj1,obj2,obj3] = iterableObj

对象的解构语法也不是通过迭代器实现，而是es9(es2018)的新特性

const {name ,age } = abc

用途4: 创建一些其他的对象

const set = new Set(iterableObj)
const arr1 = Array.from(iterableObj)

参数是可迭代对象，不然后果自负哦

const abc = {name:'wy',age:10}
const set = new Set(abc)
console.log(set,'set');

你看看，报错了吧

5 promise.all

Promise.all(iterableObj).then((res)=>{
console.log(res,'res'); // ['a', 'b', 'c'] 'res'
})

7 　可迭代器的类（类创建的对象是可迭代的）

生成器作用：es6 新增的一种函数控制，使用的方案，让我们更加灵活的控制函数什么时候继续执行，暂停执行。

生成器是一种特殊的函数：

生成器需要在function后面加 *

生成器可以通过yield关键字控制函数的执行流程

生成器的返回值是一个生成器

// 生成器函数
function* foo() {
      console.log('函数开始')
      const value1 =100 
      console.log(value1);
      yield
      const value2 = 200
       console.log(value2);
       yield
      const value3 = 300
       console.log(value3);
       yield
      console.log('函数结束')
    }
    const generator = foo()
    generator.next()

generator本质是特殊的iterator

 function* foo() {
      console.log('函数开始')
      const value1 =100 
      console.log(value1);
    
      yield
      const value2 = 200
       console.log(value2);
       yield
      const value3 = 300
       console.log(value3);
       yield
      console.log('函数结束')
    }
    const generator = foo()
          console.log(generator.next(),'返回值1');
           console.log(generator.next(), '返回值2');
            console.log(generator.next(), '返回值3');
             console.log(generator.next(), '返回值4');

想加返回值要怎么操作？return ？

return后生成器会停止执行：

 function* foo() {
      console.log('函数开始')
      const value1 = 100
      console.log(value1);
      return value1
      yield
      const value2 = 200
      console.log(value2);
      yield
      const value3 = 300
      console.log(value3);
      yield
      console.log('函数结束')
    }
    const generator = foo()
    console.log(generator.next(), '返回值1');
    console.log(generator.next(), '返回值2');
    console.log(generator.next(), '返回值3');
    console.log(generator.next(), '返回值4');

yield ？ yield 能拿到执行结果

function* foo() {
      console.log('函数开始')
      const value1 = 100
      console.log(value1);
      yield value1
      const value2 = 200
      console.log(value2);
      yield value2
      const value3 = 300
      console.log(value3);
      yield value3
      console.log('函数结束')
      return 'bye'
    }
    const generator = foo()
    console.log(generator.next(), '返回值1');
    console.log(generator.next(), '返回值2');
    console.log(generator.next(), '返回值3');
    console.log(generator.next(), '返回值4');

next 里面写参数

 function* foo() {
      console.log('函数开始')
      const value1 = 100
      console.log(value1);
     const n =  yield value1
      const value2 = 200 * n
      console.log(value2);
      yield value2
      const value3 = 300
      console.log(value3);
      yield value3
      console.log('函数结束')
      return 'bye'
    }
    const generator = foo()
    console.log(generator.next(), '返回值1');
    console.log(generator.next(10), '返回值2');
    console.log(generator.next(), '返回值3');
    console.log(generator.next(), '返回值4');

生成器的return 终止执行： generator.return()

 function* foo() {
      console.log('函数开始')
      const value1 = 100
      console.log(value1);
     const n =  yield value1
//相当于在这里 return n
      const value2 = 200 * n
      console.log(value2);
      yield value2
      const value3 = 300
      console.log(value3);
      yield value3
      console.log('函数结束')
      return 'bye'
    }
    const generator = foo()
    console.log(generator.next(), '返回值1');
    console.log(generator.return(10), '返回值2');
    console.log(generator.next(), '返回值3');
    console.log(generator.next(), '返回值4');

生成器替代迭代器：

看我的：

迭代器的用法：

function createIteratar(names){
        let index = 0 
        return {
          next: function () {
            if(index < names.length){
             return {
                value: names[index++],done: false
              }
            }else{
               return {
                  value: undefined, done: true
               }
            }
          }
        }
      }

    const name = ['a', 'b', 'c']
    const namesIterator = createIteratar(name)
    console.log(namesIterator.next());
     console.log(namesIterator.next());
      console.log(namesIterator.next());
       console.log(namesIterator.next());

生成器的用法

 function* createIteratar(names) {
      let index = 0 
 //方式一 
      // yield name[index++]
      // yield name[index++]
      // yield name[index++]
 //方式二 
      // for(let name of names) {
      //   yield name
      // }
 //方式三
       yield* names  //  yield* 可迭代对象


    }
    const name = ['a', 'b', 'c']
    const namesIterator = createIteratar(name)
    console.log(namesIterator.next());
     console.log(namesIterator.next());
      console.log(namesIterator.next());
       console.log(namesIterator.next());

异步代码的处理：

function requestData(name){
      return new Promise(function(resolve, reject){
        console.log(resolve(name),'name');
      })
    
    }

写法一：回调地狱


    requestData('wy').then(res=>{
      requestData(res+'wy').then(res => {
        requestData(res+'wy').then(res => {
          console.log(res,'res');
        })
      })
    })

写法二：链式调用


     requestData('wy').then(res=>{
       return res+'wy';
     }).then(res=>{
       console.log(res,'res');
       return res

     })

写法三：promise+generator实现


   function*  getData() {
     const res1 = yield requestData('wy')
      console.log(res1,'1111');
     const res2 = yield requestData('aa'+res1)
        console.log(res2, '2222');
     const res3 = yield requestData('bb' + res2)
        console.log(res3, '3333');
     }

//手动执行
 //getData.next.value  value是返回的值
const generator = getData()
  generator.next().value.then(res=>{
    console.log(res,'res1');
    generator.next(res).value.then(res=>{
       console.log(res, 'res2');
      generator.next(res).value.then(res=>{
console.log(res,'res3');
      })
    })
  })

async+await 实现


  async function getData() {
    const res1 = await requestData('wy')
    console.log(res1, '1111');
    const res2 = await requestData('aa' + res1)
    console.log(res2, '2222');
    const res3 = await requestData('bb' + res2)
    console.log(res3, '3333');
  }
  getData()

async: 加上之后相当于异步，返回一个 Promise 对象（无返回值也返回一个promise），可以使用 then 方法添加回调函数，catch捕获异常

异步函数写法：

// 写法一：
    async function bar() {
    }
// 写法二：
    const bar = async ()=>{
    }
// 写法三：
    class foo {
      async  bar() {
      }
    }

执行流程：没有特殊值和同步顺序一致

function foo() {
      console.log('foo-start');
// return具体值之后下面的then才会被执行
      console.log('foo-end');
    }
    console.log('start');

    foo()
    console.log('end');
// 异步
 async function foo() {
      console.log('foo-start');
      console.log('foo-end');
    }
    console.log('start');
    foo().then(res=>{
      console.log('res',res); // then的执行取决于foo是否执行完，then的执行加入微任务的队列里
})
    console.log('end');

无异步async异常情况报错：

  //   加上async相当于异步
   async function foo() {
      console.log('foo-start');
      throw new Error('hahhah')
      console.log('foo-end');
    }
    console.log('start');
    foo()
    console.log('end');

异常情况用catch接：

 async function foo() {
      console.log('foo-start');
      throw new Error('hahhah')
      console.log('foo-end');
    }
    console.log('start');
    foo().catch(res=>{
      console.log('error');
    })
    console.log('end');

async 中使用await关键字：

 function requestData(){
     return new Promise (function (resolve, reject) {
       setTimeout(() => {
        //  resolve('ppppp');
        reject('000')
       }, 2000);
     })
   } 

 async function foo() {
     const res = await requestData() 
     return res
    }

 foo().then(res=>{
      console.log(res,'res');  //ppppp
    }).catch(err=>{ 
      console.log(err,'err');  // 000
    })