ES2015 Iterable（可迭代的）接口

最新推荐文章于 2022-03-29 17:27:45 发布
最新推荐文章于 2022-03-29 17:27:45 发布
阅读量407 收藏
点赞数
分类专栏： ES2015
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luyu13141314/article/details/109900561
版权
本文介绍了ES2015引入Iterable接口的原因，旨在为不同数据结构提供统一的遍历方式。详细阐述了for…of的内部原理，通过实例解析了iterator方法和next方法在迭代过程中的作用。并逐步指导如何实现可迭代接口，包括对象的三层结构：自定义对象、iterator方法返回的迭代器对象以及next方法返回的迭代结果对象。最后，通过测试验证了可迭代接口的正确实现。
摘要由CSDN通过智能技术生成

一、为什么ES2015提供Iterable（可迭代的）接口

ES中能够表示有结构的数据类型越来越多，以前有数组、对象等等，ES2015中新增了Map和Set对象…

为了给各种各样的数据结构提供统一遍历方式，ES2015提供了Iterable（可迭代的）接口

接口的概念：可以理解为一种规格标准

例如在ES中，任意一种数据类型都有toString()方法，这是因为他们都实现了统一的规格标准，即他们都实现了统一的接口

实现Iterable接口就是for…of的前提

二、了解for…of 的内部原理

在控制台打印数组、Set、Map这三个可以直接用for…in 遍历的对象

可以发现他们的原型对象当中都有一个以Symbol开头的属性，叫做iterator：
在这里插入图片描述

通过观察我们大概可以猜到

Iterable接口约定的就是对象当中必须要去挂载一个叫做iterator的方法

iterator方法是干什么的呢?

我们定义一个数组arr，手动调用一下它的iterator方法

它返回的是数组的迭代器对象，展开发现，对象里面有一个next方法
在这里插入图片描述

我们先定义一个变量来接收返回的迭代器对象，然后手动调用一下它的next方法
在这里插入图片描述

从上可以发现，在这个迭代器当中，内部维护了一个数据指针，每调用一次next()，这个指针都会往后移一位。done属性的作用是标识里面的数据是否被遍历完了。

为什么for … of 能作为遍历所有数据结构的统一方式？

因为它内部就是去调用被遍历对象的iterable方法得到一个迭代器，从而去遍历内部所有的数据。

只要对象也实现了iterable 接口，那我们就可以实现使用for…of 遍历对象

三、实现可迭代接口 Iterable

在ECMAScript中实现可迭代接口：在对象中挂一个iterator方法，在这个方法中返回一个迭代器对象

// 实现可迭代接口 Iterable
const obj
最低0.47元/天 解锁文章
喝着绿茶的猫
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ES2015 实现可迭代接口与迭代器模式
大叔的私享课
07-24 235
for…of 循环 在 ECMAScript 中遍历数据有很多中方法，首先是最基本的 for 循环，它比较适用于变量普通的数组，然后就是 for...in 循环，它比较适合于遍历键值对，再有就是一些对象的遍历方法，比如数组的 forEach() 方法。这些各种各样的遍历数据的方式都会有一定的局限性，所以 ECMAScript2015 借鉴了很多其他语言引入了一种全新的 for...of 循环，这种循环方式作为遍历所有数据结构的统一方式。换句话说，只要明白 for…of 内部工作的原理就可以使用这种循环去遍历
ES2015 迭代器模式 Iterator
路遇惊喜
11-22 299
设计模式：迭代器模式 一、实现迭代器的目的是干什么呢？ // 迭代器设计模式 // 场景：你和我协同开发一个任务清单应用 // 我的代码 ========= const todoList = { life:['吃饭','睡觉','撸猫'], study:['语文','数学','英语'] } // 你的代码 ========= for (const item of todoList.life) { console.log(item); } for (const item
可迭代接口 Iterable
qq_36204204的博客
10-14 139
Iterable分析 const obj = { [Symbol.iterator]: function(){ return{ next: function(){ return{ value: 'jack', done: true } } } } } 1.最外层对象实现
Iterable接口
彬
04-02 3651
第1部分 Iterable介绍
ES6新特性---可迭代接口、迭代器模式、生成器、生成器应用
吾将上下而求索
06-09 247
可迭代接口 随着ES中有结构的数据类型越来越多，提供了一种能被for…of…遍历数据结构的标准。 实现可迭代接口Iterable接口就是for…of…的前提。只要实现了该接口，就能被for…of…遍历访问。 所以内部必须要去挂载一个iterator方法，方法需要返回一个带有next()方法的对象，不断调用这个方法就能实现遍历。 实现可迭代接口 以上述代码为例， 一共包含了三层对象，第一层就是选中的部分，我们自定义的这个对象，这个对象实现了可迭代接口（iterable），这个接口的约定就是内部必须要有一个
JavaScript&ES6——可迭代对象与扩展运算符
又更新代码的博客
03-02 1076
文章目录一、可迭代对象是什么？二、各迭代方法的区别1. for in 迭代方法2. for..of迭代方法和foreach迭代方法三、扩展运算符的使用总结 一、可迭代对象是什么？ 可迭代对象包括：Array、Set、Map、Arguments、String、Typed Array、Generators这7类。而Object类型不是可迭代对象。 其主要原因在于这7类对象是线性结构，且其构造函数的原型对象中具有[Symbol.iterator]迭代器，而Object是非线性结构，不具有迭代器。 可迭代对象可
Python 操作 ElasticSearch的完整代码
09-18
Python操作ElasticSearch是通过官方提供的`elasticsearch`库实现的，这个库为Python开发者提供了一个方便的接口来与ElasticSearch服务器进行交互。在开始之前，你需要确保已经正确安装了`elasticsearch`库，可以通过...
学习笔记-ES2015--22-03-05（Symbol,for...of...,Iterator,generator,getter setter,ES2016,ES2017）
musjum的博客
03-05 594
1.Symbol symbol是一种新基本类型;最主要的作用是定义独一无二的属性名，也可以借助这种特性，保护私有变量，因为外界无法生成一摸一样的symbol 所以访问不到 ； 如果想要复用这个Symbol 可以使用静态方法Symbol.for(value: string)；全局会有注册表记录这个字符串与symbol的对应关系 所以如果传入的值非字符串 会被转化为字符串； Symbol属性无法被for.in和Object.keys() 等获取到，同样在js...
ES2015新特性
mxydl2009的博客
06-28 732
ECMAScript概述 JavaScript = ECMAScript + 运行环境的API 其中，运行环境包括浏览器和Node环境 ES2015（ES6来泛指ES2015之后的新标准）新特性 解决原有用语法上的不足 let、const与块级作用域 let、const声明的变量只在{}包裹的块级作用域内有效 // 将会打印出三次foo; for(let i = 0; i < 3; i ++) { let i = 'foo'; console.log(i); } // 这段代码相当于如下
【JS】迭代器和迭代接口
ccuucc的博客
03-29 970
关于迭代器和迭代接口的浅见
对es中的iterable的理解
kuke_kuke的博客
04-21 422
iterable 为了统一集合类型，ES6标准引入了新的iterable类型，Array、Map和Set都属于iterable类型，具有iterable类型的集合可以通过for…of循环来遍历 var a = ['A', 'B', 'C']; var s = new Set(['A', 'B', 'C']); var m = new Map([[1, 'x'], [2, 'y'], [3, 'z'...
Java数据结构与算法之数据结构-逻辑结构-集合(三)------集合之Iterable接口
复制乔布斯
10-10 467
这篇博文将在前两篇博文的基础上继续深入学习Java数据结构中的集合部分知识点。这篇博文学习的重点是Java中的Iterable接口。 一、 Java中的Iterable接口特点： 1、接口Iterable的API文档描述。 Java8的API中的Iterable接口的描述如下: 图1: 从接口的描述可以清晰的了解到，这个接口基本是一个顶层的接口，在其下有很多继承了I
聊聊Elasticsearch的Iterables
weixin_33738982的博客
06-06 211
为什么80%的码农都做不了架构师？>>> ...
从 for..of 到 iterable 迭代接口
JAN_LIGHT的博客
07-28 252
for…of循环     在了解for…of循环之前，我们先来回顾一下es6之前的遍历方式。     for循环多用来遍历普通的数组。     for...in多用来遍历键值对。     再有呢是一些对象的遍历方法，例如数组对象的forEach方法。     这些各种各样的遍历方法，都有他们的局限性，es6借鉴
ES6中的新特性:Iterables和iterators
程序那些事
03-21 4568
为了方便集合数据的遍历，在ES6中引入了一个iteration的概念。为我们提供了更加方便的数据遍历的手段。 一起来学习一下吧。
ES6新特性 Iterator和for..of循环
wuyujin1997的博客
04-12 779
Iterator Iterator是ES6引入的一种新的遍历机制，迭代器有两个核心概念： 迭代器是一个统一的借口，他的作用是使各种数据结构可被便捷地访问。 迭代器是通过一个键位Symbol.iterator的方法来实现。 迭代器是用于遍历数据结构元素的指针(类似于数据库中的游标cursor)。 迭代过程 获取迭代器(指向当前数据结构的起始位置)。 通过Symbol.iterator...
es6 扩展运算符 三个点（...）
热门推荐
现在学习也不晚
11-29 27万+
1  含义扩展运算符（ spread ）是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。console.log(...[1, 2, 3]) // 1 2 3 console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5 [...document.querySelectorAll('div')] // [&lt;div&gt;, &...
整合Elasticsearch实现商品搜索
liuerchong的博客
10-21 685
整合Elasticsearch实现商品搜索 本文主要讲解mall整合Elasticsearch的过程，以实现商品信息在Elasticsearch中的导入、查询、修改、删除为例。 项目使用框架介绍 Elasticsearch Elasticsearch 是一个分布式、可扩展、实时的搜索与数据分析引擎。 它能从项目一开始就赋予你的数据以搜索、分析和探索的能力，可用于实现全文搜索和实时数据统计。 Elasticsearch的安装和使用 下载Elasticsearch6.2.2的zip包，并解压
Iterable接口与Iterator接口
最新发布
07-14
Iterable接口和Iterator接口是Java集合框架中的两个重要接口。...总结起来，Iterable接口用于标识一个类是可迭代对象，Iterator接口用于遍历可迭代对象中的元素。它们是Java集合框架中实现迭代功能的重要接口。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值