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 &amp; DHTML 实例编程(教程)DOM基础和基本API
Jun 02 Javascript
JS实现点击按钮自动增加一个单元格的方法
Mar 09 Javascript
jQuery判断元素上是否绑定了指定事件的方法
Mar 17 Javascript
学习javascript面向对象 理解javascript对象
Jan 04 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
Mar 21 Javascript
Node.js和Express简单入门介绍
Mar 24 Javascript
Express的HTTP重定向到HTTPS的方法
Jun 06 Javascript
angularjs性能优化的方法
Sep 05 Javascript
JavaScript 点击触发复制功能实例详解
Nov 02 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
Nov 19 Javascript
深入学习JavaScript 高阶函数
Jun 11 Javascript
Vue 实现html中根据类型显示内容
Oct 28 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使用feof()函数读文件的方法
2014/11/07 PHP
Thinkphp单字母函数使用指南
2016/05/08 PHP
PHP入门教程之表单与验证实例详解
2016/09/11 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
js history对象简单实现返回和前进
2013/10/30 Javascript
DOM操作一些常用的属性汇总
2015/03/13 Javascript
js实现的四级左侧网站分类菜单实例
2015/05/06 Javascript
jQuery实现弹出窗口中切换登录与注册表单
2015/06/05 Javascript
浅谈jquery的map()和each()方法
2016/06/12 Javascript
chrome浏览器如何断点调试异步加载的JS
2016/09/05 Javascript
JavaScript之underscore_动力节点Java学院整理
2017/07/03 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
2017/08/21 Javascript
javascript高级模块化require.js的具体使用方法
2017/10/31 Javascript
JS处理一些简单计算题
2018/02/24 Javascript
vue中动态添加class类名的方法
2018/09/05 Javascript
基于vue+axios+lrz.js微信端图片压缩上传方法
2019/06/25 Javascript
vue 验证两次输入的密码是否一致的方法示例
2020/09/29 Javascript
js实现简易拖拽的示例
2020/10/26 Javascript
[45:14]Optic vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
Python中异常重试的解决方案详解
2017/05/05 Python
Python3网络爬虫中的requests高级用法详解
2019/06/18 Python
python多线程+代理池爬取天天基金网、股票数据过程解析
2019/08/13 Python
python 实现单通道转3通道
2019/12/03 Python
使用Python构造hive insert语句说明
2020/06/06 Python
Finishline官网:美国一家领先的运动品牌鞋类、服装零售商
2016/07/20 全球购物
倩碧英国官网:Clinique英国
2018/08/10 全球购物
波兰珠宝品牌:YES
2019/08/09 全球购物
HSRP的含义以及如何工作
2014/09/10 面试题
北京某科技有限公司C# .net笔试题
2014/09/27 面试题
下面代码从性能上考虑,有什么问题
2015/04/03 面试题
中学老师的自我评价
2013/11/07 职场文书
酒店人事专员岗位职责
2013/12/19 职场文书
秋季校运会广播稿100字
2014/09/18 职场文书
2014年创先争优工作总结
2014/12/11 职场文书
2022新作动画《福星小子》释出宣传影片 加入内田真礼&宫野真守配音演出
2022/04/08 日漫
MySQL选择合适的备份策略和备份工具
2022/06/01 MySQL