SE5之前我们可以用for循环来遍历数组,SE5为数组引进了新的方法forEach(),方便了很多,但是该方法不能够通过break或者return返回外层函数。

arr.forEach(function(value){
console.log(value);
})

ES6定义了一个更好的遍历数组的方法for-of循环,该方法的强大在于可以遍历任何具有迭代器的对象,例如数组、NodeList对象、Map和Set对象。还可用于遍历字符串,将其视为一系列的Unicode字符来遍历,即中文也算一个字符。

遍历数组

function outputArr(var arr){
for( var tmp of arr){
console.log(tmp);
}
}

遍历NodeList

(function(){
let divArr = document.getElementsByName('div');
for(let tmp of divArr){
tmp.style.color = 'red';
}
})();

遍历Set

var set = new Set(array);
for( var arr of set){
console.log(arr);
}

遍历Map,需要用到SE6解构的方法。

var map = new Map();
map.set("aa",1);
map.set("bb",2);
for(var [name, value] of map){
console.log(name +" " + value);
}

遍历字符串

var str = "abc哈哈";
for(var tmp of str){
console.log(tmp);
}
// a
// b
// c
// 哈
// 哈

深入理解迭代器对象

for-of循环首先调用集合的[Symbol.iterator]()方法,该方法返回一个新的迭代器对象,如自身,但该对象要具有一个.next()方法。for每循环一次就调用这个.next()方法。该方法返回一个对象{done:false,value:value},done属性用来判断循环是否结束,value属性就是迭代的值。最简单的例子如下。

function ite(){
var index = 0;
return {
[Symbol.iterator]: function () {
return this;
},
next:function(){
return index < 3 ? {done:false,value:index++}:{done:true,value:undefined};
}
}
}
(function(){
var it = ite();
for(var tmp of it){
console.log(tmp);
}
}())

注意:迭代器对象一定要有有Symbol.iterator和next这两个方法,不然会判断这不是一个迭代器,Symbol是SE6的新类型,该类型的值是与任何值都不同,用来避免重名的问题。火狐运行结果0,1,2。

迭代器还有可选的.return()和.throw(exc)方法。如果for-of循环过早退出会调用.return()方法,如用异常、return、break触发.return()方法。所以.return()方法可以用来处理一些释放内存或资源的工作,而对于.throw()方法,for-of循环永远不会调用它。

这两个方法通常用来处理生成器,在讲生成器的时候会由具体说明。

ES6 for-of循环和迭代器使用细节的更多相关文章

  1. ES6入门十:iterator迭代器

    迭代模式 ES6迭代器标准化接口 迭代循环 自定义迭代器 迭代器消耗 一.迭代模式 迭代模式中,通常有一个包含某种数据集合的对象.该数据可能存在一个复杂数据结构内部,而要提供一种简单的方法能够访问数据 ...

  2. 如何正确遍历删除List中的元素(普通for循环、增强for循环、迭代器iterator、removeIf+方法引用)

    遍历删除List中符合条件的元素主要有以下几种方法: 普通for循环 增强for循环 foreach 迭代器iterator removeIf 和 方法引用 其中使用普通for循环容易造成遗漏元素的问 ...

  3. 深入浅出ES6(二):迭代器和for-of循环

    作者 Jason Orendorff  github主页  https://github.com/jorendorff 我们如何遍历数组中的元素?20年前JavaScript刚萌生时,你可能这样实现数 ...

  4. es6学习笔记一:迭代器和for-of循环

    我们如何遍历一个数组呢?在20年前,我们是这样遍历一个数组的: var myArr = []; for (var i = 0; i < arr.length; i++) { console.lo ...

  5. ES6 for of循环, 可迭代接口,实现可迭代接口

    在for of循环出现之前,for循环适合遍历普通的数组,for in循环比较适合遍历键值对,遍历数组对象的foreach方法,但是这些遍历 都有一定的局限性,所以在ES6之后引入了统一的遍历方式 f ...

  6. 15.python的for循环与迭代器、生成器

    在前面学习讲完while循环之后,现在终于要将for循环这个坑填上了.之所以拖到现在是因为for循环对前面讲过的序列.字典.集合都是有效的,讲完前面的内容再来讲for循环会更加容易上手. 首先,for ...

  7. es6 for of 循环

    es6 新增了 for of 循环,只要继承了Iterator 接口的数据集合都可以使用 for of 去循环 for of 循环,统一数据集合的循环方法,解决了forEach循环的不能使用break ...

  8. python - 条件语句/循环语句/迭代器

    条件测试:if 条件表达式python 的比较操作        所有的python对象都支持比较操作            可用于测试相等性.相对大小等            如果是复合对象,pyt ...

  9. 程序控制结构及for循环、foreach循环、迭代器

    结构化程序设计 三种基本控制结构:顺序结构.选择结构.循环结构. 在这种思想的指导下,发展出了面向过程编程方式.面向过程编程的核心是算法+数据结构.算法可以用顺序.选择.循环这三种基本控制结构来实现. ...

随机推荐

  1. Activiti-03-query api

    Query API 有两种方式从引擎中查询数据, 查询 API 和本地查询. API方式:   List<Task> tasks = taskService.createTaskQuery ...

  2. HDU 6092`Rikka with Subset 01背包变形

    Rikka with Subset Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others ...

  3. HTML5基本标签的使用

    第一次写这种东西,肯定存在许多不足之处,还望大家多多担待,我会继续加油的!我也是一名HTML5的初学者,只是将这几周在课堂上所听到的东西分享给大家. 下面给大家介绍一下H5! 一.<!DOCTY ...

  4. Apache CXF入门

    CXF简介 Apache CXF = Celtix + XFire,开始叫 Apache CeltiXfire,后来更名为 Apache CXF 了.CXF 继承了 Celtix 和 XFire 两大 ...

  5. AngularJS–Animations(动画)

    点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/   在AngularJS 1.3 中,给一些指令(eg:   ngRepeat,ngSw ...

  6. 使用 TUN 设备实现一个简单的 UDP 代理隧道

    若要实现在 Linux 下的代理程序,方法有很多,比如看着 RFC 1928 来实现一个 socks5 代理并自行设置程序经过 socks5 代理等方式,下文是使用 Linux 提供的 tun/tap ...

  7. 第5章 不要让线程成为脱缰的野马(Keeping your Threads on Leash) ----初始化一个线程

    使用线程的一个常见问题就是如何能够在一个线程开始运行之前,适当地将它初始化.初始化最常见的理由就是为了调整优先权.另一个理由是为了在SMP 系统中设定线程比较喜欢的 CPU.第10 章谈到 MFC 时 ...

  8. 机器学习-KNN分类器

    1.  K-近邻(k-Nearest Neighbors,KNN)的原理 通过测量不同特征值之间的距离来衡量相似度的方法进行分类. 2.  KNN算法过程 训练样本集:样本集中每个特征值都已经做好类别 ...

  9. NOIP2017SummerTraining0713

    个人感受:这套题是真的难,以至于,拿了130分就第三了(说来羞耻,真的不想---) 问题 A: 乐曲创作 时间限制: 1 Sec  内存限制: 256 MB提交: 370  解决: 58[提交][状态 ...

  10. Scala 中的隐式转换和隐式参数

    隐式定义是指编译器为了修正类型错误而允许插入到程序中的定义. 举例: 正常情况下"120"/12显然会报错,因为 String 类并没有实现 / 这个方法,我们无法去决定 Stri ...