ES6中Iterator与for..of..遍历用法分析


Posted in Javascript onMarch 31, 2017

本文实例讲述了ES6中Iterator与for..of..遍历用法。分享给大家供大家参考,具体如下:

Iterator与for..of..遍历

1.Iterator概念

遍历器(Iterator)是一种接口,为各种不同的数据结构提供统一的访问机制。JS中有些数据结构具备原生的Iterator接口。为了更好理解这个概念,我们也可以自己写一个Iterator。

var it = simIteractor(['hi','ES5']);
console.log(it.next()); //Object {value: "hi", done: false}
console.log(it.next()); //Object {value: "ES5", done: false}
console.log(it.next()); //Object {value: undefined, done: true}
function simIteractor(array){
    var nextIndex = 0;
    return{
      next: function(){
        return nextIndex < array.length ? {value: array[nextIndex++], done: false} : {value: undefined, done:true};
      }
    };
}

2.ES6中规定,默认的Iterator接口部署在数据结构的Symbol.iterator属性,或者说,一个数据结构只要具有Symbol.iterator属性就可以任务是可遍历的。在ES6中,有3类数据结构原生具备Iterator接口:数组、某些类似数组的对象、Set及Map。

3.提到可遍历,就要说说遍历的方法。

for...in... : for-in是为普通对象设计的,你可以遍历得到字符串类型的键,因此不适用于数组遍历

For...of... : for-of循环用来遍历数据—例如数组中的值。for-of循环也可以遍历其它的集合

for-of循环不仅支持数组,还支持大多数类数组对象,例如DOMNodeList。

for-of循环也支持字符串遍历,它将字符串视为一系列的Unicode字符来进行遍历:

or (var chr of "abc"){
  alert(chr); //依次弹出a,b,c
}

它同样支持Map和Set对象遍历。如果你不知道Map 请看 https://3water.com/article/110048.htm,如果你不知道Set 请看 https://3water.com/article/110052.htm 。

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

Javascript 相关文章推荐
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
Mar 22 Javascript
js创建元素(节点)示例
Jan 02 Javascript
JavaScript的模块化开发框架Sea.js上手指南
May 12 Javascript
论Bootstrap3和Foundation5网格系统的异同
May 16 Javascript
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
JS加密插件CryptoJS实现AES加密操作示例
Aug 16 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
Aug 24 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
Sep 13 Javascript
Vue 实现前进刷新后退不刷新的效果
Jun 14 Javascript
详解uniapp的全局变量实现方式
Jan 11 Javascript
vue-cropper组件实现图片切割上传
May 27 Vue.js
vue使用watch监听属性变化
Apr 30 Vue.js
node.js平台下的mysql数据库配置及连接
Mar 31 #Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
Mar 31 #Javascript
angular.JS实现网页禁用调试、复制和剪切
Mar 31 #Javascript
angular.js+node.js实现下载图片处理详解
Mar 31 #Javascript
JavaScript函数柯里化原理与用法分析
Mar 31 #Javascript
js实现一个猜数字游戏
Mar 31 #Javascript
微信小程序页面间通信的5种方式
Mar 31 #Javascript
You might like
php基础知识:类与对象(4) 范围解析操作符(::)
2006/12/13 PHP
php 生成WML页面方法详解
2009/08/09 PHP
php 中奖概率算法实现代码
2017/01/25 PHP
javascript 写类方式之一
2009/07/05 Javascript
node.js中的buffer.Buffer.isBuffer方法使用说明
2014/12/14 Javascript
js函数内变量的作用域分析
2015/01/12 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
2015/09/10 Javascript
JQuery实现的按钮倒计时效果
2015/12/23 Javascript
基于JSON数据格式详解
2017/08/31 Javascript
15个顶级开源JavaScript框架和库
2018/10/10 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
2018/12/14 Javascript
Vue v-for循环之@click点击事件获取元素示例
2019/11/09 Javascript
Antd中单个DatePicker限定时间输入范围操作
2020/10/29 Javascript
python之wxPython菜单使用详解
2014/09/28 Python
Python 3.x 连接数据库示例(pymysql 方式)
2017/01/19 Python
python3安装pip3(install pip3 for python 3.x)
2018/04/03 Python
对python3 urllib包与http包的使用详解
2018/05/10 Python
解决python super()调用多重继承函数的问题
2019/06/26 Python
Django使用中间件解决前后端同源策略问题
2019/09/02 Python
flask的orm框架SQLAlchemy查询实现解析
2019/12/12 Python
PyTorch实现更新部分网络,其他不更新
2019/12/31 Python
在Tensorflow中查看权重的实现
2020/01/24 Python
Python生成器next方法和send方法区别详解
2020/05/30 Python
python入门:argparse浅析 nargs='+'作用
2020/07/12 Python
Spy++的使用方法及下载教程
2021/01/29 Python
HTML5 weui使用笔记
2019/11/21 HTML / CSS
欧洲最大的拼图游戏商店:JigsawPuzzle.co.uk
2018/07/04 全球购物
荷兰DOD药房中文官网:DeOnlineDrogist
2020/12/27 全球购物
慈善捐赠倡议书
2014/08/30 职场文书
中学生旷课检讨书模板
2014/10/08 职场文书
党的群众路线剖析材料
2014/10/09 职场文书
2014年信访工作总结
2014/11/17 职场文书
房产证明范本
2015/06/19 职场文书
详解Oracle块修改跟踪功能
2021/11/07 Oracle
JavaScript组合继承详解
2021/11/07 Javascript
解决MySQL添加新用户-ERROR 1045 (28000)的问题
2022/03/03 MySQL