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 相关文章推荐
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
Dec 22 Javascript
js 可拖动列表实现代码
Dec 13 Javascript
五段实用的js高级技巧
Dec 20 Javascript
jquery 无限级下拉菜单的简单实现代码
Feb 21 Javascript
不用一句js代码初始化组件
Jan 27 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
Jun 30 Javascript
javascript比较语义化版本号的实现代码
Sep 09 Javascript
js实现1,2,3,5数字按照概率生成
Sep 12 Javascript
微信小程序实现多选删除列表数据功能示例
Jan 15 Javascript
微信小程序云开发如何使用npm安装依赖
May 18 Javascript
JS如何使用剪贴板操作Clipboard API
May 17 Javascript
深入浅析React中diff算法
May 19 Javascript
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
DC《神奇女侠2》因疫情推迟上映 温子仁新恐怖片《恶性》撤档
2020/04/09 欧美动漫
php木马攻击防御之道
2008/03/24 PHP
php 获取SWF动画截图示例代码
2014/02/10 PHP
js无刷新操作table的行和列
2014/03/27 Javascript
jquery实现横向图片轮播特效代码分享
2015/11/19 Javascript
JSON字符串转换JSONObject和JSONArray的方法
2016/06/03 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
2017/02/18 Javascript
在Vue中如何使用Cookie操作实例
2017/07/27 Javascript
vue-cli 3.x 修改dist路径的方法
2018/09/19 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
2018/11/28 Javascript
React+Antd+Redux实现待办事件的方法
2019/03/14 Javascript
jQuery实现动态添加和删除input框实例代码
2019/03/26 jQuery
微信小程序实现吸顶特效
2020/01/08 Javascript
JavaScript碰撞检测原理及其实现代码
2020/03/12 Javascript
[05:31]DOTA2英雄梦之声_第08期_莉娜
2014/06/23 DOTA
深入浅出学习python装饰器
2017/09/29 Python
Python读取数据集并消除数据中的空行方法
2018/07/12 Python
python实现栅栏加解密 支持密钥加密
2019/03/20 Python
pyenv与virtualenv安装实现python多版本多项目管理
2019/08/17 Python
pytorch获取模型某一层参数名及参数值方式
2019/12/30 Python
Pytest mark使用实例及原理解析
2020/02/22 Python
非常漂亮的CSS3百叶窗焦点图动画
2016/02/24 HTML / CSS
html5自定义video标签的海报与播放按钮功能
2019/12/04 HTML / CSS
世界上最大的曲棍球商店:Pro Hockey Life
2017/10/30 全球购物
Flesh Beauty官网:露华浓集团旗下彩妆品牌
2021/02/15 全球购物
PHP面试题大全
2015/10/16 面试题
什么是Rollback Segment
2013/04/22 面试题
文案策划求职信
2014/04/14 职场文书
信用社主任竞聘演讲稿
2014/05/23 职场文书
党的群众路线批评与自我批评发言稿
2014/10/16 职场文书
优秀大学生事迹材料
2014/12/24 职场文书
个人求职意向书
2015/05/11 职场文书
2016年第104个国际护士节活动总结
2016/04/06 职场文书
管理者们如何制定2019年的工作计划?
2019/07/01 职场文书
matlab xlabel位置的设置方式
2021/05/21 Python
pytorch 权重weight 与 梯度grad 可视化操作
2021/06/05 Python