【简介】

遍历器/迭代器。任何数据结构只要部署 Iterator 接口,就可以完成遍历操作。这种数据结构是“可遍历的”(iterable)。

如何判断是否可遍历?

 typeof target[Symbol.iterator] // function

【作用】

  1. 为各种数据结构,提供一个统一的、简便的访问接口;

  2. 使得数据结构的成员能够按某种次序排列;

  3. ES6 创造了一种新的遍历命令for...of 循环,Iterator 接口主要供for...of消费。

【遍历】

const colors = ["red", "green", "blue"]
for (var i = 0, len = colors.length; i < len; i++) {
console.log(colors[i])
}
  1. 追踪下标位置,
  2. 判断循环何时停止。

自定义 iterator

function createIterator(items) {
var i = 0
return {
next: function () {
var done = (i >= items.length)
var value = !done ? items[i++] : undefined
return {
done: done,
value: value,
}
}
}
} var iterator = createIterator([1, 2, 3])
console.log(iterator.next())
console.log(iterator.next())
console.log(iterator.next())
console.log(iterator.next())

Iterator 的遍历过程:

1、创建一个指针对象,指向当前数据结构的起始位置。也就是说,遍历器对象本质上,就是一个指针对象。

2、第一次调用指针对象的next方法,可以将指针指向数据结构的第一个成员。

3、不断调用指针对象的next方法,直到它指向数据结构的结束位置。

虽然是比 for 循环简单了些,但手动写个 iterator 太麻烦了,所以ES6 推出 generator ,方便创建 iterator。也就是说,generator 就是一个返回值为 iterator 的函数。

【generator 和 iterator】

function* createIterator() {
yield 1
yield 2
yield 3
} let iterator = createIterator()
console.log(iterator.next().value)
console.log(iterator.next().value)
console.log(iterator.next().value)

Generator:ES6 提供的一种异步编程解决方案。

执行 Generator 函数会返回一个 iterator 对象,通过这个对象可以依次遍历 Generator 函数内部的每一个状态。

【for…of 和 iterator】

const colors = ["red", "green", "blue"];
for (let color of colors) {
console.log(color);
}

当使用for…of循环遍历某种数据结构时,该循环会自动去寻找 Iterator 接口,并调用Symbol.iterator方法,返回该对象的默认遍历器。

for…of循环可以使用的范围包括数组、Set 和 Map、类似数组对象(arguments、DOM NodeList、 Generator、字符串)。

【内置的 iterator】

ES6 的有些数据结构原生具备 Iterator 接口(比如数组),即不用任何处理,就可以被 for…of 循环遍历。

原因在于,这些数据结构原生部署了Symbol.iterator属性,另外一些数据结构没有(比如对象)。

凡是部署了Symbol.iterator属性的数据结构,就称为部署了遍历器接口。调用这个接口,就会返回一个遍历器对象。

原生具备 Iterator 接口的数据结构如下。

Array、Map、Set、String、arguments 、NodeList

// Array iterator
const heros = ['Tony', 'Steve', 'Natasha', 'Banner', 'Thor']
for (const hero of heros) {
console.log(hero)
} // Map iterator
const sex = 'male'
const userMap = new Map([
['name', 'Stark'],
[48, 'age' ],
['gender', sex]
]) for (let entry of userMap.entries()) {
console.log(entry)
} for (let key of userMap.keys()) {
console.log(key)
} for (let value of userMap.values()) {
console.log(value)
} const numberSet = new Set([1, 2, 2, 3, 4, 4, 5])
for (let entry of numberSet.entries()) {
console.log(entry)
} for (let key of numberSet.keys()) {
console.log(key)
} for (let value of numberSet.values()) {
console.log(value)
} // String iterator
const str = 'ca

ES6 中的 iterator的更多相关文章

  1. 理解ES6中的Iterator

    一.为什么使用Iterator 我们知道,在ES6中新增了很多的特性,包括Map,Set等新的数据结构,算上数组和对象已经有四种数据集合了,就像数组可以使用forEach,对象可以使用for...in ...

  2. 浅析ES6中的iterator

    1.iterator迭代器必须保证其遍历终止条件可控,否则会形成死循环demo: //会用到iterator接口的场合 //1.for...of循环 //2. ...解构表达式 const obj = ...

  3. 【前端】【javascript】es6中的遍历器接口Iterator

    好久没发文章啦-.-为了证明我还活着,我决定从笔记里面抓一篇还算不乱比较像文章的发出来... 这些笔记是我在学es6的时候断断续续记录的,最近会一份一份整理陆陆续续发出来,顺便也自己再看一遍.我学习e ...

  4. ES6中的迭代器(Iterator)和生成器(Generator)

    前面的话 用循环语句迭代数据时,必须要初始化一个变量来记录每一次迭代在数据集合中的位置,而在许多编程语言中,已经开始通过程序化的方式用迭代器对象返回迭代过程中集合的每一个元素 迭代器的使用可以极大地简 ...

  5. ES6中的迭代器(Iterator)和生成器(Generator)(一)

    用循环语句迭代数据时,必须要初始化一个变量来记录每一次迭代在数据集合中的位置,而在许多编程语言中,已经开始通过程序化的方式用迭代器对象返回迭代过程中集合的每一个元素 迭代器的使用可以极大地简化数据操作 ...

  6. ES6中的迭代器(Iterator)和生成器(Generator)(二)

    一.内建迭代器 迭代器是ES6的一个重要组成部分,在ES6中,已经默认为许多内建类型提供了内建迭代器,只有当这些内建迭代器无法实现目标时才需要自己创建.通常来说当定义自己的对象和类时才会遇到这种情况, ...

  7. ES6入门之Iterator和for...of

    Iterator遍历器 遍历器(Iterator)就是这样一种机制.它是一种接口,为各种不同的数据结构提供统一的访问机制.任何数据结构只要部署Iterator接口,就可以完成遍历操作(即依次处理该数据 ...

  8. ES6中的Symbol类型

    前面的话 ES5中包含5种原始类型:字符串.数字.布尔值.null和undefined.ES6引入了第6种原始类型——Symbol ES5的对象属性名都是字符串,很容易造成属性名冲突.比如,使用了一个 ...

  9. ES6中的Set和Map集合

    前面的话 在ES6标准制定以前,由于可选的集合类型有限,数组使用的又是数值型索引,因而经常被用于创建队列和栈.如果需要使用非数值型索引,就会用非数组对象创建所需的数据结构,而这就是Set集合与Map集 ...

随机推荐

  1. java缓存系统

    第一版 package cache; import java.util.HashMap; import java.util.Map; public class Cache1 { private Map ...

  2. PCMM(人力资源能力成熟度模型)V2.0中英对照版发布

    PCMM中英版终于发布 时光荏苒,从当初的回眸到如今的回头,这才发现:坚守一份承诺是多么的不易! 一年多了,这份承载殷切期待的作品--<PCMM(人力资源能力成熟度模型)V2.0 (中英文对照版 ...

  3. RTMPdump 使用说明

    RTMPDump v2.4 2012-07-24RTMPDUMP(1) 名称 rtmpdump - (RTMP流媒体客户端)RTMP streaming media client 使用参数 rtmpd ...

  4. charles抓取https请求包

    说明: 用charles抓取https请求,会出现SSL Proxying disabled in Proxy Settings这样的提示,如下图.要通过charles抓取数据,还需要进行一些简单的设 ...

  5. iOS中获取本地通讯录联系人以及汉字首字母排序

    iOS中获取手机通讯录中的联系人信息: /*** 加载本地联系人*/ - (void)loadLocalContacts { //新建一个通讯录类 ABAddressBookRef addressBo ...

  6. 【44】java大数值剖析

    基本的整数和浮点型精度不能满足需求,那么可以使用java.math中的两个类:BigInteger和BigDecimal. BigInteger和BigDecimal介绍: 这两个类可以处理包含任意长 ...

  7. 如何在os x或ubuntu下安装最新的ruby

    os x下基本上可以安装到比较新的ruby,首先先安装rvm,然后用rvm list known看当前可供安装的ruby的版本,不过这也不是绝对的,比如在我的os x 10.9上,命令返回如下: # ...

  8. android DialogFragment 实现Dialog展示扫二维码图片展示

    近期开发项目,做个按钮点击弹出展示微信二维码关注微信公众号的展示框,于是想到DialogFragment,期间对Dialog的title的底框字体颜色做出相关设置,记录如下: 下面是 DialogFr ...

  9. kubernetes-dashboard(1.8.3)部署与踩坑

    Kubernetes Dashboard 是一个管理Kubernetes集群的全功能Web界面,旨在以UI的方式完全替代命令行工具(kubectl 等). 目录 部署 创建用户 集成Heapster ...

  10. html5中新增的属性和删除的属性

    一.表单新增的属性 1.对input(type="text").select.textarea与button元素指定autofocus属性,它以指定属性的方式让元素在画面打开时自动 ...