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中的对象 推荐
Jan 09 Javascript
jQuery表单域属性过滤器用法分析
Feb 10 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
Sep 15 Javascript
最好用的Bootstrap fileinput.js文件上传组件
Dec 12 Javascript
深入理解Node.js中的进程管理
Mar 13 Javascript
微信小程序 flex实现导航实例详解
Apr 26 Javascript
js移动端事件基础及常用事件库详解
Aug 15 Javascript
sublime text配置node.js调试(图文教程)
Nov 23 Javascript
vue中动态绑定表单元素的属性方法
Feb 23 Javascript
vue实现局部刷新的实现示例
Apr 16 Javascript
如何用threejs实现实时多边形折射
May 07 Javascript
JavaScript组合继承详解
Nov 07 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
全国FM电台频率大全 - 15 山东省
2020/03/11 无线电
5.PHP的其他功能
2006/10/09 PHP
PHP高级OOP技术演示
2009/08/27 PHP
laravel框架中间件简单使用方法示例
2020/01/25 PHP
javascript &amp;&amp;和||运算法的另类使用技巧
2009/11/28 Javascript
基于jQuery的动态表格插件
2011/03/28 Javascript
JavaScript实现页面滚动图片加载(仿lazyload效果)
2011/07/22 Javascript
javascript获取所有同类checkbox选项(实例代码)
2013/11/07 Javascript
JavaScript中两个字符串的匹配
2016/06/08 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
2016/08/02 Javascript
在web中js实现类似excel的表格控件
2016/09/01 Javascript
AngularJS入门教程之数据绑定原理详解
2016/11/02 Javascript
node.js中fs.stat与fs.fstat的区别详解
2017/06/01 Javascript
基于JavaScript实现微信抢红包功能
2017/07/20 Javascript
浅谈Vuejs Prop基本用法
2017/08/17 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
2017/11/08 jQuery
Angularjs实现页面模板清除的方法
2018/07/20 Javascript
React实现轮播效果
2020/08/25 Javascript
[01:02:17]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG
2014/05/26 DOTA
Python入门篇之字典
2014/10/17 Python
利用python发送和接收邮件
2016/09/27 Python
Python格式化输出%s和%d
2018/05/07 Python
Sanic框架安装与简单入门示例
2018/07/16 Python
Python 实现中值滤波、均值滤波的方法
2019/01/09 Python
CSS3实现可翻转的hover效果
2018/05/23 HTML / CSS
英国的一家创新礼品和小工具零售商:Menkind
2019/08/24 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?用contains来区分是否有重复的对象。还是都不用
2013/07/30 面试题
大学生职业生涯规划方案
2014/01/03 职场文书
网管求职信
2014/03/03 职场文书
政府采购方案
2014/06/12 职场文书
2014年征兵标语
2014/06/20 职场文书
千手观音观后感
2015/06/03 职场文书
采购部年度工作总结
2015/08/13 职场文书
Python Pycharm虚拟下百度飞浆PaddleX安装报错问题及处理方法(亲测100%有效)
2021/05/24 Python
浅谈由position属性引申的css进阶讨论
2021/05/25 HTML / CSS
使用CSS自定义属性实现骨架屏效果
2022/06/21 HTML / CSS