ES6-迭代器-生成器

一、for…in语句

for…in 用来遍历对象中的属性：

let nicknames = ['di', 'boo', 'punkeye'];
nicknames.size = 3;
for (let nickname in nicknames) {
    
    
  console.log(nickname);
}
结果：0, 1, 2, size

let nicknames = ['di', 'boo', 'punkeye'];
for (let nickname in nicknames) {
    
    
  console.log(nickname);
}
结果：0,1,2

使用for…in遍历数组，nickname所保存的是键名

二、for…of 用于遍历一个迭代器

1. 迭代器：一种接口，为各种不同的数据结构提供统一的访问机制，任何数据只要部署Iterator接口（对象里的一个属性symbol.iterator），完成遍历操作。
2. ES6创造的遍历命令for…of循环，Iterator接口主要提供for…of消费。
3. 原生具备Iterator接口的数据：Array、Arguments、Set、Map、String、TypedArray、NodeList。

const per=["孙悟空","猪八戒","沙和尚","唐僧"]
for(let x of per){
    
    
    console.log(x);
}
结果：孙悟空 猪八戒 沙和尚 唐僧

使用for…of遍历数组，x保存的是键值

三、迭代器应用：自定义遍历数组

//声明一个对象，遍历对象中的值
const per={
    
    
    name:'西游记',
    person:[
       "孙悟空",
       "猪八戒",
       "沙和尚",
       "唐僧"
    ],
//自定义遍历数组迭代器
    [Symbol.iterator](){
    
    
        //索引变量
        let index=0;
        let _this=this;
        return{
    
    
            next:function(){
    
    
                if(index < _this.person.length){
    
    
                    const result={
    
     value: _this.person[index],done:false };
                    //下标自增
                    index++;
                    return result;
               
                }else{
    
    
                    return{
    
    value:undefined,done:true}
                }
        }
    };
}
}
for(x of per){
    
    
    console.log(x);
}

四、生成器

1. 生成器函数是ES6提供的一种异步编程解决方案，语法行为与传统函数完全不同。

 //定义生成器函数
function * per() {
    
    
      console.log("我是一个快乐的小per")
}
        //调用
        per().next();

2. 生成器函数可以使用yield:函数代码的分隔符，把函数代码分割成几个板块。

function * per() {
    
    
            console.log('111');
            yield '我是一个快乐的小per'
            console.log('222');
            yield '我是一个伤心的小per'
            console.log('333');
            yield '我是一个小per'
            console.log('444');

        }
        //调用
        let iterator=per();
        iterator.next();//111
        iterator.next();//222
        iterator.next();//333
        iterator.next();//444

遍历来输出yield后面的值

        for(x of per()){
    
    
            console.log(x);
        }

3. 生成器函数的参数传递
   作为上一次的结果返回

function * per(arg) {
    
    
            console.log(arg);

            let one= yield '我是一个快乐的小per'
            console.log(one);

            let two=yield '我是一个伤心的小per'
            console.log(two);


        }
        //执行获取迭代器对象
        let iterator=per('AAA');
        
        console.log( iterator.next());
        //next方法可以传入实参
        console.log( iterator.next('BBB'));
        iterator.next('CCC')
        

四、生成器函数实例

1. 1s后控制台输出111 2s后输出222 3s后输出333
   解决回调地狱的问题

 function one() {
    
    
         setTimeout(function(){
    
    
             console.log("111")
             result.next();
         },1000);
     }
     function two() {
    
    
         setTimeout(function(){
    
    
             console.log("222")
             result.next();
         },2000);
     }
     function three() {
    
    
         setTimeout(function(){
    
    
             console.log("333")
         },3000);
     }
    //定义生成器函数
    function * num(){
    
    
        yield one();
        yield two();
        yield three();
    }
    //调用
    let result=num();
    result.next();

//模拟获取 用户数据 订单数据 商品数据

 function user(){
    
    
            setTimeout(function userNum() {
    
    
                let data="用户数据"
                result.next(data);
            },1000);
        }
        function order(){
    
    
            setTimeout(function orderNum() {
    
    
                let data="订单数据"
                result.next(data);
            },1000);
        }
        function product(){
    
    
            setTimeout(function productNum() {
    
    
                let data="用户数据"
                result.next(data);
            },1000);
        }
        //定义生成器函数
          function * factor(){
    
    
              let users=yield user();
              console.log(users);

              let orders=yield order();
              console.log(orders);

              let products=yield product();
              console.log(products);
          }
          //调用
          let result=factor();
          result.next();