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 相关文章推荐
js post方式传递提交的实现代码
May 31 Javascript
javascript中的对象创建 实例附注释
Feb 08 Javascript
js导航菜单(自写)简单大方
Mar 28 Javascript
SOSO地图JS画出标注和中心点以html形式运行
Aug 09 Javascript
javascript 自定义回调函数示例代码
Sep 26 Javascript
javascript实现修改微信分享的标题内容等
Dec 11 Javascript
深入理解JS函数的参数(arguments)的使用
May 28 Javascript
AngularJS入门示例之Hello World详解
Jan 04 Javascript
Bootstrap进度条学习使用
Feb 09 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
Sep 25 Javascript
JavaScript实现Tab选项卡切换
Feb 13 Javascript
Swiper实现导航栏滚动效果
Oct 16 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
德劲1102收音机的打理维修案例
2021/03/02 无线电
最新用php获取谷歌PR值算法,附上php查询PR值代码示例
2011/12/25 PHP
PHP基于GD库的图像处理方法小结
2016/09/27 PHP
(转载)JavaScript中匿名函数,函数直接量和闭包
2007/05/08 Javascript
js返回上一页并刷新代码整理
2012/12/21 Javascript
比较新旧两个数组值得增加和删除的JS代码
2013/10/30 Javascript
js取模(求余数)隔行变色
2014/05/15 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
2015/10/20 Javascript
AngularJS 中的Promise --- $q服务详解
2016/09/14 Javascript
JS中位置与大小的获取方法
2016/11/22 Javascript
Vue结合SignalR实现前后端实时消息同步
2017/09/19 Javascript
vuex中使用对象展开运算符的示例
2017/09/25 Javascript
微信小程序实现添加手机联系人功能示例
2017/11/30 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
2018/06/28 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
2018/09/03 Javascript
基于iview-admin实现动态路由的示例代码
2019/10/02 Javascript
Vue实现手机扫描二维码预览页面效果
2020/05/28 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
2020/04/27 Javascript
vue 函数调用加括号与不加括号的区别
2020/10/29 Javascript
用Python的pandas框架操作Excel文件中的数据教程
2015/03/31 Python
Python Socket传输文件示例
2017/01/16 Python
python读取并写入mat文件的方法
2019/07/12 Python
python多进程使用函数封装实例
2020/05/02 Python
python 爬虫基本使用——统计杭电oj题目正确率并排序
2020/10/26 Python
css3 transform过渡抖动问题解决
2020/10/23 HTML / CSS
信息管理员岗位职责
2013/12/01 职场文书
上班上网检讨书
2014/01/29 职场文书
委托书模板
2014/04/04 职场文书
销售提升方案
2014/06/07 职场文书
大学生读书笔记范文
2015/07/01 职场文书
大学生十八大感想
2015/08/11 职场文书
如何利用python和DOS获取wifi密码
2021/03/31 Python
Nginx如何配置Http、Https、WS、WSS的方法步骤
2021/05/11 Servers
react中的DOM操作实现
2021/06/30 Javascript
python3操作redis实现List列表实例
2021/08/04 Python
LyScript实现绕过反调试保护的示例详解
2022/08/14 Python