ES6新特性二:Iterator(遍历器)和for-of循环详解


Posted in Javascript onApril 20, 2017

本文实例讲述了ES6新特性之Iterator(遍历器)和for-of循环。分享给大家供大家参考,具体如下:

1. 遍历数组

for-of工作原理:迭代器有一个next方法,for循环会不断调用这个iterator.next方法来获取下一个值,直到返回值中的 done属性为true的时候结束循环。

① 在ES6之前

var arr = [1,2,3,4,5,6];
arr.name = 'a';
for (var index = 0; index < arr.length; index++) {
  console.log(arr[index]);
}
arr.forEach(function (value) { //ES5 内建的forEach方法 缺陷:无法使用break 中断 ,也不能使用return 语句返回到外层函数
  console.log(value);
});

结果都是:1,2,3,4,5,6

② 用 for-in :作用于数组的 forfor -in 循环体除了遍历数组元素外,还会遍历自定义属性。比如数组有一个可枚举属性arr.a,循环将额外执行一次

for (var index in arr) { // 千万别这样做
 console.log(arr[index]);
}

结果:1,2,3,4,5,6,a

for-in 是为普通对象设计的,赋值给index的值不是实际的数字1、2,而是字符串‘1',‘2'

var b = 0;
for (var index in arr) {
 b = b+ index;
 console.log(b)
}

结果:00,001,0012,00123,001234,0012345,0012345name

③ 使用 for-of:避开了for-in 的所有缺陷,可以正确响应 break、return 语句

for(var value of arr){
  console.log(value)
}

结果:1,2,3,4,5,6

2.for-of 循环便利其他集合

① 遍历Set

var words = 'a';
var s = new Set();
s.add("a");
s.add(1);
for(var word of s){
  console.log(word);
}

结果:a,1

② 遍历Map

var map = new Map();
map.set('a',1);
map.set('b',2);
map.set('c',3);
map.set('d',4);
for(var [key,value] of map){
  console.log(key+':'+value);
}

结果:a:1,b:2,c:3,d:4

3. Iterator(遍历器)

① 遍历器(Iterator)是一种接口规格,任何对象只要部署这个接口,就可以完成遍历操作。它的作用有两个,一是为各种数据结构,提供一个统一的、简便的接口,二是使得对象的属性能够按某种次序排列。

② 遍历器的原理:遍历器提供了一个指针,指向当前对象的某个属性,使用next方法,就可以将指针移动到下一个属性。next方法返回一个包含value和done两个属性的对象。其中,value属性是当前遍历位置的值,done属性是一个布尔值,表示遍历是否结束。

//模拟遍历器原理
function 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());//{ value: 'a', done: false }
console.log(it.next());//{ value: 'b', done: false }
console.log(it.next());//{ value: undefined, done: true }

③ Iterator接口返回的遍历器,原生具备next方法。

> 有三类数据结构原生具备Iterator接口:数组、类似数组的对象、Set和Map结构。

var map = new Map();
console.log(map[Symbol.iterator] === map.entries)//true
var arr = new Array();
console.log(arr[Symbol.iterator] === arr.values)//true
var set = new Set();
console.log(set[Symbol.iterator] === set.values)//true

> 其他数据结构(主要是对象)如果需要Iterator接口,都需要自己部署。

var students = {}
students[Symbol.iterator] = function() {
 let index = 1;
 return {
  next() {
   return {done: index>10, value: index++}
  }
 }
}
for(var i of students) {
 console.log(i);
}//

希望本文所述对大家ECMAScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript中__proto__与prototype的关系深入理解
Dec 04 Javascript
jQuery中replaceAll()方法用法实例
Jan 16 Javascript
js实现图片从左往右渐变切换效果的方法
Feb 06 Javascript
JavaScript原生实现观察者模式的示例
Dec 15 Javascript
vue技术分享之你可能不知道的7个秘密
Apr 09 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
Jul 23 Javascript
Web安全之XSS攻击与防御小结
Dec 13 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
Nov 12 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
Jan 05 Javascript
mpvue实现微信小程序快递单号查询代码
Apr 03 Javascript
JavaScript实现五子棋小游戏
Oct 26 Javascript
微信小程序中form 表单提交和取值实例详解
Apr 20 #Javascript
ES6新特性一: let和const命令详解
Apr 20 #Javascript
javascript 正则表达式分组、断言详解
Apr 20 #Javascript
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 #jQuery
JS利用cookies设置每隔24小时弹出框
Apr 20 #Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
Apr 20 #Javascript
addEventListener()与removeEventListener()解析
Apr 20 #Javascript
You might like
PHP4中实现动态代理
2006/10/09 PHP
文件系统基本操作类
2006/11/23 PHP
php用正则判断是否为数字的方法
2016/03/25 PHP
浅析Yii2 gridview实现批量删除教程
2016/04/22 PHP
PHP实现对数字分隔加千分号的方法
2019/03/18 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
通过js脚本复制网页上的一个表格的不错实现方法
2006/12/29 Javascript
用JavaScript编写COM组件的步骤
2009/03/17 Javascript
根据对象的某一属性进行排序的js代码(如:name,age)
2010/08/10 Javascript
JS操作图片(增,删,改) 例子
2013/04/17 Javascript
Jquery 数组操作大全个人总结
2013/11/13 Javascript
jquery中页面Ajax方法$.load的功能使用介绍
2014/10/20 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
2016/06/07 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
2016/08/08 Javascript
详解vue 中使用 AJAX获取数据的方法
2017/01/18 Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
2017/07/20 Javascript
Vue.js仿微信聊天窗口展示组件功能
2017/08/11 Javascript
IE9 elementUI文件上传的问题解决
2018/10/17 Javascript
Vue 监听元素前后变化值实例
2020/07/29 Javascript
Vue管理系统前端之组件拆分封装详解
2020/08/23 Javascript
《与孩子一起学编程》python自测题
2018/05/27 Python
python版百度语音识别功能
2019/07/09 Python
pytorch在fintune时将sequential中的层输出方法,以vgg为例
2019/08/20 Python
详解python uiautomator2 watcher的使用方法
2019/09/09 Python
Python Opencv提取图片中某种颜色组成的图形的方法
2019/09/19 Python
Python Gluon参数和模块命名操作教程
2019/12/18 Python
使用C#编写创建一个线程的代码
2013/01/22 面试题
经理管理专业毕业自荐书范文
2014/02/12 职场文书
绿色校园广播稿
2014/10/13 职场文书
工商局所长四风自我剖析及整改措施
2014/10/26 职场文书
护林员个人总结
2015/03/04 职场文书
检讨书范文大全
2015/05/07 职场文书
应收账款管理制度
2015/08/06 职场文书
2016年教育局“我们的节日——端午节”主题活动总结
2016/04/01 职场文书
MySQL query_cache_type 参数与使用详解
2021/07/01 MySQL
详解pytorch创建tensor函数
2022/03/22 Python