• ES6入门之Iterator和for...of


    Iterator遍历器

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

    作用:

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

    Iterator的遍历过程:

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

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

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

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

    var it = makeIterator(['a', 'b']);
    
    it.next() // { value: "a", done: false }
    it.next() // { value: "b", done: false }
    it.next() // { value: undefined, done: true }
    
    function makeIterator(array) {
      var nextIndex = 0;
      return {
        next: function() {
          return nextIndex < array.length ?
            {value: array[nextIndex++], done: false} :
            {value: undefined, done: true};
        }
      };
    }

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

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

    var str = new String("hi");
    
    [...str] // ["h", "i"]
    
    str[Symbol.iterator] = function() {
      return {
        next: function() {
          if (this._first) {
            this._first = false;
            return { value: "bye", done: false };
          } else {
            return { done: true };
          }
        },
        _first: true
      };
    };
    
    [...str] // ["bye"]
    str // "hi"

    for...of

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

  • 相关阅读:
    [转] Web前端优化之 Flash篇
    [转] Web 前端优化最佳实践之 Mobile(iPhone) 篇
    [转] Web前端优化之 图片篇
    [转] Web前端优化之 Javascript篇
    [转] Web前端优化之 CSS篇
    react事件获取元素
    Nodejs学习笔记02【module】
    Nodejs学习笔记01【EventEmitter】
    javascript运算符优先级
    jQuery-placeholder
  • 原文地址:https://www.cnblogs.com/sker/p/5520518.html
Copyright © 2020-2023  润新知