每天3分钟,重学ES6-ES12(十二)不常用但却常问的迭代器

简介: 每天3分钟,重学ES6-ES12(十二)不常用但却常问的迭代器

19c2e7a9bfbb7f5e8c7d744db995e29.png

每天3分钟,重学ES6-ES12文章汇总

前言

今天开始和大家一起系统的学习ES6+,每天3分钟,用一把斗地主的时间,重学ES6+,前面我们介绍了Promsis的提出背景和用法,以及相关api, 下面我们再来学习一下Iterator-Generator。

什么是迭代器 Iterator

  • 迭代器(iterator),是确使用户可在容器对象(container,例如链表或数组)上遍访的对象,使用该接口无需关心对象的内部实现细节。
  • 其行为像数据库中的光标,迭代器最早出现在1974年设计的CLU编程语言中;
  • 在各种编程语言的实现中,迭代器的实现方式各不相同,但是基本都有迭代器,比如Java、Python等;
  • 从迭代器的定义我们可以看出来,迭代器是帮助我们对某个数据结构进行遍历的对象。
  • 在JavaScript中,迭代器也是一个具体的对象,这个对象需要符合迭代器协议(iterator protocol):
  • 迭代器协议定义了产生一系列值(无论是有限还是无限个)的标准方式;
  • 那么在js中这个标准就是一个特定的next方法;
  • next方法有如下的要求:
  • 一个无参数或者一个参数的函数,返回一个应当拥有以下两个属性的对象:
  • done(boolean)
  • 如果迭代器可以产生序列中的下一个值,则为 false。(这等价于没有指定 done 这个属性。)
  • 如果迭代器已将序列迭代完毕,则为 true。这种情况下,value 是可选的,如果它依然存在,即为迭代结束之后的默认返回值。
  • value
  • 迭代器返回的任何 JavaScript 值。done 为 true 时可省略

一句话总结

帮助我们对某个数据结构进行遍历的对象

什么是可迭代对象

  • 可迭代对象 是一个对象,符合迭代器协议,是必须实现 @@iterator 方法,代码中我们使用Symbol.iterator访问该属性
  • 当一个对象变成一个可迭代对象的时候,进行某些迭代操作,比如 for...of 操作
  • for of 可以遍历一个可迭代对象 for of 是一个语法糖,获取的是迭代器的next

代码演示

  • 下面的代码中 创建一个迭代器对象来访问数组names
  • iterableObj对象就是一个可迭代对象
// 创建一个迭代器对象来访问数组
const iterableObj = { 
    names: ['1','2','3'], //[]可计算属性 
    [Symbol.iterator]:function (){ 
        let index = 0 
        return { 
          next: ()=>{ 
            if(index<this.names.length){ 
              return { 
                done:false,
                value:this.names[index++]
              } 
            }else{ 
              return { 
                done:true,
                value:undefined
              } 
            } 
         } 
      } 
   } 
} 
//iterableObj[Symbol.iterator] 就是一个可迭代对象
console.log(iterableObj[Symbol.iterator]) 
//调用iterableObj[Symbol.iterator]函数
const iterator = iterableObj[Symbol.iterator]() 
console.log(iterator.next())
console.log(iterator.next())
console.log(iterator.next())
console.log(iterator.next())
// {done: false, value: '1'}
// {done: false, value: '2'}
// {done: false, value: '3'}
// {done: true, value: undefined}
for (const item of iterableObj) {
  console.log(item)
}
// 1 2 3
// for of 可以遍历一个可迭代对象 
// for of 就是一个与语法糖,获取的是迭代器的next

原生可迭代器对象

  • 事实上我们平时创建的很多原生对象已经实现了可迭代协议,会生成一个迭代器对象的:
  • String、Array、Map、Set、arguments对象、NodeList集合;
  • for of 方法直接遍历
  • 都有[Symbol.iterator]属性

可迭代对象的应用

  • for of 扩展操作符 数组的解构
  • 创建一些其他对象new Map([Iterable])、new WeakMap([iterable])、new Set([iterable])、new WeakSet([iterable]);
  • Promise.all(iterableObj) 接受一个可迭代对象

自定义类的迭代

创建一个classroom的类

  • 教室中有自己的位置、名称、当前教室的学生;
  • 这个教室可以进来新学生(push);
  • 创建的教室对象是可迭代对象;

代码演示

// 案例: 创建一个教室类, 创建出来的对象都是可迭代对象
class Classroom {
  constructor(address, name, students) {
    this.address = address
    this.name = name
    this.students = students
  }
  entry(newStudent) {
    this.students.push(newStudent)
  }
  [Symbol.iterator]() {
    let index = 0
    return {
      next: () => {
        if (index < this.students.length) {
          return { done: false, value: this.students[index++] }
        } else {
          return { done: true, value: undefined }
        }
      },
      return: () => {
        console.log("迭代器提前终止了~")
        return { done: true, value: undefined }
      }
    }
  }
}
const classroom = new Classroom("3幢5楼205", "计算机教室", ["james", "kobe", "curry", "why"])
classroom.entry("lilei")
for (const stu of classroom) {
  console.log(stu)
  if (stu === "why") break
}
// kobe
// curry
// why
// 迭代器提前终止了~

迭代器的中断

  • 迭代器在某些情况下会在没有完全迭代的情况下中断:
  • 比如遍历的过程中通过break、continue、return、throw中断了循环操作;
  • 比如在解构的时候,没有解构所有的值;
  • 那么这个时候我们想要监听中断的话,可以添加return方法

1686837376843.jpg

总结

今天介绍了迭代器 可迭代对象 明天继续介绍生成器,生成器函数

相关文章
|
存储 安全 Windows
徒手帮 process explorer 找回丢失的进程列
徒手帮 process explorer 找回丢失的进程列
|
定位技术 API 开发者
地图:nuxt3高德地图简单使用
地图:nuxt3高德地图简单使用
674 0
|
Windows
windows 技巧篇-解除共享文件夹占用方法,解决共享文件被占用导致不可修改问题,查看共享文件被谁占用方法
windows 技巧篇-解除共享文件夹占用方法,解决共享文件被占用导致不可修改问题,查看共享文件被谁占用方法
2293 0
windows 技巧篇-解除共享文件夹占用方法,解决共享文件被占用导致不可修改问题,查看共享文件被谁占用方法
|
7月前
|
机器学习/深度学习 存储 人工智能
Satori:快速体验MIT与哈佛推出7B参数的推理专家模型,具备自回归搜索和自我纠错能力
Satori 是由 MIT 和哈佛大学等机构联合推出的 7B 参数大型语言模型,专注于提升推理能力,具备强大的自回归搜索和自我纠错功能。
149 5
|
Java jenkins 持续交付
jenkins学习笔记之十七:使用插件及maven上传制品到nexus
jenkins学习笔记之十七:使用插件及maven上传制品到nexus
|
12月前
|
边缘计算 5G SDN
控制与用户平面分离 (CUPS): 5G 网络架构的革命性变革
控制与用户平面分离 (CUPS): 5G 网络架构的革命性变革
630 2
|
11月前
|
数据可视化 开发者 索引
详解Wireshark LUA插件函数:function p_myproto.dissector(buffer, pinfo, tree)
在 Wireshark 中,LUA 插件通过 `function p_myproto.dissector(buffer, pinfo, tree)` 扩展协议解析能力,解析自定义应用层协议。参数 `buffer` 是 `PacketBuffer` 类型,表示原始数据包内容;`pinfo` 是 `ProtoInfo` 类型,包含数据包元信息(如 IP 地址、协议类型等);`tree` 是
466 1
|
Java API
详细探究Java多线程的线程状态变化
Java多线程的线程状态主要有六种:新建(NEW)、可运行(RUNNABLE)、阻塞(BLOCKED)、等待(WAITING)、超时等待(TIMED_WAITING)和终止(TERMINATED)。线程创建后处于NEW状态,调用start()后进入RUNNABLE状态,表示准备好运行。当线程获得CPU资源,开始执行run()方法时,它处于运行状态。线程可以因等待锁或调用sleep()等方法进入BLOCKED或等待状态。线程完成任务或发生异常后,会进入TERMINATED状态。
21400 5
|
前端开发 小程序 PHP
分享81个PHP源码,总有一款适合您
分享81个PHP源码,总有一款适合您
262 1
|
SQL 存储 前端开发
JAVA中怎样实现树形菜单
在这篇文章中,作者介绍了如何用两种方法实现目录树数据结构。首先,定义了目录结构在实际开发中的作用,即后端向前端返回整理好的数据,类似书目录的形式。接着,作者逐步讲解了实现目录树的步骤,包括创建数据表、插入数据、创建对象类以及编写逻辑代码。在逻辑代码部分,提供了两种写法,一种适合新手理解,另一种简洁但可能对初学者较难。每种写法都包含了获取数据、转换数据、构建树结构和获取顶层节点的过程。最后,展示了实现后的目录树结构数据。
226 2