一.Iterator (遍历器)的概念:

  遍历器(Iterator)就是这样一种机制。它是一种接口,为各种不同的数据结构提供统一的访问机制。任何数据结构只

  要部署Iterator接口,就可以完成遍历操作(即依次处理该数据结构的所有成员)。

  Iterator的作用有三个:

    一是为各种数据结构,提供一个统一的、简便的访问接口;

    二是使得数据结构的成员能够按某种次序排列;

    三是ES6创造了一种新的遍历命令for...of循环,Iterator接口主要供for...of消费。

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

  let arr = ['a','b','c'];

  let it = arr[Symbol.iterator]();

  iter.next(); // {value:'a',done:false}

  iter.next(); // {value:'b',done:false}

  iter.next(); // {value:'c',done:false}

  iter.next(); // {value:undefined,done:true}

  2.对象(Object)之所以没有默认部署Iterator接口,是因为对象的哪个属性先遍历,哪个属性后遍历是不确定的,需

  要开发者手动指定。

  本质上,遍历器是一种线性处理,对于任何非线性的数据结构,部署遍历器接口,就等于部署一种线性转换。

  不过,严格地说,对象部署遍历器接口并不是很必要,因为这时对象实际上被当作Map结构使用,ES5没有Map结构,

  而ES6原生提供了。

  (1).一个对象如果要有可被for...of循环调用的Iterator接口,就必须在Symbol.iterator的属性上部署遍历器生成方

  法(原型链上的对象具有该方法也可)。  

  class RangeIterator {
    constructor(start, stop) {
      this.value = start;
      this.stop = stop;
    }

    [Symbol.iterator]() { return this; }

    next() {
      var value = this.value;
      if (value < this.stop) {
        this.value++;
        return {done: false, value: value};
      } else {
        return {done: true, value: undefined};
      }
    }
  }

  function range(start, stop) {
    return new RangeIterator(start, stop);
  }

  for (var value of range(0, 3)) {
    console.log(value); // 0 1 2
  }

  (2).代码首先在构造函数的原型链上部署Symbol.iterator方法,调用该方法会返回遍历器对象iterator,调用该对象

    的next方法,在返回一个值的同时,自动将内部指针移到下一个实例。

    function Obj(value) {
      this.value = value;
      this.next = null;
    }

    Obj.prototype[Symbol.iterator] = function() {
      var iterator = {
        next: mynext
      };

      var current = this;

      function mynext() {
        if (current) {
          var value = current.value;
          current = current.next;
          return {
            done: false,
            value: value
          };
        } else {
          return {
            done: true
          };
        }
      }
      return iterator;
    }

    var one = new Obj(1);
    var two = new Obj(2);
    var three = new Obj(3);

    one.next = two;
    two.next = three;

    for (var i of one){

      console.log(i); // 1 2 3
    }

  (3).类似数组的对象调用数组的Symbol.iterator方法的例子:

    let iterable = {
      0: 'a',
      1: 'b',
      2: 'c',
      length: 3,
      [Symbol.iterator]: Array.prototype[Symbol.iterator]
    };
    for (let item of iterable) {
      console.log(item); // 'a', 'b', 'c'
    }

  (4).普通对象部署数组的Symbol.iterator方法,并无效果:

    let iterable = {
      a: 'a',
      b: 'b',
      c: 'c',
      length: 3,
      [Symbol.iterator]: Array.prototype[Symbol.iterator]
    };
    for (let item of iterable) {
      console.log(item); // undefined, undefined, undefined
    }

二.for...of循环:

  一个数据结构只要部署了Symbol.iterator属性,就被视为具有iterator接口,就可以用for...of循环遍历它的成员。

  也就是说,for...of循环内部调用的是数据结构的Symbol.iterator方法。

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

  1.for...of循环可以代替数组实例的forEach方法:

  const arr = ['red', 'green', 'blue'];

  arr.forEach(function (element, index) {
    console.log(element); // red green blue
    console.log(index); // 0 1 2
  });

  for(let i of arr){

    console.log(i); //  red green blue

  }

  2.JavaScript原有的for...in循环,只能获得对象的键名,不能直接获取键值。ES6提供for...of循环,允许遍历获得

  键值:

  var arr = ['a','b','c','d'];

  for(let a in arr){

    console.log(a); // 0 1 2 3

  }

  for(let a of arr){

    console.log(a); // a b c d

  }

  3.for...of循环调用遍历器接口,数组的遍历器接口只返回具有数字索引的属性。这一点跟for...in循环也不一样:

  let arr = [3,5,7];

  arr.hello = 'hello';

  for(let i in arr){

    console.log(i); // "0","1","2","3"

  }

  for(let i of arr){

     console.log(i); // "3","5","7"

  }

用vue.js学习es6(六):Iterator和for...of循环的更多相关文章

  1. 用vue.js学习es6(一):基本工具及配置

    一.工具: sublime,node.js,npm 1.安装sublime 的es6插件: (1).在sublime中按Ctrl+`调出console (2).粘贴以下代码到底部命令行并回车(subl ...

  2. 用vue.js学习es6(二):let和const使用

    一.运行及关闭运行: 在上一节中我们用shift+右击在C:\vue\es6文件夹中打开命令行使用:npm run dev,打开了我们的vue界面. 如果要关闭则在命令行中按住ctrl+C则可以关闭. ...

  3. 用vue.js学习es6(五):set和map的使用

    一:Set用法: ES6提供了新的数据结构Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. (1).打印:console.log var data = new Set([1,2,3]); ...

  4. 用vue.js学习es6(四):Symbol类型

    一.Symbol类型: 1.ES6引入了一种新的原始数据类型Symbol,表示独一无二的值.它是JavaScript语言的第七种数据类型,前六种是:Undefined.Null. 布尔值(Boolea ...

  5. 用vue.js学习es6(三):数组、对象和函数的解构

    一.数组的解构: 以前的方式: var arr = [1,2,3]; console.log(arr[0]); //1 console.log(arr[1]); //2 现在的方式: var [a,b ...

  6. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

  7. Vue.js学习笔记(2)vue-router

    vue中vue-router的使用:

  8. vue.js学习资料

    vue.js学习VuejsAPI教程 https://vuejs.org.cn/guide/Vuejs自己的构建工具 http://www.jianshu.com/p/f8e21d87a572如何用v ...

  9. Vue.js学习笔记:在元素 和 template 中使用 v-if 指令

    f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...

随机推荐

  1. 联想 Thinkpad X230 SLIC 2.1 Marker

    等了好久,终于等到了 X230 的 SLIC 2.1 的 Marker !特发帖备份... 基本情况 笔记本:Lenovo X230(i5+8G+500G) 操作系统:Windows 7 Pro x6 ...

  2. visual studio 编辑窗口 设置固定选项卡 使窗口选项卡多行显示

    工具>选项> 确定后 如图就可以多行显示了.

  3. C#开发微信门户及应用(13)-使用地理位置扩展相关应用

    本文继续上一篇<C#开发微信门户及应用(12)-使用语音处理>,继续介绍微信的相关应用.我们知道,地理位置信息可以用来做很多相关的应用,除了我们可以知道用户所在的位置,还可以关联出一些地理 ...

  4. Python input 使用

    Python 3.0 中使用"input" , Python 2.0 中使用"raw_input"Python 3.5: #!C:\Program Files\ ...

  5. shell编程

    最吸引人的莫过于及时看到成果的努力,echo就是最好的初学者反馈函数,因为它的存在你可以及时的打印出结果. 1.分支 if[ ]:then elif ;then else fi 2.简单的循环,循环是 ...

  6. Sublime Text 2 快捷操作

    Sublime Text 2 包含了大量快捷操作,而且还很方便修改和追加自己喜欢的快捷键. 查看快捷键的方式也很简单: 点击菜单栏:Preferences->Key Bindings –Defa ...

  7. Java transient关键字

    Volatile修饰的成员变量在每次被线程访问时,都强迫从主内存中重读该成员变量的值.而且,当成员变量发生变化时,强迫线程将变化值回写到主内存.这样在任何时刻,两个不同的线程总是看到某个成员变量的同一 ...

  8. webuploader上传文件,图片

    WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.官方地址:http://fex.baidu.com/webupload ...

  9. 高性能 TCP & UDP 通信框架 HP-Socket v3.5.3

    HP-Socket 是一套通用的高性能 TCP/UDP 通信框架,包含服务端组件.客户端组件和 Agent 组件,广泛适用于各种不同应用场景的 TCP/UDP 通信系统,提供 C/C++.C#.Del ...

  10. quartz定时+log4net日志+exchangeservice发邮件

    main using System; using System.Collections.Generic; using System.Linq; using System.Text; using Sys ...