高下相倾,前后相随——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接口,就可以完成遍历操 ...
随机推荐
- MySQL——delete 和 truncate 以及 drop 区别
delete 和 truncate 以及 drop 区别 (个人理解,如有错误,请指出) delete < truncate < drop 删除方式: truncate 只删除数据.逐条 ...
- 仿vue实现简易版mvvm双向绑定
项目地址:https://github.com/pangyongsheng/mvvm 1. 指令 vm-bind 单选数据绑定- 将数据显示到标签视图 vm-model : 双向数据绑定 vm-sho ...
- C++模板入门教程(一)——模板概念与基本语法
转载请保留以下声明 作者:赵宗晟 出处:http://www.cnblogs.com/zhao-zongsheng/ 前言 有些人提到C++模板就会下意识地觉得可怕.看不懂.避而远之.其实模板并不复杂 ...
- 【Python】 日志管理logging
logging *****本文参考了http://www.cnblogs.com/dkblog/archive/2011/08/26/2155018.html ■ 最最基本的用法 logging模块用 ...
- SpringBoot03 项目热部署
1 问题 在编写springBoot项目时,经常需要修改代码:但是每次修改代码后都需重新启动,修改的代码才会生效 2 这么实现IDEA能够像Eclipse那样保存过后就可以自动进行刷新呢 将sprin ...
- beta冲刺 用户使用调查报告
测评结果 一.使用体验 数据加载响应很快,页面切换丝滑流畅. UI有点偏暗,有些字被覆盖了. 页面布局过于居中,两侧空白范围较大. 总体功能完善. 二.登录.注册.忘记密码界面 管理员登录按钮太靠下, ...
- Build to win
UPDATE:看到周筠老师的评论里的链接,那版式真的非常舒服.我想想模仿模仿他的布局来看看,虽然感觉做的也不是太好.另外对博客内容稍作修改. 一.获得小黄衫的感受 很幸运能够获得"领骑衫&q ...
- 20162330 实验一 《Java开发环境的熟悉》 实验报告
2016-2017-2 实验报告目录: 1 2 3 4 5 20162330 实验一 <Java开发环境的熟悉> 实验报告 课程名称:<程序设计与数据结构> 学生班级:1623 ...
- Flask 扩展 表单
pip install flask-wtf 一个简单的表单 from flask_wtf import Form from wtforms import StringField from wtform ...
- Swift 2.2 的新特性
导读:本文来自SwiftGG翻译组,作者@walkingway基于苹果Swift官方博客中Ted Kremenek所撰写的"Swift 2.2 Released!"文章进行了关于S ...