ES6 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程序设计有所帮助。

赞 (0)

相关推荐

  • ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)

    一.什么是迭代器? 生成器概念在Java,Python等语言中都是具备的,ES6也添加到了JavaScript中.Iterator可以使我们不需要初始化集合,以及索引的变量,而是使用迭代器对象的 next 方法,返回集合的下一项的值,偏向程序化. 迭代器是带有特殊接口的对象.含有一个next()方法,调用返回一个包含两个属性的对象,分别是value和done,value表示当前位置的值,done表示是否迭代完,当为true的时候,调用next就无效了. ES5中遍历集合通常都是 for循环,数组

  • 详谈ES6中的迭代器(Iterator)和生成器(Generator)

    前面的话 用循环语句迭代数据时,必须要初始化一个变量来记录每一次迭代在数据集合中的位置,而在许多编程语言中,已经开始通过程序化的方式用迭代器对象返回迭代过程中集合的每一个元素 迭代器的使用可以极大地简化数据操作,于是ES6也向JS中添加了这个迭代器特性.新的数组方法和新的集合类型(如Set集合与Map集合)都依赖迭代器的实现,这个新特性对于高效的数据处理而言是不可或缺的,在语言的其他特性中也都有迭代器的身影:新的for-of循环.展开运算符(...),甚至连异步编程都可以使用迭代器 本文将详细介

  • ES6入门教程之Iterator与for...of循环详解

    本文主要介绍了关于ES6中Iterator与for...of循环的相关内容,分享出来供大家参考学习,需要的朋友们下面来一起看看详细的介绍: 一.Iterator(遍历器) 遍历器(Iterator)是一种协议,任何对象只要部署了这个协议,就可以完成遍历操作.在ES6中遍历操作特质for-.of循环. 它的作用主要有两个: 为遍历对象的属性提供统一的接口. 使对象的属性能够按次序排列. ES6的遍历器协议规定,部署了next方法的对象,就具备了遍历器功能.next方法必须返回一个包含value和d

  • ES6概念 Symbol.keyFor()方法

    Symbol.keyFor()方法: 此方法会获取对应Symbol值的键. 更多关于Symbol内容可以参阅ES2015 Symbol一章节. 语法结构: Symbol.keyFor(sym); 参数解析: (1).sym:必需,要获取键值的Symbol值. 代码实例: let s = Symbol.for("我们"); console.log(Symbol.keyFor(s)); 上面的代码可以获取指定Symbol值的键. let s = Symbol("我们")

  • ES6新特性二：Iterator(遍历器)和for-of循环详解

    本文实例讲述了ES6新特性之Iterator(遍历器)和for-of循环.分享给大家供大家参考,具体如下: 1. 遍历数组 for-of工作原理:迭代器有一个next方法,for循环会不断调用这个iterator.next方法来获取下一个值,直到返回值中的 done属性为true的时候结束循环. ① 在ES6之前 var arr = [1,2,3,4,5,6]; arr.name = 'a'; for (var index = 0; index < arr.length; index++) {

  • ES6概念 ymbol.for()方法

    Symbol.for()方法: 使用Symbol()方法可以创建一个Symbol类型的值. 代码实例如下: let s = Symbol(); let one = Symbol("我们"); let two = Symbol("我们"); console.log(one == two); 即便是键值相同两个Symbol类型的值也是不相同的. 更多关于Symbol的内容可以参阅ES2015 Symbol一章节. 使用Symbol.for()方法也可以创建一个Symbo

  • ES6中Iterator与for..of..遍历用法分析

    本文实例讲述了ES6中Iterator与for..of..遍历用法.分享给大家供大家参考,具体如下: Iterator与for..of..遍历 1.Iterator概念 遍历器(Iterator)是一种接口,为各种不同的数据结构提供统一的访问机制.JS中有些数据结构具备原生的Iterator接口.为了更好理解这个概念,我们也可以自己写一个Iterator. var it = simIteractor(['hi','ES5']); console.log(it.next()); //Object

  • ES6教程之for循环和Map,Set用法分析

    本文实例讲述了ES6教程之for循环和Map,Set用法.分享给大家供大家参考,具体如下: 现在大家先想一想,如果要你遍历一个数组的元素,你会选择如何去做呢?一般都会想起for循环: for (var index = 0; index < myArray.length; index++) { console.log(myArray[index]); } 可惜我得告诉你,这个方法是二十年的人才应该使用的方法,在ES5中已经提出了更为简便的forEach方法,代码如下: myArray.forEac

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

    ES6 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} do

  • JAVA Iterator接口与增强for循环的实现

    1 Iterator迭代器 1.1 Iterator接口 java.util.Iterator接口也是Java集合中的一员: Iterator主要用于迭代访问(即遍历)Collection中的元素,因此Iterator对象也被称为迭代器. public Iterator iterator(): 获取集合对应的迭代器,用来遍历集合中的元素. 迭代:Collection集合元素的通用获取方式.在取元素之前先判断集合中有没有元素.如果有,就把这个元素取出来:继续判断,如果还有就再取出来:就这样一直把集

  • ES6 Promise对象的含义和基本用法分析

    本文实例讲述了ES6 Promise对象的含义和基本用法.分享给大家供大家参考,具体如下: 1.Promise的含义 Promise是异步编程的一种解决方案,比传统的解决方案(回调函数和事件)更合理更强大. 所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件 (通常是一个异步操作)的结果.从语法上说,Promise是一个对象,从它可以获取异步操作的消息. Promise对象有以下2个特点: 1.对象的状态不受外界影响.Promise对象代表一个异步操作,有三种状态:Pend

  • Python学习笔记之While循环用法分析

    本文实例讲述了Python学习笔记之While循环用法.分享给大家供大家参考,具体如下: 前面一篇<Python学习笔记之For循环用法>详细介绍了Python for循环,这里再来讲述一下while循环的使用方法: Python 中的While循环 For 循环是一种有限迭代,意味着循环主体将运行预定义的次数.这与无限迭代循环不同,无限迭代循环是指循环重复未知次数,并在满足某个条件时结束,while 循环正是这种情况.下面是一个 while 循环的示例: card_deck = [4, 11

  • PHP迭代器接口Iterator用法分析

    本文实例讲述了PHP迭代器接口Iterator用法.分享给大家供大家参考,具体如下: PHP Iterator接口的作用是允许对象以自己的方式迭代内部的数据,从而使它可以被循环访问,Iterator接口摘要如下: Iterator extends Traversable { //返回当前索引游标指向的元素 abstract public mixed current ( void ) //返回当前索引游标指向的键 abstract public scalar key ( void ) //移动当前

  • Java List接口与Iterator接口及foreach循环使用解析

    Java List接口与Iterator接口及foreach循环使用解析

    目录 List接口 ArrayList集合 LinkedList集合 Iterator接口 foreach循环 List接口 List接口继承Collection接口,属于单列集合,在List集合中允许出现重复的元素,所有的元素是以一种线性方式进行存储的,在程序中通过索引来访问集合中的指定元素,元素是顺序存储的,即元素的存入顺序和取出顺序一致. ArrayList集合 ArrayList是List接口的一个实现类,在ArrayList内部封装了一个长度可变的数组对象. package 集合类;

  • ES6 Iterator遍历器原理，应用场景及相关常用知识拓展详解

    本文实例讲述了ES6 Iterator遍历器原理,应用场景及相关常用知识拓展.分享给大家供大家参考,具体如下: 介绍Iterator之前先列举下js的表示数据集合结构的几种方式: 在es6之前有 Array , Object, es6新增了 map, set,当然用户也可以组合使用这几种数据结构,灵活存储数据. 但是当数据结构变得复杂后,怎样取到里面的数据就也相对复杂,这就需要有一种读取数据的统一的接口机制,来处理不同的数据结构. 遍历器就是这样一种接口机制,Iterator是一种接口,为不同数

  • PHP聚合式迭代器接口IteratorAggregate用法分析

    本文实例讲述了PHP聚合式迭代器接口IteratorAggregate用法.分享给大家供大家参考,具体如下: PHP IteratorAggregate又叫聚合式迭代器,它提供了创建外部迭代器的接口,接口摘要如下: IteratorAggregate extends Traversable { abstract public Traversable getIterator ( void ) } 实现getIterator方法时必须返回一个实现了Iterator接口的类的实例. 例子说明: <?p

随机推荐