ES6躬行记(18)——迭代器
ES6将迭代器和生成器内置到语言中,不仅简化了数据处理和集合操作,还弥补了for、while等普通循环的不足,例如难以遍历无穷集合或自定义的树结构等。
迭代器(Iterator)是一种用于迭代的对象,可有序的依次访问集合中的数据项。ES6制订了一套标准化的迭代器接口(包含3个方法,如表11所列),只要实现了这套接口都能成为迭代器。
表11 迭代器接口
| 方法 | 返回值 | 描述 |
| next() | IteratorResult | 必选,获取下一个迭代器结果 |
| return() | IteratorResult | 可选,停止迭代并返回一个迭代器结果 |
| throw() | IteratorResult | 可选,抛出错误并返回一个迭代器结果 |
上表中的IteratorResult也叫迭代器结果,是一个特定形式的对象,它必须包含两个属性:value和done。value属性就是集合成员的值,done属性是一个布尔值,用于标记当前迭代是否结束。下面是一个简单的迭代器示例。
function createIterator(items) {
var index = 0;
return {
next() {
var done = index >= items.length;
return { value: items[index++], done: done };
}
};
}
var iterator = createIterator(["a", "b"]);
iterator.next(); //{value: "a", done: false}
iterator.next(); //{value: "b", done: false}
iterator.next(); //{value: undefined, done: true}
当迭代结束时,done属性的值将会是true,而value属性在未提供返回值的时候就会设为undefined。
一、可迭代对象
包含Symbol.iterator属性的对象被称为可迭代对象(Iterable),Symbol.iterator是一个特殊的内置符号(详见第6篇),它的值是一个返回迭代器的方法。ES6内置了多种可迭代对象,例如集合(Array、TypedArray、Set和Map)、类数组对象(Arguments和NodeList)、字符串等,它们都含有各自默认的迭代器。下面的示例使用了数组的默认迭代器,通过next()方法依次遍历了它所包含的元素,返回结果与上一个示例类似。
var arr = ["a", "b"],
iterator = arr[Symbol.iterator]();
iterator.next(); //{value: "a", done: false}
iterator.next(); //{value: "b", done: false}
iterator.next(); //{value: undefined, done: true}
可迭代对象的应用场景在前面的章节中已陆续介绍过,例如第2篇的扩展运算符、第3篇的解构赋值和第12篇的Array.from()方法等。在接下来的章节中,还会将可迭代对象应用于for-of循环和yield*。
二、for-of
这是ES6新增的一种循环语句,当要遍历一个可迭代对象时,会先通过它的Symbol.iterator属性得到默认迭代器,再调用迭代器的next()方法,读取IteratorResult的value属性的值并赋给for-of语句中声明的变量,如此反复,直到done属性为ture时才终止遍历。而和其它循环语句一样,for-of循环也能通过跳转语句return、break和continue提前终止。下面分别对Set和Map两种数据结构进行for-of循环。
var set = new Set(["strick", 28]),
map = new Map([["name", "strick"], ["age", 28]]);
/********************
"strick"
28
********************/
for (var value of set) {
console.log(value);
}
/********************
"name" "strick"
"age" 28
********************/
for (var [key, value] of map) {
console.log(key, value);
}
在前文中曾多次提到过3个迭代器方法,根据上面代码的输出结果可知,Set和Map的默认迭代器分别通过values()和entries()方法获得。
三、字符串
字符串虽然是基础类型,但它能被隐式的封装成String对象,而String含有默认迭代器,因此可以进行for-of循环。在第9篇字符串中曾提到过,JavaScript采用了UTF-16编码的Unicode字符集,在BMP中的字符可用一个编码单元表示,而在辅助平面中的字符则需要两个编码单元。以“向”和“
ES6躬行记(18)——迭代器的更多相关文章
- ES6躬行记 笔记
ES6躬行记(18)--迭代器 要实现以下接口## next() ,return,throw 可以用for-of保证迭代对象的正确性 例如 var str = "向
- ES6躬行记(1)——let和const
古语云:“纸上得来终觉浅,绝知此事要躬行”.的确,不管看了多少本书,如果自己不实践,那么就很难领会其中的精髓.自己研读过许多ES6相关的书籍和资料,平时工作中也会用到,但在用到时经常需要上搜索引擎中查 ...
- ES6躬行记(19)——生成器
根据ES6制订的标准自定义迭代器实现起来比较复杂,因此ES6又引入了生成器的概念,生成器(Generator)是一个能直接创建并返回迭代器的特殊函数,可将其赋给可迭代对象的Symbol.iterato ...
- ES6躬行记(21)——类的继承
ES6的继承依然是基于原型的继承,但语法更为简洁清晰.通过一个extends关键字,就能描述两个类之间的继承关系(如下代码所示),在此关键字之前的Man是子类(即派生类),而在其之后的People是父 ...
- ES6躬行记(20)——类
ES6正式将类(Class)的概念在语法层面标准化,今后不必再用构造函数模拟类的行为.而ES6引入的类本质上只是个语法糖(即代码更为简洁.语义更为清晰),其大部分功能(例如继承.封装和复用等)均可在E ...
- ES6躬行记(16)——Set
ES6引入了两种新的数据结构:Set和Map.Set是一组值的集合,其中值不能重复:Map(也叫字典)是一组键值对的集合,其中键不能重复.Set和Map都由哈希表(Hash Table)实现,并可按添 ...
- ES6躬行记(13)——类型化数组
类型化数组(Typed Array)是一种处理二进制数据的特殊数组,它可像C语言那样直接操纵字节,不过得先用ArrayBuffer对象创建数组缓冲区(Array Buffer),再映射到指定格式的视图 ...
- ES6躬行记(12)——数组
ES6为数组添加了多个新方法,既对它的功能进行了强化,也消除了容易产生歧义的语法. 一.静态方法 1)of() ES6为Array对象新增的第一个静态方法是of(),用于创建数组,它能接收任意个参数, ...
- ES6躬行记(3)——解构
解构(destructuring)是一种赋值语法,可从数组中提取元素或从对象中提取属性,将其值赋给对应的变量或另一个对象的属性.解构地目的是简化提取数据的过程,增强代码的可读性.有两种解构语法,分别是 ...
随机推荐
- python 迭代器,生成器
在 python 中我们常用 for in 来遍历 list, set, dict, str 等. for in 的本质就干了两件事: 调用 __iter__() 获取迭代器; 调用 next() 直 ...
- box-shadow 画叮当猫
值 描述 h-shadow 必需.水平阴影的位置.允许负值 v-shadow 必需.垂直阴影的位置.允许负值 blur 可选.模糊距离 spread 可选.阴影的尺寸 color 可选.阴影的颜色.请 ...
- svn idea 修改文件,文件不变色
删除后,重新添加. 我这里是什么也没有选择,选上Subversion后,保存,再修改文件,文件颜色就变了 Settings-->Version Control
- Tomcat7在centos7.3上正常运行,在centos7.2就不行了
我在jdk1.7的环境下,把一个tomcat7从一台centos7.3的服务器迁移到7.2,理论上讲 迁移完成之后只要端口没有被占用,环境变量配置完成,Tomcat是可以正常启动的(空的Tomcat ...
- HTML入门13
构建表格 使用colspan和rowspan添加无单位的数字值作为属性来实现行合并和列合并: <col>来定义列的样式,每一个<col>都会制定每列的样式,对于不需要指定列的样 ...
- 201771010118 马昕璐 《面向对象程序设计(java)》第十三周学习总结
第一部分:理论知识学习部分 事件处理基础 1.事件源(event source):能够产生事件的对象都可以成为事件源.一个事件源是一个能够注册监听器并向监听器发送事件对象的对象. 2.事件监听器(ev ...
- Windows下编译jcef
依赖软件参考 本文参考官方网站上的jcef编译过程 编译成功的环境如下: windows 10 64 bit JDK 1.8.0_121 64 bit Python 2.7.13 git versio ...
- vue命名视图实现经典布局
vue命名视图实现经典布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- framework7 入门(数据绑定)
数据绑定是用template7,官网,framework7内置template7,不用单独下载,下面介绍一些简单的绑定 当你的数据是个数组 return{ data:function(){ let i ...
- Javascript——浅谈 Event Flow
1.Javascript Events : Event Bubbling(事件冒泡) 如果事件从最特定的元素开始,则事件流中的一个阶段称为事件冒泡(DOM中可能最深的节点)然后向上流向最不特定的节点( ...