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 相关文章推荐
在Javascript中为String对象添加trim,ltrim,rtrim方法
Sep 22 Javascript
封装好的省市地区联动控件附下载
Aug 13 Javascript
JavaScript中对象介绍
Dec 31 Javascript
每天一篇javascript学习小结(Boolean对象)
Nov 12 Javascript
原生js实现自由拖拽弹窗代码demo
Jun 29 Javascript
JavaScript实现打地鼠小游戏
Apr 23 Javascript
vue内置指令详解
Apr 03 Javascript
js input输入百分号保存数据库失败的解决方法
May 26 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
Jun 27 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
Dec 19 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
Mar 16 Javascript
Vue elementui字体图标显示问题解决方案
Aug 18 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
php正则匹配文章中的远程图片地址并下载图片至本地
2015/09/29 PHP
PHP实现简单的协程任务调度demo示例
2020/02/01 PHP
JavaScript 拖拉缩放效果
2008/12/10 Javascript
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
2010/11/14 Javascript
深入解析JavaScript中的变量作用域
2013/12/06 Javascript
jquery设置按钮停顿3秒不可用
2014/03/07 Javascript
当某个文本框成为焦点时即清除文本框内容
2014/04/28 Javascript
JavaScript比较两个对象是否相等的方法
2015/02/06 Javascript
JavaScript动态插入CSS的方法
2015/12/10 Javascript
JavaScript面向对象分层思维全面解析
2016/11/22 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
JS查找英文文章中出现频率最高的单词
2017/03/20 Javascript
详解Vuex中mapState的具体用法
2017/09/28 Javascript
解决vue 绑定对象内点击事件失效问题
2018/09/05 Javascript
vue解决弹出蒙层滑动穿透问题的方法
2018/09/22 Javascript
微信小程序实现留言板功能
2018/11/02 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
2019/09/04 Javascript
python使用win32com在百度空间插入html元素示例
2014/02/20 Python
Django添加feeds功能的示例
2018/08/07 Python
Python小游戏之300行代码实现俄罗斯方块
2019/01/04 Python
python sorted函数的小练习及解答
2019/09/18 Python
Python如何避免文件同名产生覆盖
2020/06/09 Python
python 基于wx实现音乐播放
2020/11/24 Python
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
2018/08/28 HTML / CSS
Bibloo罗马尼亚网站:女装、男装、童装及鞋子和配饰
2019/07/20 全球购物
在阿尔卑斯山或希腊度过快乐假期:Alpine Elements
2019/12/28 全球购物
秋季运动会加油稿200字
2014/01/11 职场文书
装修设计师求职信
2014/02/26 职场文书
创意广告词
2014/03/17 职场文书
学生会主席竞聘书
2014/03/31 职场文书
爱耳日活动总结
2014/04/30 职场文书
关于成立领导小组的通知
2015/04/23 职场文书
运动员入场词
2015/07/18 职场文书
一文搞懂Python Sklearn库使用
2021/08/23 Python
Redis入门基础常用操作命令整理
2022/06/01 Redis