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

 更新时间:2019年07月31日 09:49:57   作者:xiaxiaoxian  
这篇文章主要介绍了ES6 Iterator接口和for...of循环用法,结合实例形式分析了Iterator接口和for...of循环相关使用技巧,需要的朋友可以参考下

本文实例讲述了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>

运行结果:

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>

运行结果:

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

运行结果:

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

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

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

相关文章

  • 幻宇的层模拟窗口效果-提供演示和下载

    幻宇的层模拟窗口效果-提供演示和下载

    幻宇的层模拟窗口效果-提供演示和下载...
    2007-01-01
  • javascript连续赋值问题

    javascript连续赋值问题

    本文通过具体的示例来给大家详细解释了下javascript的连续赋值问题,十分的实用,有需要的小伙伴可以参考下。
    2015-07-07
  • 微信小程序wx.request拦截器使用详解

    微信小程序wx.request拦截器使用详解

    这篇文章主要介绍了微信小程序wx.request拦截器详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07
  • JavaScript调试工具汇总

    JavaScript调试工具汇总

    这篇文章主要介绍了7款基于桌面和WEB的JavaScript调试工具,更有效地处理动态类型使应用程序更符合编码标准,不管你是新学习javascript的菜鸟还是业界大神,都非常的有用。
    2014-12-12
  • js 实现打印网页中定义的部分内容的代码

    js 实现打印网页中定义的部分内容的代码

    有时候页面需要打印功能,如果再做一个页面不利于优化,两个页面内容一样了,所以可以用js实现内容的打印不需要的就不打印。
    2010-04-04
  • JavaScript 产生不重复的随机数三种实现思路

    JavaScript 产生不重复的随机数三种实现思路

    在 JavaScript 中,一般产生的随机数会重复,但是有时我们需要不重复的随机数,如何实现?本文给于解决方法,需要的朋友可以参考下
    2012-12-12
  • 用按钮控制iframe显示的网页实现方法

    用按钮控制iframe显示的网页实现方法

    在iframe中显示的网页已经是一件平凡无奇的事了,不过可能依然有很多的童鞋没不知所措吧,没关系,因为本文的出现将会带你脱离苦海,感性的朋友可以了解下啊,或许对你有所帮助
    2013-02-02
  • javascript dom 操作详解 js加强

    javascript dom 操作详解 js加强

    javascript dom 操作详解 js加强操作实现代码。
    2009-07-07
  • JavaScript实现给浮点数添加千分位逗号的多种方法

    JavaScript实现给浮点数添加千分位逗号的多种方法

    JavaScript 是一门强大的前端语言,在处理数值格式化时提供了多种方法,在开发过程中,我们经常需要将大数字格式化,使其更具可读性,例如,将 12000000.11 转换为 12,000,000.11,本文将详细介绍 JavaScript 中如何实现这种格式化,需要的朋友可以参考下
    2025-04-04
  • ES6学习教程之块级作用域详解

    ES6学习教程之块级作用域详解

    很多语言中都有块级作用域,但JS没有,它使用var声明变量,以function来划分作用域,大括号“{}” 却限定不了var的作用域,下面这篇文章主要给大家介绍了关于ES6学习教程之块级作用域的相关资料,需要的朋友可以参考下。
    2017-10-10

最新评论