ES6-Iterator & for...of循环
依赖文件地址 ：https://github.com/chanceLe/ES6-Basic-Syntax/tree/master/js
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>[es6]-13-Iterator和for...of循环</title>
<script src="./js/browser.js"></script>
<script type="text/babel">
/*
* Iterator遍历器的概念
* 遍历器是一种接口，为各种不同的数据结构提供统一的访问机制。任何
* 数据结构只要部署Iterator接口，就可以完成遍历操作。
*
* Iterator的作用有三个:
* 1.是为各种数据结构，提供一个统一的，简便的访问接口；
* 2.使得数据结构的成员能够按某种次序排列。
* 3.es6创造了新的遍历命令 for of 循环，Iterator接口主要供for...of消费。
*
* 遍历的过程：
* 1.创建一个指针对象，指向当前数据结构的起始位置。也就是说，遍历器对象本质上，就是一个指针对象。
* 2.第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员。
* 3.第二次调用指针对象的next方法，可以将指针指向数据结构的第二个成员。
* 4.不断调用指针对象的next方法，直到它指向数据结构的结束位置。
*
* 每一次调用next方法，都会返回数据结构的当前成员信息。具体来说，就是返回一个包含value和done两个属性的对象。
* 其中，value属性是当前成员的值，done属性是一个布尔值，表示遍历是否结束。
*
* 下面是一个模拟next方法返回值的例子：
*/ var makeIterator = (array)=>{
var nextIndex = 0;
return {
next:function(){
return nextIndex < array.length?
{value:array[nextIndex++],done:false}:
{value:undefined,done:true } }
}
};
var it = makeIterator(["a","b"]);
console.log(it.next());
console.log(it.next());
console.log(it.next()); /*
* Object {value: "a", done: false}
Object {value: "b", done: false}
Object {value: undefined, done: true}
*/ /*
* es6中，有些数据结构原生具备Iterator接口,比如数组，不用任何处理就可以被for...of循环，有些就不行
* 比如对象，原因在于这些数据结构原生部署了Symbol.iterator属性。另外一些数据结构没有。凡是部署了
* Symbol.iterator属性的数据结构，就叫部署了遍历器接口，调用这个接口，就会返回一个遍历器对象。
*/ /*
* 数据结构的默认iterator接口
* ES6规定，默认的iterator接口部署在数据结构的Symbol.iterator属性，Symbol.iterator本身是一个表达式，返回Symbol对象的
* iterator属性，这是一个预定义好的，类型为Symbol的特殊值，所以放在方括号内。
*
* ES6 中，有三类数据原生具备iterator接口：数组，某些类似数组的对象，Set和Map结构。
*
* 对象之所以没有默认部署iterator接口，是因为对象的哪个属性先遍历，哪个属性后遍历是不确定的，需要开发者手动指定。
* 本质上，遍历器是一种线性处理，对于任何非线性的数据结构，部署遍历器接口，就等于部署一种线性转换。 不过严格的说，对象
* 部署遍历器接口并不是很必要，因为这时对象实际是被当做Map来使用，ES5没有Map结构，ES6原生提供了。
*
* 一个对象要有可被for...of循环调用的iterator接口，就必须在Symbol.iterator的属性上部署遍历器生成方法（原型链上的对象具有该方法也可）。
*
* 调用iterator接口的场合：
* 1.解构赋值2.扩展运算符。3.yield* 后面跟的是一个可遍历结构，会调用该结构的遍历器接口。4.其他场合。
*/ /*
* 字符串的iterator接口
* 字符串是一个类似数组的对象，也原生具有iterator接口。
* 可以通过重写Symbol.iterator属性，达到修改遍历器行为的目的。
*/ /*
* 遍历器对象的return() throw()
* 遍历器对象除了具有next方法，还可以具有return和throw方法。如果自己写遍历器对象生成函数，next方法是必须部署的，return方法和throw方法可选。
* return 方法的使用场合是，如果for...of循环提前退出（通常是因为出错或者有break语句或continue语句），就会调用return方法。
* 如果一个对象在完成遍历前，需要清理或释放资源，就可以部署return方法。
*/
function readLinesSync(file){
return {
next(){
if(file.isAtEndOfFile()){
file.close();
return {done:true};
}
},
return(){
file.close();
return {done:true};
}
}
}
/*
* 上面代码中，函数readLinesSync接受一个文件对象作为参数，返回一个遍历器对象，其中除了next方法，还部署了return方法。
* 下面我们让文件的遍历提前返回，这样就会触发执行return的方法。
*/
for(let line of readLinesSync(filename)){
console.log(line);
break;
}
//注意return方法必须返回一个对象，这是Generator规格决定的。 /*
* throw方法主要是配合Generator函数使用，一般的遍历器对象用不到这个方法。
*/ /*
* for...of循环 ， 只要有遍历器接口，就可以被for...of循环。
* 使用范围包括 ： 数组,Set和Map结构,某些类似数组的对象（比如arguments，DOMList对象） Generator 以及字符串。
*
* 与其他遍历语法的比较：
* 最原始的是for循环，这种写法比较麻烦，因此数组提供内置的forEach方法。
*
* forEach的问题在于，无法中途跳出循环，break或return 都没作用。
*
* for...in 遍历数组的键名，有几个缺点：
* 数组的键名是数字，但是for...in是以字符串作为键名。
* 不仅遍历数字键名，还会遍历手动添加的其他键，甚至包括原型链上的键。
* 某些情况下，for...in循环会以任意顺序遍历键名。
*
* 总之，for...in循环主要是为遍历对象设计的，不适合数组。
*
* for...of循环相比上面几种做法，有显著优点：
* 1.有着for...in一样简洁的语法，没有for...in的缺点。
* 2.可以与break，return 结合使用。
* 3.提供了遍历所有数据结构的统一操作接口。
*
*/ </script>
</head>
<body>
</body>
</html>
ES6-Iterator & for...of循环的更多相关文章
- ES6—— iterator和for-of循环
Iterator 遍历器的作用:为各种数据结构,提供一个同意的,简便的访问接口.是的数据结构的成员能够按某种次序排列.ES6 新增了遍历命令 for...of 循环,Iterator接口主要供 for ...
- es6 -- Iterator 和 for...of 循环
1:Iterator(遍历器)的概念 JavaScript 原有的表示“集合”的数据结构,主要是数组(Array)和对象(Object),ES6 又添加了Map和Set.这样就有了四种数据集合,用户还 ...
- es6(14)--iterator for ...of循环
//iterator for ...of循环 { let arr=['hello','world']; let map=arr[Symbol.iterator](); console.log(map. ...
- 关于ES6的module的循环加载
今天写js时,碰到了一个模块循环加载的错误,下面时例子: // testa.mjs import testb from './testb.mjs'; const {b} = testb; const ...
- es6 Iterator和for...of循环
javascript表示集合的数据结构有 es5: array object es6: map set, 一共4种数据集合 需要一种统一的接口机制来处理所有不同的数据结构 遍历器就是这样一种机制,它是 ...
- ES6(Iterator 和 for...of 循环）
Iterator 和 for...of 循环 1.什么是 Iterator 接口 Iterator 接口功能:用一种相同办法的接口让不同的数据结构得到统一的读取命令的方式 2.Iterator的基本用 ...
- Gist - ES6 Iterator
Introduction Iterator is one of the most common design modes in daily development. Let's explore the ...
- 【经验】STL的list vector在iterator迭代器的循环中 使用erase 造成的BUG
#include <iostream> #include <list> #include <vector> using namespace std; typedef ...
- java - day011 - 集合, ArrayList HashMap,HashSet, Iterator 接口, for-each 循环格式
集合 ArrayList 丑数: 能被3,5,7整除多次, ArrayList list 接口 | - ArrayList | - Linked ...
- 迭代器Iterator、for循环遍历、泛型
java.util.Collection接口 是集合的最顶层的接口,定义了集合共性的方法 接口无法直接创建对象,使用多态的方式创建对象 Collection<集合中的数据类型(泛型)> c ...
随机推荐
- 201709013工作日记--Android消息机制HandlerThread
1.首先来看一个常规的handler用法: 在主线程中建立一个handler: private Handler mHandler = new Handler() { @Override public ...
- PrefixHeader.pch 在工程中的使用
1) 新建一个pch文件 2) 在 工程 Build Settings 中搜索 header 将Precompile Prefix Header 置为YES 2) 选中pch文件, 将右侧相对路径 ...
- C#-派生类
VS派生类 继承.派生类 class AClass : FClass 构建函数继承 public classname (string astring): base(astring){};默认不继承基类 ...
- 测试-LoadRunner
1录脚本 设置解析方式,html形式,会精炼成一个函数,此时找有用的url,写出函数:url方式,函数比较多. 参数化 两参数成对时,在脚本处选成对. 加上进程,加上返回值判断. 最后一段接口url, ...
- jmap的几个操作要慎用
JDK中带有了一堆的工具是可以用来查看运行状况,排查问题的,但对于这些工具还是要比较清楚执行后会发生什么,否则有可能会因为执行了一个命令就导致严重故障,重点讲下影响比较大的jmap. 最主要的危险操作 ...
- [leetcode] 16. Add Binary
这个题目相对有点奇怪,题目如下: Given two binary strings, return their sum (also a binary string). For example, a = ...
- 使用Linq对Hashtable和Dictionary<T,T>查询的效率比较
近期做版本迭代任务,有一个在店铺头部展示店主所在的城市名称和省份名称的需求,店主信息表中保存了店主所在的城市Id和省份Id,由于原有业务复杂,要尽量减少Sql执行时间,所以不考虑join城市地区详细表 ...
- 关于C_Sharp集中处理异常
1.写在前面 “异常意味着什么?”,想必不用对此做多余的解释,我们有理由相信在任何情况下任何应用程序都有可能出现异常,若在程序中没有对异常进行处理,则操作系统会以粗暴的方式处理掉它(弹出错误提示框), ...
- JQuery fullcalender文档
转载: http://blog.csdn.net/lgg2011. 使用方式, 引入相关js, css后, $(‘#div_name’).fullCalendar({//options}); 接受的 ...
- [JS] IE下ajax请求不生效或者请求结果不更新
问题描述: IE8及以下版本里用jQuery发简单的GET时,第一次或者新开窗口后的请求没问题,可以正确返回结果.但是之后刷新页面或者触发某些操作得到的ajax请求结果永远和第一次一样. 问题分析: ...