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 相关文章推荐
jQuery功能函数详解
Feb 01 Javascript
jquery不常用方法汇总
Jul 26 Javascript
浅谈String.valueOf()方法的使用
Jun 06 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
Jan 11 Javascript
jQuery基于正则表达式的表单验证功能示例
Jan 21 Javascript
jQuery获取Table某列的值(推荐)
Mar 03 Javascript
浅谈webpack对样式的处理
Jan 05 Javascript
vue内置指令详解
Apr 03 Javascript
vue 点击展开显示更多(点击收起部分隐藏)
Apr 09 Javascript
echarts多条折线图动态分层的实现方法
May 24 Javascript
使用vue实现一个电子签名组件的示例代码
Jan 06 Javascript
js实现盒子滚动动画效果
Aug 09 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 curl 登录163邮箱并抓取邮箱好友列表的代码(经测试)
2011/04/07 PHP
解析php下载远程图片函数 可伪造来路
2013/06/25 PHP
ThinkPHP实现动态包含文件的方法
2014/11/29 PHP
php将字符串随机分割成不同长度数组的方法
2015/06/01 PHP
PHP实现的浏览器检查类
2016/04/11 PHP
javascript Select标记中options操作方法集合
2008/10/22 Javascript
基于JQuery实现异步刷新的代码(转载)
2011/03/29 Javascript
jquery mobile事件多次绑定示例代码
2013/09/13 Javascript
页面按钮禁用与解除禁用的方法
2014/02/19 Javascript
浅谈javascript中的instanceof和typeof
2015/02/27 Javascript
关于JavaScript的变量的数据类型的判断方法
2015/08/14 Javascript
移动开发之自适应手机屏幕宽度
2016/11/23 Javascript
jQuery 实现双击编辑表格功能
2017/06/19 jQuery
详解Node.js中的Async和Await函数
2018/02/22 Javascript
了解JavaScript中的选择器
2019/05/24 Javascript
微信小程序利用云函数获取手机号码
2019/12/17 Javascript
举例讲解Python设计模式编程的代理模式与抽象工厂模式
2016/01/16 Python
Python使用poplib模块和smtplib模块收发电子邮件的教程
2016/07/02 Python
python获取网页中所有图片并筛选指定分辨率的方法
2018/03/31 Python
python 定时修改数据库的示例代码
2018/04/08 Python
python 通过logging写入日志到文件和控制台的实例
2018/04/28 Python
Python加载带有注释的Json文件实例
2018/05/23 Python
python重试装饰器的简单实现方法
2019/01/31 Python
Python里字典的基本用法(包括嵌套字典)
2019/02/27 Python
python 一篇文章搞懂装饰器所有用法(建议收藏)
2019/08/23 Python
Kears 使用:通过回调函数保存最佳准确率下的模型操作
2020/06/17 Python
卖房协议书
2014/04/11 职场文书
《最大的麦穗》教学反思
2014/04/17 职场文书
我爱读书演讲稿
2014/05/07 职场文书
预备党员综合考察材料
2014/05/31 职场文书
学生会感恩节活动方案
2014/10/11 职场文书
深入开展党的群众路线教育实践活动心得体会
2014/11/05 职场文书
停课通知书
2015/04/24 职场文书
2015年电话客服工作总结
2015/05/18 职场文书
个人工作决心书
2015/09/22 职场文书
Java多条件判断场景中规则执行器的设计
2021/06/26 Java/Android