js生成器,迭代器和可迭代对象详解

1.生成器函数和生成器

生成器函数是可以返回一个可迭代对象的特殊函数,

生成器是一个特殊的迭代器,

在js中可以使用function*来定义一个非连续执行的函数作为迭代算法,

function* name() {
   yield value;
   yield value;
   yield value;
}

name: 函数名
value:迭代的值
  • function*:定义一个生成器函数
  • yield:定义迭代对象的值

         最初调用生成器函数时,生成器函数不执行任何代码,而是返回一种称为生成器特殊迭代器。通过调用 next() 方法消耗该生成器时,生成器函数将执行,直至遇到 yield 关键字。

 迭代遍历一个生成器

// 生成器函数
function* generateNumbers() {
  yield 1;
  yield 2;
  yield 3;
  for (let i = 4; i < 10; i++) {
    yield i;
  }
}

// 生成器
let iterator = generateNumbers();

while (true) {
  let { value, done } = iterator.next();
  if (done) {
    break;
  }
  console.log(value);
}

console.log(iterator);

成功将生成器中yield的值全部迭代遍历出来,这是使用了迭代器的next()方法,而生成器是一个特殊的迭代器,

2.迭代器

在 JavaScript 中,迭代器(iterator)是一个对象,它拥有一个next方法,next方法会返回一个对象,对象中包括了两个属性:done,value

  • done: 当迭代器对象中没有值可以跌打时为true,否则为false
  • value: 当前迭代的值,

 迭代器通过调用next方法向后读取值,并返回到value属性中,这样就实现了迭代算法逻辑

迭代器的特性

从结果上看,迭代器和数组的作用差不多,都能遍历一串数据,但是和数组不同,

迭代器往往是不知道长度的,迭代遍历时,只有done属性为true时才会停止,

数组是已知长度的,当一个数组被引用时,内存中就需要划分出足够的空间来存放,

而迭代器只需要提供当前值的空间即可,所以一个数组时有限长度的,而一个迭代器的值可以取0 和 infinity(无穷大) 之间的整数范围

3.可迭代对象

在实际的运用中,可迭代对象发挥了迭代器的特性,可以用来遍历一组数据,这组数据可以非常巨大(长度),使用迭代器则可以很轻松的慢慢读出数据(用实际换空间),

在js中,可迭代对象都拥有一个[Symbol.iterator]属性,它是一个函数,返回一个迭代器,迭代器中包括了可迭代对象的所有值,

常见的可迭代对象

包括了:数组,集合,映射,弱集合,弱映射,字符串  以及其他一些类数组对象(domlist,argument...)

// 可迭代的对象 数组,集合,映射,弱集合,弱映射,字符串  以及其他类数组对象
let arr = new Array(1, 2, 3, 4, 5);
let set = new Set([1, 2, 3, 2, 1, 2]);
let map = new Map([['name', 'John'], [{ type: 'obj' }, 'object']])
let wSet = new WeakSet([{ name: 'John' }, { age: 30 }]);
let wMap = new WeakMap([[{ name: 'John' }, 'person'], [{ age: 30 }, 'person']])
let str = new String('Hello World')

let div = document.querySelectorAll('div');
function fn() {
  return arguments;
}

// 它们原型对象上都存在[symbol.iterator]()方法, arr[Symbol.iterator]().next()
fn()[Symbol.iterator]().next().value

它们原型对象上都存在[symbol.iterator]()方法,  例如,arr[Symbol.iterator]().next(),

[symbol.iterator]是一个Symbol值,关于Symbol可以参考:js基本类型---symbol标识符_jis中symbol是什么意思-CSDN博客

symbol类型是独一无二的,使用symbol作为原型属性,可以防止属性被覆盖修改

注意:普通对象不是可迭代对象,它没有[symbol.iterator]()方法

扩展运算符(...)和for of

扩展运算符可以展开一个数组,并把值全部返回出来,

for of可以遍历数组的值

这些都是基于可迭代对象的[symbol.iterator]()方法,也就是说,其他可迭代对象也可以使用扩展运算符和for of,这也是普通对象不能使用for of的原因,普通对象不是一个可迭代对象

console.log(...arr)
console.log(...set)
console.log(...map)
console.log(...fn(1,2))

for(let value of arr){
  console.log(value);
}

for(let value of set){
  console.log(value);
}

for(let value of map){
  console.log(value);
}

for(let value of fn(1,2)){
  console.log(value);
}

重写[symbol.iterator]()方法

既然判断一个可迭代对象的方式是看这个对象有没有[symbol.iterator]()方法,那么可以给普通对象加上一个[symbol.iterator]()方法,使其成为一个可迭代对象

let obj = {
  value: 0,
  max: 10,
  [Symbol.iterator]() {
    return {
      max: this.max,  
      value: this.value,
      next() {
        if (this.value == this.max) {
          return {
            value: undefined,
            done: true
          }
        } else {
          return {
            value: this.value++,
            done: false
          }
        }
      }
    }
  }
}

根据[symbol.iterator]()的逻辑,它会返回一个对象,这个对象有next方法,next方法会返回一个包含value和done属性的对象,

那么这个obj对象就相当于一个存放了0到9的一个可迭代对象


for(let value of obj){
  console.log(value);
}

console.log(...obj);

那么这样就可以对它执行for of 遍历和扩展运算

所以扩展运算符(...)和for of都是基于[symbol.iterator]()方法实现的,

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/769194.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

基于YOLOv5的人脸目标检测

本文是在之前的基于yolov5的人脸关键点检测项目上扩展来的。因为人脸目标检测的效果将直接影响到人脸关键点检测的效果&#xff0c;因此本文主要讲解利用yolov5训练人脸目标检测(关键点检测可以看我人脸关键点检测文章) 基于yolov5的人脸关键点检测&#xff1a;人脸关键点检测…

ROS学习笔记(18):建图与定位(2)

0.前言 上文提到现在的我们已经进入到了SLAM领域的学习&#xff0c;会涉及到大量专业知识&#xff0c;作为一个自学的大三&#xff08;好吧也快大四了&#xff09;萌新并不能保证每次文章的专业性和准确性&#xff0c;所以&#xff0c;本人推荐大家能自己去查阅一些相关书籍和…

TOB传输、承载网拓扑图

1、用户面&#xff1a;GNODEB>UPE>SPE>NPE>UPF>CMNET网 2、控制面&#xff1a;GNODEB>UPE>SPE>NPE>IP承载网>核心网

充分利用智慧校园人事系统,提升党政职务管理

智慧校园人事系统中的党政职务管理功能&#xff0c;是专为高校及教育机构设计的&#xff0c;旨在高效、精确地处理与党政职务相关的各类事务&#xff0c;包括职务任命、任期管理、职责分配、考核评估等&#xff0c;以信息化手段促进党务及行政工作的透明化、规范化。 该模块首先…

redis主从复制哨兵模式集群管理

主从复制&#xff1a; 主从复制是高可用Redis的基础&#xff0c;哨兵和集群都是在主从复制基础上实现高可用的。主从复制主要实现了数据的多机备份&#xff0c;以及对于读操作的负载均衡和简单的故障恢复。缺陷&#xff1a;故障恢复无法自动化&#xff1b;写操作无法负载均衡&…

像学Excel 一样学 Pandas系列-创建数据分析维度

嗨&#xff0c;小伙伴们。又到喜闻乐见的Python 数据分析王牌库 Pandas 的学习时间。按照数据分析处理过程&#xff0c;这次轮到了新增维度的部分了。 老样子&#xff0c;我们先来回忆一下&#xff0c;一个完整数据分析的过程&#xff0c;包含哪些部分内容。 其中&#xff0c…

好久不见!写了一个自动截图神器~【附源码】

文章目录 前言新增功能介绍截图功能快捷键设置 程序设计和使用介绍操作菜单栏选择点击坐标点选择图片选择截图区域快捷键设置 表格循环次数状态栏 使用案例源代码 前言 好久没更新文章了。上一次更新是在4月16日差不多&#xff0c;也只是写了一个错误集&#xff0c;没什么太多…

【Python机器学习】模型评估与改进——在模型选择中使用评估指标

我们通常希望&#xff0c;在使用GridSearchCV或cross_val_score进行模型选择时能够使用AUC等指标。scikit-learn提供了一种非常简单的实现方法&#xff0c;那就是scoring参数&#xff0c;它可以同时用于GridSearchCV和cross_val_score。你只需要提供一个字符串&#xff0c;用于…

基于Vue的MOBA类游戏攻略分享平台

你好呀&#xff0c;我是计算机学姐码农小野&#xff01;如果有相关需求&#xff0c;可以私信联系我。 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;Java技术、SpringBoot框架、B/S模式、Vue.js 工具&#xff1a;MyEclipse、MySQL 系统展示 首页 用…

大模型技术在辅助学习中的应用

大模型技术在辅助学习中的应用场景非常广泛&#xff0c;以下是一些典型示例。大模型技术在辅助学习中具有广阔的应用前景&#xff0c;可以为学生提供更加个性化、智能化和高效的学习体验。随着大模型技术的不断发展&#xff0c;我们可以期待在未来看到更多创新应用。北京木奇移…

免费最好用的证件照制作软件,一键换底+老照片修复+图片动漫化,吊打付费!

这款软件真的是阿星用过的&#xff0c;最好用的证件照制作软件&#xff0c;没有之一&#xff01; 我是阿星&#xff0c;今天要给大家安利一款超实用的证件照工具&#xff0c;一键换底&#xff0c;自动排版&#xff0c;免费无广告&#xff0c;让你在家就能轻松搞定证件照&#…

强化学习的数学原理:最优贝尔曼公式

大纲 贝尔曼最优公式是贝尔曼公式的一个特殊情况&#xff0c;但其也非常重要。 本节课很重要的两个概念和一个工具&#xff1a; 工具不用多说&#xff0c;就是贝尔曼最优公式&#xff0c;概念则是 optimal state value&#xff08;最优状态价值&#xff09; 和 optimal polic…

Django开发实战(1)- 认识django

1.django 使用MTV模式&#xff0c;其实与MVC本质一样&#xff1a; model&#xff1a;业务对象和关系映射&#xff08;ORM&#xff09; template&#xff1a;客户端页面展示 view&#xff1a;业务逻辑&#xff0c;根据需求调用 2.开发相关 √ python √ html&…

鸿蒙数据防泄漏(DLP)【Data Loss Prevention Kit开发指导】

Data Loss Prevention Kit开发指导 DLP是系统提供的系统级的数据防泄漏解决方案&#xff0c;提供一种称为DLP的文件格式。后缀格式为“原始文件名&#xff08;包含原始文件后缀&#xff09;.dlp”&#xff0c;例如: “test.docx.dlp”&#xff0c;文件由授权凭证和原始文件密文…

8款你不一定知道的良心软件!

AI视频生成&#xff1a;小说文案智能分镜智能识别角色和场景批量Ai绘图自动配音添加音乐一键合成视频https://aitools.jurilu.com/我们使用一些流行的软件的时候&#xff0c;往往会忽略一些功能非常强大的软件&#xff0c;因为这些软件的众 多&#xff0c;都因为看不见而丢失&a…

【ACM出版-EI稳检索】第三届金融创新、金融科技与信息技术国际学术会议(FFIT 2024,7月26-28)

第三届金融创新、科技与信息技术国际学术会议&#xff08;FFIT 2024&#xff09;将于2024年07月26-28日于重庆举行。 FFIT2024 将围绕“金融创新”、"金融科技”与“信息技术”等相关最新研究领域&#xff0c;为来自国内外高等院校、科学研究所、企事业单位的专家、教授、…

Vue3Echarts写关于温湿度统计的好看折线图

在项目统计界面&#xff0c;我们离不开对Echarts的使用&#xff0c;接下来是我在做项目过程中做的一个关于温湿度统计的好看折线图&#xff0c;统计的是温度蓝色和湿度绿色&#xff0c;它们还会有告警和断电&#xff0c;分别用橘黄色和红色区分&#xff0c;以下是示例&#xff…

CesiumJS【Basic】- #056 绘制纹理填充多边形(Entity方式)-使用shader

文章目录 绘制纹理填充多边形(Entity方式)-使用shader1 目标2 代码2.1 main.ts绘制纹理填充多边形(Entity方式)-使用shader 1 目标 使用Entity方式绘制绘制纹理填充多边形 - 使用shader 2 代码 2.1 main.ts import * as Cesium from cesium;const viewer = new Cesium…

Linux系统中交叉编译opencv库

目标&#xff1a;将opencv进行交叉编译&#xff0c;使其能在rk3326板子上运行使用。 环境&#xff1a; ubuntu&#xff1a;18.04 opencv:4.5.4 opencv源码从挂网下载&#xff1a;opencv源码下载地址 交叉编译链&#xff1a;gcc-arm-10.3-linux-gun 一.环境准备 1.交叉编译链我…

【RT摩拳擦掌】如何构建RT AVB switchendpoint平台

【RT摩拳擦掌】如何构建RT AVB switch&endpoint平台 一&#xff0c;文档简介二&#xff0c;平台构建2.1 软硬件情况2.2 配置RT1170 AVB端点2.2.1 1块MIMXRT1170开发板做talker配置2.2.2 2块MIMXRT1170开发板做listener配置 2.3 AVB Switch 配置2.3.1 MOTU AVB Switch2.3.2 …