JavaScript中的迭代器和可迭代对象与生成器

目录
  • 1. 什么是迭代器?
    • 1.1 迭代器的基本实现
    • 1.2 迭代器的封装实现
  • 2. 什么是可迭代对象
    • 2.1 原生可迭代对象(JS内置)
      • 2.1.1 部分for of 演示
      • 2.1.2 查看内置的[Symbol.iterator]方法
    • 2.2 可迭代对象的实现
    • 2.3 可迭代对象的应用
    • 2.4 自定义类迭代实现
  • 3. 生成器函数
    • 3.1 生成器函数基本实现
    • 3.2 生成器函数单次执行
    • 3.3 生成器函数多次执行
    • 3.4 生成器函数的分段传参
    • 3.5 生成器代替迭代器
  • 4. 可迭代对象的终极封装
  • 5. 总结
    • 5.1 迭代器对象
    • 5.2 可迭代对象
    • 5.3 生成器函数

1. 什么是迭代器?

概念: 迭代器(iterator),是确使用户可在容器对象(container,例如链表或数组)上遍访的对象[1][2][3],设计人员使用此接口无需关心容器对象的内存分配的实现细节。
JS中的迭代器

  • 其本质就是一个对象,符合迭代器协议(iterator protocol)
  • 迭代器协议

    其对象返回一个next函数

    调用next函数返回一个对象,其对象中包含两个属性

    • done(完成),它的值为布尔类型,也就是true/false

      • 如果这个迭代器没有迭代完成即返回{done:false}
      • 当这个迭代器完成了即返回{done:true}
    • value(值),它可以返回js中的任何值,TS中表示可为:value:any类型

1.1 迭代器的基本实现

思考以下代码:

let index = 0
const bears = ['ice', 'panda', 'grizzly']

let iterator = {
  next() {
    if (index < bears.length) {
      return { done: false, value: bears[index++] }
    }

    return { done: true, value: undefined }
  }
}
console.log(iterator.next()) //{ done: false, value: 'ice' }
console.log(iterator.next()) //{ done: false, value: 'panda' }
console.log(iterator.next()) //{ done: false, value: 'grizzly' }
console.log(iterator.next()) //{ done: true, value: undefined }
  • 是一个对象,实现了next方法,next方法返回了一个对象,有done属性和value属性,且key的值类型也为booleanany,符合迭代器协议,是一个妥妥的迭代器没跑了。
  • 弊端
    • 违背了高内聚思想,明明indexiterator对象是属于一个整体,我却使用了全局变量,从V8引擎的GC,可达性(也就是标记清除)来看,如果bears = null ,不手动设置为null很有可能会造成内存泄漏,并且内聚性低。
    • 假如我要创建一百个迭代器对象呢? 那我就自己定义一百遍吗?肯定错误的,我们要把它封装起来,这样内聚性又高,又能进行复用,一举两得,一石二鸟,真的是very beautiful,very 优雅。

1.2 迭代器的封装实现

思考一下代码:

const bears = ['ice', 'panda', 'grizzly']

function createArrIterator(arr) {
  let index = 0

  let _iterator = {
    next() {
      if (index < arr.length) {
        return { done: false, value: arr[index++] }
      }

      return { done: true, value: undefined }
    }
  }
  return _iterator
}
let iter = createArrIterator(bears)

console.log(iter.next())
console.log(iter.next())
console.log(iter.next())
console.log(iter.next())
  • 内聚性非常高,尽最大可能进行了复用,减少冗余代码

2. 什么是可迭代对象

迭代器对象和可迭代对象是一个不同的东西,虽然它们存在关联,而且面试的时候经常面这些概念,废话不多说,我们直接进入主题。

  • 首先就是一个对象,且符合可迭代对象协议(iterable protocol)
  • 可迭代对象协议

    实现了[Symbol.iterator]为key的方法,且这个方法返回了一个迭代器对象
  • 绕了一大圈终于把概念搞明白了,那可迭代对象有什么好处呢? 有什么应用场景呢?

    for of 的时候,其本质就是调用的这个函数,也就是[Symbol.iterator]为key的方法

2.1 原生可迭代对象(JS内置)

  • String
  • Array
  • Set
  • NodeList 类数组对象
  • Arguments 类数组对象
  • Map

2.1.1 部分for of 演示

let str = 'The Three Bears'

const bears = ['ice', 'panda', 'grizzly']

for( let text of str) {
  console.log(text) //字符串每个遍历打印
}

for( let bear of bears) {
  console.log(bear)
}
 //ice panda grizzly

2.1.2 查看内置的[Symbol.iterator]方法

  • 上面给大家举例了很多可迭代对象,那它们必定是符合可迭代对象协议的,思考以下代码
const bears = ['ice', 'panda', 'grizzly']
//数组的Symbol.iterator方法
const iter = bears[Symbol.iterator]()

console.log(iter.next())
console.log(iter.next())
console.log(iter.next())
console.log(iter.next())

const nickName = 'ice'
//字符串的Symbol.iterator方法
const strIter = nickName[Symbol.iterator]()

console.log(strIter.next())
console.log(strIter.next())
console.log(strIter.next())
console.log(strIter.next())

2.2 可迭代对象的实现

let info = {
  bears: ['ice', 'panda', 'grizzly'],
  [Symbol.iterator]: function() {
    let index = 0
    let _iterator = {
       //这里一定要箭头函数,或者手动保存上层作用域的this
       next: () => {
        if (index < this.bears.length) {
          return { done: false, value: this.bears[index++] }
        }

        return { done: true, value: undefined }
      }
    }

    return _iterator
  }
}

let iter = info[Symbol.iterator]()
console.log(iter.next())
console.log(iter.next())
console.log(iter.next())
console.log(iter.next())

//符合可迭代对象协议 就可以利用 for of 遍历
for (let bear of info) {
  console.log(bear)
}
//ice panda grizzly
  • 符合可迭代对象协议,是一个对象,有[Symbol.iterator]方法,并且这个方法返回了一个迭代器对象。
  • 当我利用for of 遍历,就会自动的调用这个方法。

2.3 可迭代对象的应用

  • for of
  • 展开语法
  • 解构语法
  • promise.all(iterable)
  • promise.race(iterable)
  • Array.from(iterable)
  • ...

2.4 自定义类迭代实现

class myInfo {
  constructor(name, age, friends) {
    this.name = name
    this.age = age
    this.friends = friends
  }

  [Symbol.iterator]() {
    let index = 0

    let _iterator = {
      next: () => {
        const friends = this.friends
        if (index < friends.length) {
          return {done: false, value: friends[index++]}
        }

        return {done: true, value: undefined}
      }
    }

    return _iterator
  }
}
const info = new myInfo('ice', 22, ['panda','grizzly'])

for (let bear of info) {
  console.log(bear)
}
//panda
//grizzly
  • 此案例只是简单的对friends进行了迭代,你也可以迭代你想要的一切东西...
  • 记住此案例,后续我们会对这个案例进行重构,优雅的会让你不能用言语来形容。

3. 生成器函数

生成器是ES6新增的一种可以对函数控制的方案,能灵活的控制函数的暂停执行,继续执行等。

生成器函数和普通函数的不同

  • 定义: 普通函数function定义,生成器函数function*,要在后面加*
  • 生成器函数可以通过 yield 来控制函数的执行
  • 生成器函数返回一个生成器(generator),生成器是一个特殊的迭代器

3.1 生成器函数基本实现

function* bar() {
  console.log('fn run')
}

bar()
  • 我们会发现,这个函数竟然没有执行。我们前面说过,它是一个生成器函数,它的返回值是一个生成器,同时也是一个特殊的迭代器,所以跟普通函数相比,好像暂停了,那如何让他执行呢?接下来我们进一步探讨。

3.2 生成器函数单次执行

function* bar() {
  console.log('fn run')
}

const generator = bar()

console.log(generator.next())
//fn run
//{ value: undefined, done: true }
  • 返回了一个生成器,我们调用next方法就可以让函数执行,并且next方法是有返回值的,我们上面讲迭代器的时候有探讨过,而value没有返回值那就是undefined。那上面说的yield关键字在哪,到底是如何控制函数的呢?是如何用的呢?

3.3 生成器函数多次执行

function* bar() {
  console.log('fn run start')
  yield 100
  console.log('fn run...')
  yield 200
  console.log('fn run end')
  return 300
}

const generator = bar()

//1. 执行到第一个yield,暂停之后,并且把yield的返回值 传入到value中
console.log(generator.next())
//2. 执行到第一个yield,暂停之后,并且把yield的返回值 传入到value中
console.log(generator.next())
//3. 执行剩余代码
console.log(generator.next())

//打印结果:
//fn run start
//{done:false, value: 100}
//fn run...
//{done:false, value: 200}
//fn run end
//{done:true, value: 300}
  • 现在我们恍然大悟,每当调用next方法的时候,代码就会开始执行,执行到yield x,后就会暂停,等待下一次调用next继续往下执行,周而复始,没有了yield关键字,进行最后一次next调用返回done:true

3.4 生成器函数的分段传参

我有一个需求,既然生成器能控制函数分段执行,我要你实现一个分段传参。

思考以下代码:

function* bar(nickName) {
  const str1 = yield nickName
  const str2 = yield str1 + nickName
  return str2 + str1 + nickName
}
const generator = bar('ice')
console.log(generator.next())
console.log(generator.next('panda '))
console.log(generator.next('grizzly '))
console.log(generator.next())

// { value: 'ice', done: false }
// { value: 'panda ice', done: false }
// { value: 'grizzly panda ice', done: true }
// { value: undefined, done: true }
  • 如果没有接触过这样的代码会比较奇怪

    • 当我调用next函数的时候,yield的左侧是可以接受参数的,也并不是所有的next方法的实参都能传递到生成器函数内部
    • yield左侧接收的,是第二次调用next传入的实参,那第一次传入的就没有yield关键字接收,所有只有当我调用bar函数的时候传入。
    • 最后一次next调用,传入的参数我也调用不了,因为没有yield关键字可以接收了。
  • 很多开发者会疑惑,这样写有什么用呢? 可读性还差,但是在处理异步数据的时候就非常有用了,后续会在promise中文章中介绍。

3.5 生成器代替迭代器

前面我们讲到,生成器是一个特殊的迭代器,那生成器必定是可以代替迭代器对象的,思考以下代码。

let bears = ['ice','panda','grizzly']

function* createArrIterator(bears) {
  for (let bear of bears) {
    yield bear
  }
}
const generator = createArrIterator(bears)
console.log(generator.next())
console.log(generator.next())
console.log(generator.next())
console.log(generator.next())

其实这里还有一种语法糖的写法yield*

  • yield* 依次迭代这个可迭代对象,相当于遍历拿出每一项 yield item(伪代码)

思考以下代码:

let bears = ['ice','panda','grizzly']

function* createArrIterator(bears) {
  yield* bears
}
const generator = createArrIterator(bears)
console.log(generator.next())
console.log(generator.next())
console.log(generator.next())
console.log(generator.next())
  • 依次迭代这个可迭代对象,返回每个item值

4. 可迭代对象的终极封装

class myInfo {
  constructor(name, age, friends) {
    this.name = name
    this.age = age
    this.friends = friends
  }
  *[Symbol.iterator]() {
    yield* this.friends
  }
}
const info = new myInfo('ice', 22, ['panda','grizzly'])
for (let bear of info) {
  console.log(bear)
}

//panda
//grizzly
  • 回顾以下可迭代对象协议

    • 是一个对象并且有[Symbol.iterator]方法
    • 这个方法返回一个迭代器对象 生成器函数返回一个生成器,是一个特殊的迭代器

5. 总结

5.1 迭代器对象

  • 本质就是一个对象,要符合迭代器协议
  • 有自己对应的next方法,next方法则返回一组数据{done:boolean, value:any}

5.2 可迭代对象

  • 本质就是对象,要符合可迭代对象协议
  • [Symbol.iterator]方法,并且调用这个方法返回一个迭代器

5.3 生成器函数

  • 可以控制函数的暂停执行和继续执行
  • 通过function* bar() {} 这种形式定义
  • 不会立马执行,而是返回一个生成器,生成器是一个特殊的迭代器对象
  • yield 关键字可以控制函数分段执行
  • 调用返回生成器的next方法进行执行

到此这篇关于JavaScript中的迭代器和可迭代对象与生成器的文章就介绍到这了,更多相关JavaScript迭代器内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2022-09-14

JavaScript可迭代对象详细介绍

目录 1.迭代器 2.迭代器接口与可迭代对象 3.自定义可迭代对象 3.1.可迭代的Range对象 3.2.使用Generator函数作为迭代器接口 3.3.可迭代的List 3.3.可迭代的迭代器 4.可迭代对象的意义 5.使用可迭代对象 6.后记 1.迭代器 迭代器是借鉴C++等语言的概念,迭代器的原理就像指针一样,它指向数据集合中的某个元素,你可以获取它指向的元素,也可以移动它以获取其它元素.迭代器类似于数组中下标的拓展,各种数据结构,如链表(List).集合(Set).映射(Map)都有

JavaScript中的迭代器和生成器详解

处理集合里的每一项是一个非常普通的操作,JavaScript提供了许多方法来迭代一个集合,从简单的for和for each循环到 map(),filter() 和 array comprehensions(数组推导式).在JavaScript 1.7中,迭代器和生成器在JavaScript核心语法中带来了新的迭代机制,而且还提供了定制 for-in 和 for each 循环行为的机制. 迭代器 迭代器是一个每次访问集合序列中一个元素的对象,并跟踪该序列中迭代的当前位置.在JavaScript中

JavaScript前端迭代器Iterator与生成器Generator讲解

目录 Iterator 概念 默认 Iterator 接口 Iterator 的 return() 原生具备 Iterator 接口的数据结构 调用 Iterator 接口的场合 模拟实现 for of Generator 认识 Generator next 方法的参数 yield 表达式 Generator 与 Iterator 之间的关系 Generator.prototype.return() yield* 表达式 Generator 函数的 this Generator 实现一个状态机

JavaScript详解类数组与可迭代对象的实现原理

目录 可迭代对象(Iterable object) Symbol.iterator 把对象本身构造成迭代器 String也是可迭代的 String的迭代器 类数组对象和可迭代对象 Array.from 总结 可迭代对象(Iterable object) 数组是一个特殊的对象,它和普通对象的区别不仅仅在于元素的顺序访问.存储.另外一个重要的区别是:数组是可迭代的,也就是可以使用for ... of语句访问(迭代)所有的元素. 我们可以简单的做一个小实验: let arr = [1,2,3,4,5]

JavaScript迭代器的含义及用法

什么是迭代器 迭代器就是为实现对不同集合进行统一遍历操作的一种机制,只要给需要遍历的数据结构部署Iterator接口,通过调用该接口,或者使用消耗该接口的API实现遍历操作. 迭代器模式 在接触迭代器之前,一起先了解什么是迭代器模式,回想一下我们生活中的事例.我们在参观景区需要买门票的时候,售票员需要做的事情,他会对排队购票的每一个人依次进行售票,对普通成人,对学生,对儿童都依次售票.售票员需要按照一定的规则,一定顺序把参观人员一个不落的售完票,其实这个过程就是遍历,对应的就是计算机设计模式中的

总结javascript中的六种迭代器

1.forEach迭代器 forEach方法接收一个函数作为参数,对数组中每个元素使用这个函数,只调用这个函数,数组本身没有任何变化 //forEach迭代器 function square(num){ document.write(num + ' ' + num*num + '<br>'); } var nums = [1,2,3,4,5,6,7,8]; nums.forEach(square); 在浏览器中输出的结果是: 2.every迭代器 every方法接受一个返回值为布尔类型的函数,

详解JavaScript中的六种错误类型

刚入前端坑,英语又不太好的同学,是不是还在为控制台的错误抓耳挠腮?今天就带大家看一看JavaScript中常见的错误类型. js中的控制台的报错信息主要分为两大类,第一类是语法错误,这一类错误在预解析的过程中如果遇到,就会导致整个js文件都无法执行.另一类错误统称为异常,这一类的错误会导致在错误出现的那一行之后的代码无法执行,但在那一行之前的代码不会受到影响. 1. SyntaxError:语法错误 // 1. Syntax Error: 语法错误 // 1.1 变量名不符合规范 var 1 /

深入探讨javascript中的数据类型

学一门编程语言,无非两方面:一是语法,二是数据类型.类C语言的语法不外乎if.while.for.函数.算术运算等,面向对象的语言再加上object. 语法只是语言设计者预先做的一套规则,不同语言语法不尽相同,但都有一些共通点,对于熟悉一两门编程语言的人,学其他的编程语言时,语法往往不是问题(当然,如果你一直学的是类C语言,那么首次接触lisp时肯定也要花些时间),学习的重点往往是数据类型及其相关操作上,不是有句老话:"数据结构+算法=程序"!其次,有些语言的语法本身就存在设计问题(j

Javascript中的数据类型之旅

虽然Javascript是弱类型语言,但是,它也有自己的几种数据类型,分别是:Number.String.Boolean.Object.Udefined.Null.其中,Object属于复杂数据类型,Object   由无序的键值对组成.其余几种都属于简单数据类型.注意:变量类型首字母大写,而变量值首字母是小写的. JavaScript不支持自定义类型,所以JavaScript中的所有值都属于这六种类型之一. 根据ECMAScript 5.1的规范,javascript中共有六种数据类型,分别为

JavaScript中instanceof与typeof运算符的用法及区别详细解析

JavaScript中的instanceof和typeof常被用来判断一个变量是什么类型的(实例),但它们的使用还是有区别的: typeof 运算符返回一个用来表示表达式的数据类型的字符串. typeof expression ; expression 参数是需要查找类型信息的任意表达式. 说明typeof 是一个一元运算符,放在一个运算数之前. typeof 运算符把类型信息当作字符串返回.typeof 返回值有六种可能: "number" ,"string",

JavaScript中获取纯正的undefined的方法

1.为什么要获取undefined? 因为undefined在javascript中不是保留字,可以被用户当做变量来赋值,这样如果我们后期需要用到undefined来检测一个变量的话,那么检测的值就不准确了: 举个栗子: var undefined=10; function sum(a,b){ if(a===undefined||b===undefined){ console.log("参数不正确"); }18101130357 return a+b; } sum(10,10)->

JavaScript中 ES6 generator数据类型详解

1. generator简介 generator 是ES6引入的新的数据类型, 看上去像一个函数,除了使用return返回, yield可以返回多次. generator 由function* 定义, (注意*号), 2. 示例 函数无法保存状态, 有时需要全局变量来保存数字: 2.1 'use strict'; function next_id(){ var id = 1; while(id<100){ yield id; id++; } return id; } // 测试: var x,

Javascript中判断对象是否为空

发现了一个巧妙的实现: 需要检查一个对象(Object)是否为空,即不包含任何元素.Javascript 中的对象就是一个字典,其中包含了一系列的键值对(Key Value Pair).检查一个对象是否为空,等价于检查对象中有没有键值对.写成代码,形如: if (isEmptyObject(obj)) { // obj is empty } else { // not empty } 至于 isEmptyObject 的实现,jQuery 中有一个很有想法的方式,请看代码: function i

javascript 中的try catch应用总结

javascript 中的try catch应用总结 实例代码: <script language="JavaScript"> try { throw new Error(10,"asdasdasd") } catch (e) { alert(e.message); alert(e.description) alert(e.number) alert(e.name) throw new Error(10,"asdasdasd") }