ES6 Iterator接口和for...of循环用法分析


Posted in Javascript onJuly 31, 2019

本文实例讲述了ES6 Iterator接口和for...of循环用法。分享给大家供大家参考,具体如下:

<script>
// 数组已经帮我们内置这个Iterator接口
let arr = ['hello','world'];
let map = arr[Symbol.iterator](); // 数组直接调用iterator接口,返回一个对象map
console.log(map.next()); // {value: "hello", done: false} done:循环没有下一步状态:true没有,false:有状态,循环并没有结束
console.log(map.next()); // {value: "world", done: false}
console.log(map.next()); // {value: undefined, done: true}
</script>

运行结果:

ES6 Iterator接口和for...of循环用法分析

for...of循环,就是不断的调用Iterator接口。

object数据结构没有实现Iterator接口。

自定义实现object的Iterator接口

<script>
let obj ={
  start: [1,5,7],
  end:[8,4,3],
  [Symbol.iterator](){
   let self = this;
   let index = 0;
   let arr = self.start.concat(self.end);
   let len = arr.length;
   return {
    next(){
     if(index<len){
      return{
       value:arr[index++],
       done:false
      }
     }else{
      return {
       value:arr[index++],
       done:true
      }
     }
    }
   }
  }
}
for(let key of obj){ // for...of 背后用的就是iterator接口
  console.log(key); // 1 5 7 8 4 3
}
</script>

运行结果:

ES6 Iterator接口和for...of循环用法分析

<script>
let arr = ['xixiaoxian','jamin'];
for(let value of arr){
  console.log(value); // xixiaoxian  jamin
}
</script>

运行结果:

ES6 Iterator接口和for...of循环用法分析

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

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

Javascript 相关文章推荐
关于图片的预加载过程中隐藏未知的
Dec 19 Javascript
Js放到HTML文件中的哪个位置有什么区别
Aug 21 Javascript
jquery动态更换设置背景图的方法
Mar 25 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
Nov 30 Javascript
Javascript基础_嵌入图像的简单实现
Jun 14 Javascript
JavaScript九九乘法口诀表的简单实现
Oct 04 Javascript
Bootstrap基本组件学习笔记之进度条(15)
Dec 08 Javascript
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
原生js检测页面加载完毕的实例
Sep 11 Javascript
JavaScript学习笔记之DOM基础操作实例小结
Jan 09 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
Mar 07 Javascript
全面解析JavaScript Module模式
Jul 24 Javascript
Vuex 模块化使用详解
Jul 31 #Javascript
判断“命令按钮”是否被鼠标单击详解
Jul 31 #Javascript
express框架下使用session的方法
Jul 31 #Javascript
ES6中异步对象Promise用法详解
Jul 31 #Javascript
JS实现在线ps功能详解
Jul 31 #Javascript
ES6中定义类和对象的方法示例
Jul 31 #Javascript
Vue+Koa2 打包后进行线上部署的教程详解
Jul 31 #Javascript
You might like
Zend framework处理一个http请求的流程分析
2010/02/08 PHP
php 批量替换html标签的实例代码
2013/11/26 PHP
php语言注释,单行注释和多行注释
2018/01/21 PHP
jQuery自动切换/点击切换选项卡效果的小例子
2013/08/12 Javascript
javascript不可用的问题探究
2013/10/01 Javascript
JS的数组迭代方法
2015/02/05 Javascript
Jquery中Event对象属性小结
2015/02/27 Javascript
js输出数据精确到小数点后n位代码
2016/07/02 Javascript
深入理解jQuery.data() 的实现方式
2016/11/30 Javascript
JavaScript cookie详解及简单实例应用
2016/12/31 Javascript
JavaScript解析任意形式的json树型结构展示
2017/07/23 Javascript
微信小程序getPhoneNumber获取用户手机号
2017/09/29 Javascript
angular 实现的输入框数字千分位及保留几位小数点功能示例
2018/06/19 Javascript
小程序日历控件使用方法详解
2018/12/29 Javascript
微信小程序非跳转式组件授权登录的方法示例
2019/05/22 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
2019/09/21 Javascript
微信小程序实现图片压缩
2019/12/03 Javascript
如何将Node.js中的回调转换为Promise
2020/11/10 Javascript
Python去掉字符串中空格的方法
2014/03/11 Python
python一行sql太长折成多行并且有多个参数的方法
2018/07/19 Python
Ubuntu下升级 python3.7.1流程备忘(推荐)
2018/12/10 Python
PyCharm汉化安装及永久激活详细教程(靠谱)
2020/01/16 Python
python绘制趋势图的示例
2020/09/17 Python
全面介绍python中很常用的单元测试框架unitest
2020/12/14 Python
用CSS3实现瀑布流布局的示例代码
2017/11/10 HTML / CSS
html5使用canvas绘制太阳系效果
2014/12/15 HTML / CSS
html5 拖拽及用 js 实现拖拽功能的示例代码
2020/10/23 HTML / CSS
草莓巧克力:Shari’s Berries
2017/02/07 全球购物
英国领先的汽车轮胎和快速健康中心:Kwik Fit
2017/10/29 全球购物
自我鉴定怎么写
2013/12/05 职场文书
回门宴父母答谢词
2014/01/26 职场文书
《美丽的南沙群岛》教学反思
2014/04/27 职场文书
考察现实表现材料
2014/05/19 职场文书
作文批改评语
2014/12/25 职场文书
欢送领导祝酒词
2015/08/12 职场文书
Nginx 502 Bad Gateway错误原因及解决方案
2021/03/31 Servers