ES6的迭代器与迭代协议Symbol.iterator

news2024/12/23 19:35:51

前言

ES6新增了两个协议:

可迭代协议:对象必须具有Symbol.Iterator属性,属性值为一个函数,当这个对象被迭代时,就会调用该函数,返回一个迭代器。

迭代器协议:描述了迭代器对象的具体规则。

迭代器

迭代器,它是用于访问集合类的标准访问方法,它可以把访问逻辑从不同类型集合中抽象出来,从而避免向外部暴露集合内部的结构。

比如我们访问一个数组可能使用for循环或者map,foreach,filter等for(int i=0; i<array.size(); i++) { ... get(i) ... }, 但是当我们想要遍历链表(linkedlist)的时候就得使用while循环while((e=e.next())!=null) { ... e.data() ... }, 以上两种方式我们都必须知道集合的内部结构是怎么样的我们才可以使用对应的循环方式去循环整个集合,那么这样就造成了很大的耦合度,当我们把一个集合的类型从Arrarlist变成Linkedlist的时候,那么原来客户端的代码必须重写,因为我们集合变了,遍历的方式也必须改成对应的方式。

在js中,当我们要迭代集合(指数组)的时候,我们利用ES6为Array类增加的迭代器属性(iterator),该属性的值为一个函数,该函数返回一个迭代器对象。而Array类的iterator属性可以通过Symbol.iterator来访问。我们执行这个函数来生成该数组的迭代器。

const arr = ['a','b','c','d']
const arrIterator = arr[Symbol.iterator]();

关于什么是Symbol,可以看本文附录。

我们已经得到了数组的迭代器,如果我们需要依次获得数组中的值,我们需要不断地调用迭代器的next方法。

arrIterator.next();
// {value: 'a', done: false}

可以看见执行next方法后返回了数据对象,value键对应的是数组的元素,done代表的时候迭代器是否已经迭代到了数组长度的最后下标。

当迭代器迭代到数组长度以外之后,返回了{value: undefined, done: true}

我们也可以这么写:

for (const n of arrIterator) {
    console.log(n)
}
// a
// b
// c
// d
// e

总结一下:

  • 在Js中迭代器对象实现了可迭代协议,迭代器对象由Symbol.iterator属性的值返回。

  • Symbol.iterator属性的值是一个函数,它返回一个迭代器对象。

  • 迭代器指的是拥有next方法的对象。

  • 该next方法必须返回一个带有value和done的对象。

除了Symbol.iterator,ES6中另外提供三种获取数组迭代器的方法

var arr = ['a','b','c']

entries

const iterator = arr.entries();
iterator.next(); // {value: [0,'a'], done: false}
...
iterator.next(); // {value: undefined, done: true}

可以看到entries提供的迭代器返回的结构与Symbol.iterator相似。只是value键对应的值是,包含当前迭代的数组元素的下标和值的数组。

keys

const iterator = arr.keys()
iterator.next()
// {value: 0, done: false}
...
iterator.next()
// {value: undefined, done: true}

value值是当前迭代的数组元素的下标。

values

const iterator = arr.values()
undefined
iterator.next()
// {value: 'a', done: false}
...
iterator.next()
// {value: undefined, done: true}

value值是当前迭代的数组元素。

附录-Symbol

Symbol是es6新增的类型,它是一个基本类型。

  • symbol属性值对应的值是唯一的,这解决了命名冲突的问题,类似于id的作用。

  • symbol值不能与其他数据进行计算,包括与字符串拼接。

  • for/in ,for/of遍历时不会遍布symbol属性

我们知道symbol可以作为属性值存在。并且它具有唯一的特性,举个栗子:直接let s = Symbol();测试s就是Symbol类型了。怎么说他是唯一的呢?
let s = Symbol(); let ss = Symbol(); s == ss ; 结果是false;或者
let s = Symbol('a'); let ss = Symbol('a'); s == ss ; 结果是false
有人会好奇Symbol('a')里面的参数a又是怎么回事呢?字符串a表示一种修饰,对你当前创建的Symbol类型的一种修饰,作为区分使用,否则当你创建多个Symbol数据时,容易混淆。
现在我们回过头说Iterotor是symbol的内置符号,而字符串a是自定义的符号。

附录-for of

条件语句,可以理解为JavaScript解释器在源代码中会经过不同分支路径。而循环语句则是把这些路径弯曲又折回起点,以重复执行代码中的某部分。

es6定义了一个新循环语句:for/of。

for of 与 for in不相同 (in输出的是下标,of输出的是元素)

for/of循环是专门用于可迭代对象的,什么是可迭代对象呢?

我们前文提到具有symbol.iterator属性的对象就是可以迭代的。而这个对象就是可迭代对象。

对象本身默认是不可迭代的。运行时尝试对常规对象使用for/of会抛出TypeError:

附录-JS中 可迭代的数据类型

Array

Set

Map

WeakMap

WeakSet

可以使用for of或new Set(传入参数的数据类型)检验

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

ubuntu的文件系统结构

一. ubuntu 系统的根目录“/” Linux 系统下 “/” 就是系统的根目录&#xff0c;所有的目录是由根目录衍生出来的。 进入根目录的方法&#xff1a;终端输入" cd / " 命令。如下所示&#xff1a; 二. ubuntu 文件系统结构 /bin: 存放二进制的可执行文件。所谓…

【项目实战】接入极光推送SDK,实现从Java服务端后台推送自定义消息到Android车机端

一、需求描述 项目中需要接入极光推送SDK&#xff0c;实现从Java服务端推送消息到Android车机端&#xff0c;以下实现的功能主要是安卓端的&#xff0c;IOS端的虽然代码也兼容了&#xff0c;但是不在本次讨论范围内。以下是具体的实现过程。 二、极光推送介绍 极光推送是一款…

《Qt6开发及实例》6-4 显示SVG格式图片

目录 一、简介与设计 1.1 简介 1.2 设计 二、SvgWidget 2.1 鼠标滚轮事件 三、svgwindow 四、MainWindow 一、简介与设计 1.1 简介 1、SVG 的英文全称是 Scalable Vector Graphics&#xff0c;即可缩放的矢量图形。它是由万维网联盟&#xff08;W3C&#xff09;在 200…

什么是循环依赖,spring是如何去解决循环依赖问题的?什么是三级缓存?【spring】

文章目录什么是循环依赖&#xff1f;什么是三级缓存&#xff1f;执行流程什么是循环依赖&#xff1f; 在我们的开发中&#xff0c;会不可避免的遇到Bean之间循环依赖的&#xff0c;所谓循环依赖&#xff0c;就是两个或者两个以上的Bean互相持有对方&#xff0c;这样在程序运行…

几个流畅阅读与标记PDF文件的顶级 PDF 注释器

使用 PDF 注释工具改变您修改 PDF 文档的方式。 PDF 注释器提供了广泛的对象集&#xff0c;用于对内容进行说明。PDF 注释器的目的范围从标记页面内容到添加有洞察力的功能&#xff08;如表单&#xff09;。 您可以在评论表中添加建议&#xff0c;例如 – 便签。注释是指在 P…

【假捻停线需求沟通】

假捻工单上停产按钮: 假捻工单上结批复产按钮: 这是目前MES系统具备的功能,但是MES的生产状态和SAP不同步,也就是说MES的A机台上的B订单还在生产,SAP把B订单结批,但是当你刷新页面时,SAP会取A机台上的最新订单数据,也就是B订单进行显示。 换言之,SAP结批不掉A机台上…

PX4之代码结构

PX4开源飞控是目前主流的开源飞控项目&#xff0c;被很多公司作为飞控开发的参考。也广泛被用于现在流行的evtol验证机的飞控&#xff0c;进行初步的飞行验证。可能大多数AAM以及UAM都离不开PX4。 项目代码可以从github下载 $ git clone --recursive GitHub - PX4/PX4-Autopil…

构建Yocto项目

前言Yocto Project简称YP, 是一个致力于帮助开发者构建自己的Linux嵌入式的项目&#xff0c;除了Yocto还有其它的开源项目例如&#xff1a;Debian&#xff0c;著名的Ubuntu就是基于Debian来构建的发行版。什么是Yocto Project&#xff1f;Yocto Project (YP)是一个开源协作项目…

分类预测 | MATLAB实现WOA-CNN-GRU鲸鱼算法优化卷积门控循环单元数据分类预测

分类预测 | MATLAB实现WOA-CNN-GRU鲸鱼算法优化卷积门控循环单元数据分类预测 目录分类预测 | MATLAB实现WOA-CNN-GRU鲸鱼算法优化卷积门控循环单元数据分类预测分类效果基本描述模型描述程序设计参考资料分类效果 基本描述 1.Matlab实现WOA-CNN-GRU多特征分类预测&#xff0c;…

excel图表设计:有关表头的相关问题汇总

虽然表头很简单&#xff0c;但因为有不同样式需要、不同打印需要&#xff0c;也有很多人在表头上浪费了很多时间。文章总结了8种表头的典型形式和问题&#xff0c;让大家从此不再为表头浪费时间。每个excle表格都有一个表头&#xff0c;适合的表头能够让表格美观、逻辑清晰&…

2023年PMP考试内容有哪些?怎么备考?

PMP考试也叫项目管理专业人士资格认证&#xff0c;要想参加2023年PMP考试&#xff0c;考生还需先对PMP考试内容提前进行了解&#xff0c;那么2023年PMP考试内容有哪些呢&#xff1f;我们先看下官方公告&#xff1a;大白话说就是虽然2023年PMBOK第七版就要在大陆地区正式投入使用…

Android项目如何将同一套代码应用于多个项目(变种打包)

如果你的公司开发了一个项目&#xff0c;但是这个项目应用于不同的客户&#xff0c;根据客户的不同要求&#xff0c;会改动一些东西&#xff0c;之前我们的做法是直接将这套代码复制出来&#xff0c;替换logo,applicationId,以及一些基本配置&#xff08;如baseurl,等配置&…

vue3.2中使用swiper缩略图轮播教程

介绍 在vue3 中使用 swiper 实现缩略图的轮播图效果,具体如下图所示: 使用 切换到项目终端 ,输入命令 npm install swiper --save , 进行安装在 main.js里,引入 swiper.css并使用,具体代码如下;import {createApp } from vue import App from ./App.vue import router…

微信公众号抽奖怎么做_分享微信抽奖小程序制作的好处

在H5游戏中&#xff0c;抽奖是最受消费者喜爱的模式之一。将H5微信抽奖活动结合到营销中&#xff0c;可以带来意想不到的效果&#xff0c;带流量和曝光率&#xff0c;所以许多企业也会在做活动时添加上不同类型的H5微信抽奖活动。编辑那么&#xff0c;新手怎么搭建微信抽奖活动…

前端二面react面试题集锦

react diff 算法 我们知道React会维护两个虚拟DOM&#xff0c;那么是如何来比较&#xff0c;如何来判断&#xff0c;做出最优的解呢&#xff1f;这就用到了diff算法 diff算法的作用 计算出Virtual DOM中真正变化的部分&#xff0c;并只针对该部分进行原生DOM操作&#xff0c;而…

学成在线项目笔记

业务层开发 DAO开发示例 生成实体类对应的mapper和xml文件 定义MybatisPlusConfig&#xff0c;用于扫描mapper和配置分页拦截器 MapperScan("com.xuecheng.content.mapper") Configuration public class MybatisPlusConfig {Beanpublic MybatisPlusInterceptor myb…

Datawhale团队第九期录取名单!

Datawhale团队 公示&#xff1a;Datawhale团队成员Datawhale成立四年了&#xff0c;从一开始的12个人&#xff0c;学习互助&#xff0c;到提议成立开源组织&#xff0c;做更多开源的事情&#xff0c;帮助更多学习者&#xff0c;也促使我们更好地成长。于是有了我们的使命&#…

【Spring Boot 原理分析】- 自动配置

【Spring Boot 原理分析】- 自动配置 Condition 注解 Condition 是 Spring 4.0 增加的条件判断功能&#xff0c;通过这个功能可以实现选择的创建 Bean 操作 &#x1f451; 我们在使用 Spring 的时候&#xff0c;只需导入某个依赖的坐标&#xff0c;就可以直接通过 Autwired 注…

零基础小白如何学会数据分析?

随着数字经济、大数据时代的发展&#xff0c;数据已然成为当下时代最重要的盈利资源&#xff0c;让企业在做决策和计划方案时更有针对性和依据&#xff0c;能提前预测市场发展方向&#xff0c;做好布局。由此而产生的数据分析岗位也逐渐被更多企业重视&#xff0c;特别是中大型…

社招中级前端笔试面试题总结

HTTP世界全览 互联网上绝大部分资源都使用 HTTP 协议传输&#xff1b;浏览器是 HTTP 协议里的请求方&#xff0c;即 User Agent&#xff1b;服务器是 HTTP 协议里的应答方&#xff0c;常用的有 Apache 和 Nginx&#xff1b;CDN 位于浏览器和服务器之间&#xff0c;主要起到缓存…