js 迭代器iterator 和 生成器Generator 10 (待补充)


一、迭代器 iterator

迭代器:是一个对象,帮助我们对某个数据结构进行遍历

  • 迭代器要符合迭代器协议,必须要有一个特定的next方法,返回一个对象,里面包括两个属性:done和value。done为false时,说明下面没有可迭代的了,value是任何js值

迭代器的代码

const friend =['1','2','3']

let index =0
const friendIterator = {
  next:function (){
    if(index<friend.length){
      return { done:false,value:friend[index++]}
    }else{
      return { done:true,value:undefined}
    }
  }
}
console.log(friendIterator.next())
  • 写迭代器的好处是什么呢? 其实 for of 操作时是不能迭代对象的,或者说对象不是可迭代的
  • 但是我们可以自己写个迭代器,让不可迭代对象变成可迭代的

二、可迭代对象 @@interator

可迭代对象: 当这个对象实现@interator 方法,在代码对象中我们可以使用Symbol.iterator
好处: 当一个对象变成可迭代对象时,可以进行某些迭代操作

可迭代对象的代码

const info = {
  friend : ['1','2','3'],
  [Symbol.iterator]:function (){
    let index =0
    return {
      next:function (){
        if(index<friend.length){
          return { done:false,value:friend[index++]}
        }else{
          return { done:true,value:undefined}
        }
      }
    }
  }
}

可迭代对象的应用

  1. js 语法: for of 、展开语法、 yield* 、结构赋值
  2. 创造一些对象时: new Map 、 newWeakMap、 new Set 、 newWeakSet
  3. 一些方法的调用: promise (all , race ) 、 array.form
  4. 自定义类

三、 生成器

  1. 生成器是ES6中新增的一种函数控制、使用的方案,它可以让我们更加灵活的控制函数什么时候继续执行、暂停执行等。
  2. 平时我们会编写很多的函数,这些函数终止的条件通常是返回值或者发生了异常

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

  1. 首先,生成器函数需要在function的后面加一个符号:*
  2. 其次,生成器函数可以通过yield关键字来控制函数的执行流程:
  3. 最后,生成器函数的返回值是一个Generator(生成器):
  4. 生成器事实上是一种特殊的迭代器

生成器代码

function* foo() {
  console.log('函数开始执行了')
  const value1 = 100
  yield value1

  const value2 = 200
  yield value2

  const value3 = 300
  yield value3

  console.log('函数执行完毕')
}



const generator = foo()

// 执行到第一个并暂停执行
console.log(generator.next())
// 执行到第二个并暂停执行
console.log(generator.next())
// 执行到第三个并暂停执行
console.log(generator.next())
// 执行剩余代码
console.log(generator.next())
  • 会发现foo函数并不是立即执行,而是会返回一个生成器对象,通过next 控制执行

生成器传递参数 – next函数

  • 我们在调用next函数的时候,可以给它传递参数,那么这个参数会作为上一个yield语句的返回值
  • 也就是说我们是为本次的函数代码块执行提供了一个值
function* foo(initial) {
   console.log("函数开始执行~")
   const valuel = yield initial + "aaa"
   const value2 = yield valuel + "bbb"
   const value3 = yield value2 + "ccc"
}
const generator = foo("why")
const result1 = generator.next()
console.log("result1:", result1)
const result2 = generator.next(result1.value)
console.log("result2:",result2)
const result3 = generator.next(result2.value)
console.log("result3:",result3)
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
迭代器生成器JavaScript 中非常重要的概念,常在面试中涉及。迭代器Iterator)是一种对象,它提供了一种顺序访问集合中各个元素的方法,而不暴露集合的内部结构。生成器Generator)是一种特殊类型的函数,可以暂停执行并返回中间结果。 1. 迭代器Iterator): - 迭代器是一个拥有 `next()` 方法的对象。 - `next()` 方法返回一个包含 `value` 和 `done` 属性的对象。 - `value` 表示当前迭代到的元素的值。 - `done` 表示迭代是否已经结束。 以下是一个简单的示例,展示如何使用迭代器遍历数组: ```javascript const arr = [1, 2, 3]; const iterator = arr[Symbol.iterator](); console.log(iterator.next()); // { value: 1, done: false } console.log(iterator.next()); // { value: 2, done: false } console.log(iterator.next()); // { value: 3, done: false } console.log(iterator.next()); // { value: undefined, done: true } ``` 2. 生成器Generator): - 生成器是一种特殊类型的函数,使用 `function*` 声明,内部可以使用 `yield` 关键字。 - `yield` 关键字用于暂停生成器函数的执行,并返回一个中间结果。 - 每次调用生成器函数时,会返回一个迭代器对象,通过调用 `next()` 方法可以继续执行生成器函数。 以下是一个简单的示例,展示如何使用生成器函数生成斐波那契数列: ```javascript function* fibonacci() { let a = 0; let b = 1; while (true) { yield a; [a, b] = [b, a + b]; } } const fib = fibonacci(); console.log(fib.next().value); // 0 console.log(fib.next().value); // 1 console.log(fib.next().value); // 1 console.log(fib.next().value); // 2 ``` 希望以上概念和示例能够帮助你在面试中更好地理解和回答相关问题!如果你有更多疑问,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值