Iterator遍历器

遍历器(Iterator)就是这样一种机制。它是一种接口,为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口,就可以完成遍历操作(即依次处理该数据结构的所有成员)。

作用:

  • 为各种数据结构,提供一个统一的、简便的访问接口
  • 使得数据结构的成员能够按某种次序排列
  • ES6创造了一种新的遍历命令for...of循环,Iterator接口主要供for...of消费

Iterator的遍历过程:

(1)创建一个指针对象,指向当前数据结构的起始位置。也就是说,遍历器对象本质上,就是一个指针对象。

(2)第一次调用指针对象的next方法,可以将指针指向数据结构的第一个成员。

(3)第二次调用指针对象的next方法,指针就指向数据结构的第二个成员。

(4)不断调用指针对象的next方法,直到它指向数据结构的结束位置。

在ES6中,有三类数据结构原生具备Iterator接口:数组、某些类似数组的对象、Set和Map结构。

可以覆盖原生的Symbol.iterator方法,达到修改遍历器行为的目的。

for...of

for...of循环可以使用的范围包括数组、Set和Map结构、某些类似数组的对象(比如arguments对象、DOM NodeList对象)、后文的Generator对象,以及字符串。

  1.  
  1. {
  2. let arr=['hello','world'];
  3. let map=arr[Symbol.iterator]();
  4. //done表示是否还有下一步了,false有 true 没有
  5. console.log(map.next()); //{value: "hello", done: false}
  6. console.log(map.next()); //{value: "world", done: false}
  7. console.log(map.next()); //{value: undefined, done: true}
  8. }
  9.  
  10. {
  11. let obj={
  12. start:[1,3,2],
  13. end:[7,9,8],
  14. //声明
  15. [Symbol.iterator](){
  16. //函数体
  17. let self=this;
  18. let index=0; //当前遍历索引
  19. let arr=self.start.concat(self.end); //合并数组
  20. let len=arr.length;//记住数组长度
  21. return {
  22. //iterator部署的时候一定要有next这个方法
  23. next(){
  24. //遍历过程
  25. if(index<len){
  26. return {
  27. value:arr[index++],
  28. done:false
  29. }
  30. }else{
  31. return {
  32. value:arr[index++],
  33. done:true //遍历结束
  34. }
  35. }
  36. }
  37. }
  38. }
  39. }
  40. //验证接口是否部署成功
  41. for(let key of obj){
  42. console.log('key1',key); //1 3 2 7 9 8
  43. }
  44. }
  45.  
  46. {
  47. let arr=['hello','world'];
  48. for(let value of arr){
  49. console.log('value',value); //hello ,world
  50. }
  51. }

es6 语法 (iterator和for...of循环)的更多相关文章

  1. ES6 之 Set数据结构和Map数据结构 Iterator和for...of循环

    ECMAScript 6 入门 Set数据结构 基本用法 ES6提供了新的数据结构Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set本身是一个构造函数,用来生成Set数据结构. va ...

  2. ES6的新特性(14)——Iterator 和 for...of 循环

    Iterator 和 for...of 循环 Iterator(遍历器)的概念 JavaScript 原有的表示“集合”的数据结构,主要是数组(Array)和对象(Object),ES6 又添加了Ma ...

  3. es6 -- Iterator 和 for...of 循环

    1:Iterator(遍历器)的概念 JavaScript 原有的表示“集合”的数据结构,主要是数组(Array)和对象(Object),ES6 又添加了Map和Set.这样就有了四种数据集合,用户还 ...

  4. ES6语法 Promise Iterator

    类和对象 基本定义: class Parent{ constructor(name='lmx'){ //name= 默认值 this.name=name } } let v_parent = new ...

  5. es6笔记(6) Iterator 和 for...of循环

    概要 js中的数组.对象,加上ES6中增加的Map.Set四种数据集合. Iterator提供了一种机制,为各种不同的数据结构提供统一的访问机制.任何数据结构只要部署Iterator接口,就可以完成遍 ...

  6. ES6(Iterator 和 for...of 循环)

    Iterator 和 for...of 循环 1.什么是 Iterator 接口 Iterator 接口功能:用一种相同办法的接口让不同的数据结构得到统一的读取命令的方式 2.Iterator的基本用 ...

  7. ES6语法知识

    let/const(常用) let,const用于声明变量,用来替代老语法的var关键字,与var不同的是,let/const会创建一个块级作用域(通俗讲就是一个花括号内是一个新的作用域) 这里外部的 ...

  8. 14.Iterator 和 for...of 循环

    Iterator 和 for...of 循环 Iterator 和 for...of 循环 Iterator(遍历器)的概念 JavaScript 原有的表示"集合"的数据结构,主 ...

  9. Iterator 和 for...of 循环

    Iterator(遍历器)的概念 § ⇧ JavaScript 原有的表示“集合”的数据结构,主要是数组(Array)和对象(Object),ES6 又添加了Map和Set.这样就有了四种数据集合,用 ...

  10. Iterator和for...of循环

    Iterator和for...of循环 Iterator(遍历器)的概念 数据结构的默认Iterator接口 调用Iterator接口的场合 字符串的Iterator接口 Iterator接口与Gen ...

随机推荐

  1. .net core 发布linux报错“The configured user limit (128) on the number of inotify instances has been reached”

    https://stackoverflow.com/questions/45875981/error-while-reading-json-file-in-dotnet-core-the-config ...

  2. 迷宫-BFS

    迷宫问题 Time Limit:1000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u Submit Status Descript ...

  3. 《http权威指南》读书笔记13

    概述 最近对http很感兴趣,于是开始看<http权威指南>.别人都说这本书有点老了,而且内容太多.我个人觉得这本书写的太好了,非常长知识,让你知道关于http的很多概念,不仅告诉你怎么做 ...

  4. onselectstart属性解决双击出现的蓝色区域

    小伙伴们对 onselect  这个事件应该不陌生吧(在元素中的文本被选中时触发),但当同事问我onselectstart 这个事件的时候,我是一脸蒙蔽,心想,这难道不是随便起的一个方法名吗2333 ...

  5. Docker0 网卡删除

    只需执行下面三步就可以了: 1.yum -y install bridge-utils 2.       ifconfig docker0 down 3.  brctl delbr docker0 执 ...

  6. 将double或则float类型保留小数

    DecimalFormat df=new DecimalFormat("0.0");//“0.00” df.format(price);

  7. sql server 备份与恢复系列三 简单恢复模式下的备份与还原

    一.概述 前面讲了备份的一些理论知识,这篇开始讲在简单恢复模式下的备份与还原.在简单模式下是不能做日志备份的,发生灾难后,数据库最后一次备份之后做的数据修改将是全部丢失的,所以在生产环境下,数据又很重 ...

  8. Android UI(五)云通讯录项目之联系人列表,带侧滑选择,带搜索框

    作者:泥沙砖瓦浆木匠网站:http://blog.csdn.net/jeffli1993个人签名:打算起手不凡写出鸿篇巨作的人,往往坚持不了完成第一章节.交流QQ群:[编程之美 365234583]h ...

  9. 走进javascript——重拾数组

    Array构造器 如果参数只有一个并且是Number类型,那么就是指定数组的长度,但不能是NaN,如果是多个会被当做参数列表. new Array(12) // (12) [undefined × 1 ...

  10. netty源码解解析(4.0)-14 Channel NIO实现:读取数据

     本章分析Nio Channel的数据读取功能的实现. Channel读取数据需要Channel和ChannelHandler配合使用,netty设计数据读取功能包括三个要素:Channel, Eve ...