高下相倾,前后相随——iterator 与 for ... of 循环
iterator 是es6新提供的一种遍历器。本质上是一个接口,为各种不同的数据结构,提供统一的访问机制。
数据只要部署了iterator接口,便是可遍历的数据,标志是具有Symbol.iterator属性。换句话说,我们只要给数据部署这个属性,就可以将数据变为可遍历的数据。具体表现是数据能否用for...of 遍历。
原生具有iterator接口的数据类型:set, map, nodeList,string, arguments。这些数据类型是可以用for...of 遍历的。
// 数组的Symbol.iterator
let arr = [1,2,4,65];
let iter = arr[Symbol.iterator]();
console.log(iter.next())
// 一个对象如果要具备可被for of 循环调用的Iterator接口,就必须在Symbol.iterator的属性上部署遍历器生成的方法
class RangeIterator {
constructor(start, stop){
this.value = start;
this.stop = stop;
}
[Symbol.iterator](){return this}
next () {
let value = this.value;
if (value < this.stop) {
this.value ++ ;
return {done: false, value: value}
} else {
return {done: true, value: undefined}
}
}
}
function range(start, stop) {
return new RangeIterator(start, stop)
}
for (let v of range(0, 3)) {
// console.log(v)
} // 遍历器实现指针结构的例子
function obj(value) {
this.value = value;
this.next = null;
}
obj.prototype[Symbol.iterator] = function () {
let iterator = {next: next};
let current = this;
function next() {
if (current) {
let value = current.value;
current = current.next;
return {done: false, value: value};
} else {
return {done: true}
}
}
return iterator;
}
let one = new obj(1);
let two = new obj(2);
let three = new obj(3);
one.text = two;
two.next = three;
for (let i of one) {
console.log(i)
}
// 对于类数组的对象(存在键值名和length属性),部署iterator接口,有一个简单的方法,就是Symbol.iterator 方法直接引用数组的Iterator接口
NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
// 或者
NodeList.prototype[Symbol.iterator] = [][Symbol.iterator];
// 默认调用iterator的场合
/*
* 解构赋值
* 扩展运算符
* yield*
* 数组的遍历会调用遍历器的接口,所以任何接受数组为参数的场合,都会调用遍历器接口
*
* */
// 字符串的iterator 接口
let str = 'adf';
let str_iterator = str[Symbol.iterator]();
console.log(str_iterator.next(), str_iterator.next(), str_iterator.next())
高下相倾,前后相随——iterator 与 for ... of 循环的更多相关文章
- java中的Iterator与增强for循环的效率比较
最近在优化代码时遇到了这个问题:Iterator与增强for循环到底哪个效率高?之前在学习的时候,好像记着老师说过遍历集合(如list)时,使用iterator好像正规一些,因为是专用的,但是运行效率 ...
- 14 Iterator和for...of循环
Iterator和for...of循环 首先 Iterator 是一个接口. 标准是 function makeIterator(array) { var nextIndex = 0; return ...
- ES6 之 Set数据结构和Map数据结构 Iterator和for...of循环
ECMAScript 6 入门 Set数据结构 基本用法 ES6提供了新的数据结构Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set本身是一个构造函数,用来生成Set数据结构. va ...
- es6笔记(6) Iterator 和 for...of循环
概要 js中的数组.对象,加上ES6中增加的Map.Set四种数据集合. Iterator提供了一种机制,为各种不同的数据结构提供统一的访问机制.任何数据结构只要部署Iterator接口,就可以完成遍 ...
- 14.Iterator 和 for...of 循环
Iterator 和 for...of 循环 Iterator 和 for...of 循环 Iterator(遍历器)的概念 JavaScript 原有的表示"集合"的数据结构,主 ...
- ES6的新特性(14)——Iterator 和 for...of 循环
Iterator 和 for...of 循环 Iterator(遍历器)的概念 JavaScript 原有的表示“集合”的数据结构,主要是数组(Array)和对象(Object),ES6 又添加了Ma ...
- Iterator和for...of循环
Iterator和for...of循环 Iterator(遍历器)的概念 数据结构的默认Iterator接口 调用Iterator接口的场合 字符串的Iterator接口 Iterator接口与Gen ...
- ES6(Iterator 和 for...of 循环)
Iterator 和 for...of 循环 1.什么是 Iterator 接口 Iterator 接口功能:用一种相同办法的接口让不同的数据结构得到统一的读取命令的方式 2.Iterator的基本用 ...
- 用vue.js学习es6(六):Iterator和for...of循环
一.Iterator (遍历器)的概念: 遍历器(Iterator)就是这样一种机制.它是一种接口,为各种不同的数据结构提供统一的访问机制.任何数据结构只 要部署Iterator接口,就可以完成遍历操 ...
随机推荐
- webpack安装入门
这两天心血来潮,突然想研究下webpack,花了一天时间,看网上有很多教程,不过发现安装的都是比较老的版本.后来发现还是我太年轻了,找技术播客还不如找官方网站.下面是一个webpack的官方网站,里面 ...
- Vmware虚拟机不能使用键盘的解决方法
有个笔记本thinkpad T440要重装系统,但又怕前面的资料丢失,因此打算直接将整个物理机迁移到VCenter 6.5上去,比GHOST什么的方便多了,利用Vmware Convert工具直接在线 ...
- mysql-proxy实现读写分离
其中Amoeba for MySQL也是实现读写分离 环境描述:操作系统:CentOS6.5 32位主服务器Master:192.168.179.146从服务器Slave:192.168.179.14 ...
- Linux下的/etc/hosts文件
在Unix系统下面有一个/etc/hosts文件,在我的Mac上,这个文件的内容如下: ## # Host Database # # localhost is used to configure th ...
- 【Spring系列】Spring mvc整合druid
一.pom.xml中添加druid依赖 <!-- druid --> <dependency> <groupId>com.alibaba</groupId&g ...
- QT5.8 for embedded
http://doc.qt.io/qt-5/embedded-linux.html 先占座~
- C语言——第一次作业
**学习内容总结** 本周进行了算法的初步学习,用计算机的思维方式去思考问题,并学习了如何用传统程序框图表示算法. 相关内容: 1.算法是用来解决问题的方法与步骤. 2.计算机擅长重复,常用枚举的方法 ...
- Linux安装mongodb总结
由于自己的博客上线部署时需要用到mongodb来存储图片文件,所以先在本地电脑上安装了mongodb做测试,由于之前没接触过mongodb,所以安装过程中遇到了各种小问题,折腾了好久终于安装好并成功启 ...
- xShell终端下中文乱码问题
今天,可能是因为不小心中途打断了xShell更新,结果打开xShell发现里面的中文全成了乱码.于是去网上查了一下原因. 更新xshell(xshell5)以及其他终端中文乱码的原因无非有三种 (1 ...
- 从PRISM开始学WPF(四)Prism-Module?
从PRISM开始学WPF(一)WPF? 从PRISM开始学WPF(二)Prism? 从PRISM开始学WPF(三)Prism-Region? 从PRISM开始学WPF(四)Prism-Module? ...