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 相关文章推荐
基于jQuery判断两个元素是否有重叠部分的代码
Jul 25 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
Nov 17 Javascript
JavaScript生成的动态下雨背景效果实现方法
Feb 25 Javascript
JavaScript内存管理介绍
Mar 13 Javascript
JavaScript实现基于十进制的四舍五入实例
Jul 17 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
Sep 14 Javascript
JavaScript模拟实现封装的三种方式及写法区别
Oct 27 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
Dec 09 Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
Nov 05 Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
Jun 13 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
Jul 03 Javascript
JavaScript与JQuery框架基础入门教程
Jul 15 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
Netflix将与CLAMP、乙一以及冲方丁等6名知名制作人合伙展开原创动画计划!
2020/03/06 日漫
php redis实现文章发布系统(用户投票系统)
2017/03/04 PHP
laravel 实现用户登录注销并限制功能
2019/10/24 PHP
TP5(thinkPHP5)框架使用ajax实现与后台数据交互的方法小结
2020/02/10 PHP
PHP 与 js的通信(via ajax,json)
2010/11/16 Javascript
myFocus slide3D v1.1.0 使用方法与下载
2011/01/12 Javascript
事件绑定之小测试  onclick &amp;&amp; addEventListener
2011/07/31 Javascript
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
2013/11/03 Javascript
面向对象设计模式的核心法则
2013/11/10 Javascript
jqgrid 表格数据导出实例
2013/11/21 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
2014/04/12 Javascript
Javascript封装DOMContentLoaded事件实例
2014/06/12 Javascript
快速学习jQuery插件 Cookie插件使用方法
2015/12/01 Javascript
Javascript复制实例详解
2016/01/28 Javascript
jquery实现拖动效果(代码分享)
2017/01/25 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
2017/03/21 Javascript
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
2017/06/16 Javascript
JS运动特效之任意值添加运动的方法分析
2018/01/24 Javascript
浅谈js获取ModelAndView值的问题
2018/03/28 Javascript
记录vue做微信自定义分享的一些问题
2019/09/12 Javascript
在Vue中使用HOC模式的实现
2020/08/23 Javascript
vue-cli3中配置alias和打包加hash值操作
2020/09/04 Javascript
JS实现密码框效果
2020/09/10 Javascript
Python随机生成数模块random使用实例
2015/04/13 Python
Python模拟登陆淘宝并统计淘宝消费情况的代码实例分享
2016/07/04 Python
浅谈使用Python变量时要避免的3个错误
2017/10/30 Python
selenium3+python3环境搭建教程图解
2018/12/07 Python
Python统计一个字符串中每个字符出现了多少次的方法【字符串转换为列表再统计】
2019/05/05 Python
Python 切分数组实例解析
2019/11/07 Python
Python count函数使用方法实例解析
2020/03/23 Python
公司财务工作总结的自我评价
2013/11/23 职场文书
社区敬老月活动实施方案
2014/02/17 职场文书
创建精神文明单位实施方案
2014/03/08 职场文书
小学生清明节演讲稿
2014/09/05 职场文书
公司晚会主持词
2019/04/17 职场文书
Redis实现分布式锁的五种方法详解
2022/06/14 Redis