ES6之遍历器 iterator && generator

本文深入探讨了JavaScript中迭代器和生成器的工作原理。详细介绍了如何使用迭代器遍历数组和对象,并通过实例展示了生成器函数如何实现复杂的迭代逻辑。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

工作机制
  • 创建一个指针对象,指向数组的初始位置
  • 调用next方法,对数组逐个进行遍历
  • 遍历结果的返回值是一个对象,这个对象中包含两个属性,value和done
  • 当遍历没有结束,对象返回的结果为:{value: 当前遍历对象的下标, done: false}
  • 遍历结束以后,对象返回的结果为:{value: undefined, done: true}
  • 结束后,不对此时的value值进行处理

function makeIterator(arr) {
  let nextIndex = 0;
  return {
    next:function () {
      return (nextIndex < arr.length 
        ? {value:arr[nextIndex++],done:false}
        :{value:undefined,done:true})
    }
  }
}

let arr = [1,2,3,5];
let iteratorObj = makeIterator(arr);
console.log(iteratorObj.next());  //{value: 1, done: false}
console.log(iteratorObj.next());  //{value: 2, done: false}
console.log(iteratorObj.next());  //{value: 3, done: false}
console.log(iteratorObj.next());  //{value: 5, done: false}
console.log(iteratorObj.next());  //{value: undefined, done: true},以后都是这个结果
console.log(iteratorObj.next());  //{value: undefined, done: true}

iterator模拟遍历对象

function iteratorMaker() {
// this的指向就是调用的对象
    console.log(this)
//  保存this
    let that = this;
    let index = 0;

//  如果这个iterator遍历器遍历的对象是数组      //由于数组中存在Symbol,所以这段代码可以去掉
    if(that instanceof Array){
//  返回一个对象
      return {
//  调用next方法
        next: function () {
//  返回这个对象相应的value,done属性的值
          return index < that.length ? {value:that[index++],done:false}:{value:that[index++],done:true};
        }
      }
    }


//   如果是对象
    else {

/*    调用Object.keys()方法,
说明:Object.keys()方法遍历对象的属性名,返回的是一个数组
例如:
 let obj = {id:1,age:2};
 let key = Object.keys(obj);
 console.log(key);  // ["id", "age"]
* 
* */
* 
      let keys = Object.keys(that);
      return {
        next:function () {
          return index < keys.length ? {value:that[keys[index++]],done:false}:{value:that[keys[index++]],done:true};
        }
      }
    }
  }

// 验证数组
//  将Array的prototype中的Symbol.iterator方法指向改变,指向iteratorMaker
  Array.prototype[Symbol.iterator]=iteratorMaker;
  let arr=[1,2,3,55];
  for(var i of arr){
    console.log(i);
  }
    console.log(arr);

// 验证对象
//  给Object的prototype添加Symbol.iterator方法为 iteratorMaker
  Object.prototype[Symbol.iterator] = iteratorMaker;
  let obj = {id:1,age:2};
  for (var item of obj){
    console.log(item)
  }
  console.log(obj);`

generator遍历器

工作机制
  • 调用next函数,遇到yield时暂停,接着调用next,遇到yield时暂停
  • 终点 {value: undefined, done: true}

    function* generatorTest() {
      console.log('函数开始执行')
      yield  '1';
      console.log('函数再次执行')
      yield  '2';
    }
//    生成遍历器对象
    let G = generatorTest();
//    执行函数,遇到yield后暂停
    console.log(G);  //{value: "1", done: false}
//    再次执行函数,遇到yield后暂停
    let result = G.next();  //{value: "2", done: false}
    console.log(result);
    result = G.next();  //{value: undefined, done: true}
    console.log(result);
    result = G.next();   //{value: undefined, done: true}
    console.log(result);
    result = G.next();
    console.log(result);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值