ES6入门教程之Iterator与for...of循环详解


Posted in Javascript onMay 17, 2017

本文主要介绍了关于ES6中Iterator与for...of循环的相关内容,分享出来供大家参考学习,需要的朋友们下面来一起看看详细的介绍:

一、Iterator(遍历器)

遍历器(Iterator)是一种协议,任何对象只要部署了这个协议,就可以完成遍历操作。在ES6中遍历操作特质for….of循环。

它的作用主要有两个:

  • 为遍历对象的属性提供统一的接口。
  • 使对象的属性能够按次序排列。

ES6的遍历器协议规定,部署了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']);
 it.next().value; //'a'
 it.next().value; //'b'
 it.next().done; // true

在上面代码片段中,定义了一个makeIterator函数,它的作用是返回一个遍历器对象,用来遍历参数数组。特别需要注意的是next返回值的构造。

下面,再看看一个遍历器的示例代码片段:

function idMaker() {
  var index = 0;
   return {
   next: function() {
    return {value: index++, done: false};
   }
   }
 }

 var it = idMaker();
 it.next().value; //'0'
 it.next().value; //'1'
 it.next().value; //'2'

二、for…of 循环

在ES6中,一个对象只要部署了next方法,就被视为是具有了iterator接口,就可以用for…of循环遍历它的值。

function idMaker() {
  var index = 0;
  return {
   next: function() {
    return {value: index++, done: false};
   }
  }
 }

 for (var n of it) {
  if (n > 5) {
   break;
   console.log( n );
  }
 }
 //0
 //1
 //2
 //3
 //4
 //5

上面的代码说明,for….of默认从0开始循环。

数组原生具备iterator接口

const arr = [1, 5, 3, 9];
 for (let v of arr) {
  console.log( v );
 }
 //1
 //5
 //3
 //9

相比较,Js原有的for…in循环,只能获得对象的键名,不能直接获取键值。ES6提供了for…of循环,允许遍历获取键值。

var arr = ['a', 'b', 'c', 'd'];

 for (a in arr) {
  console.log( a );
 }
 //0
 //1
 //2
 //3

 for (a of arr) {
  console.log( a );
 }
 //0
 //1
 //2
 //3

上面的代码片段表明,for…in循环读取键名,而for…of循环读取键值。

对于Set和Map结构的数据,可以直接使用for…of循环。

var name = ['S', 'D', 'J', 'Z', 'G', 'G', 'G'];
 for ( var e of name) {
  console.log( e );
 }
 //S
 //D
 //J
 //Z
 //G


 var es6 = new Map();
 es6.set('edition', 6);
 es6.set('committee', 'TC39');
 es6.set('standard', 'ECMA-262');
 for(var [name, value] of es6) {
   console.log(name + ": " + value);
 }
 // edition: 6
 // commttee: TC39
 // standard: ECMA-262

在上面的代码片段中,演示了如何遍历Set结构和Map结构,后者是同是遍历键名和键值。

对于普通的对象,for...of结构不能直接使用,否则则会报错。必须项部署iterator接口才能使用。但是,在这种情况下,for...in循环依然可以遍历键名。

var es6 = {
  name: "G.Dragon",
  year: 22,
  love: "coding"
 };

 for (e in es6) {
  console.log( e );
 }
 //name
 //year
 //love

 for( e of es6) {
  console.log( e );
 }
 // TypeError: es6 is not iterable

最后,总结一下。for...of循环可以使用的范围包括数组、类似数组的而对象(比如argument对象、DOM NodeList对象)、Set和Map结构、后文的Generator对象,以及字符串。下面是使用for...of循环遍历字符串和DOM NodeList对象的例子。

// 字符串例子
 let str = "hello";

 for (let s of str) {
  console.log( s );
 }
 //h
 //e
 //l
 //l
 //o

 // DOM NodeList对象的例子
 let paras = document.getSelectorAll("p");
 for (let p of paras) {
  p.classList.add("test");
 }

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
判断控件是否已加载完成的代码
Feb 24 Javascript
jquery表单验证使用插件formValidator
Nov 10 Javascript
js 使用form表单select类实现级联菜单效果
Dec 19 Javascript
AngularJS向后端ASP.NET API控制器上传文件
Feb 03 Javascript
Javascript点击按钮随机改变数字与其颜色
Sep 01 Javascript
解析JavaScript模仿块级作用域
Dec 29 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
Mar 02 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
详解vue-router和vue-cli以及组件之间的传值
Jul 04 Javascript
angular框架实现全选与单选chekbox的自定义
Jul 06 Javascript
vuejs 单文件组件.vue 文件的使用
Jul 28 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
Jun 21 Javascript
angular.fromJson与toJson方法用法示例
May 17 #Javascript
Node.js编写CLI的实例详解
May 17 #Javascript
ES6入门教程之Class和Module详解
May 17 #Javascript
AngularJS实现动态添加Option的方法
May 17 #Javascript
AngularJS+bootstrap实现动态选择商品功能示例
May 17 #Javascript
Vue声明式渲染详解
May 17 #Javascript
node.js调用Chrome浏览器打开链接地址的方法
May 17 #Javascript
You might like
PHP常用代码
2006/11/23 PHP
用php实现像JSP,ASP里Application那样的全局变量
2007/01/12 PHP
PHP Global定义全局变量使用说明
2013/08/15 PHP
PHP识别二维码的方法(php-zbarcode安装与使用)
2016/07/07 PHP
php强制下载文件函数
2016/08/24 PHP
JS input 数字验证代码
2009/07/30 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
2011/07/22 Javascript
基于datagrid框架的查询
2013/04/08 Javascript
JavaScript用select实现日期控件
2015/07/17 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
2015/08/17 Javascript
JavaScript中return用法示例
2016/11/29 Javascript
基于angular2 的 http服务封装的实例代码
2017/06/29 Javascript
浅谈Angular文字折叠展开组件的原理分析
2017/11/24 Javascript
详解Angular6.0使用路由步骤(共7步)
2018/06/29 Javascript
详解nuxt路由鉴权(express模板)
2018/11/21 Javascript
微信小程序实现的图片保存功能示例
2019/04/24 Javascript
js实现3D旋转相册
2020/08/02 Javascript
[00:05]ChinaJoy现场 DOTA2玩家高呼“CN DOTA BEST DOTA”
2019/08/04 DOTA
使用Python脚本生成随机IP的简单方法
2015/07/30 Python
用Python解决计数原理问题的方法
2016/08/04 Python
Python+matplotlib+numpy实现在不同平面的二维条形图
2018/01/02 Python
Python日期时间对象转换为字符串的实例
2018/06/22 Python
python url 参数修改方法
2018/12/26 Python
PyTorch中 tensor.detach() 和 tensor.data 的区别详解
2020/01/06 Python
ansible动态Inventory主机清单配置遇到的坑
2020/01/19 Python
django queryset相加和筛选教程
2020/05/18 Python
html5的canvas方法使用指南
2014/12/15 HTML / CSS
介绍一下linux的文件权限
2012/02/15 面试题
珍珠鸟教学反思
2014/02/01 职场文书
三好学生先进事迹材料
2014/08/28 职场文书
关于运动会广播稿50字
2014/10/18 职场文书
学习雷锋精神活动总结
2015/02/06 职场文书
2015年医院创卫工作总结
2015/04/22 职场文书
社区志愿服务活动感想
2015/08/07 职场文书
大学生创业计划书
2019/06/24 职场文书
详解PHP服务器如何在有限的资源里最大提升并发能力
2021/05/25 PHP