Iterator(遍历器)

ES6的一些语法乍一看会让人觉得很懵,比如...arr怎么就能拿到每个元素了?解构赋值是怎么解构的?大致了解Iterator之后,就能对前面的问题有所头绪了.

产生:

   除了数组和对象,ES6多了Map和Set两种数据集合,这样就需要一种统一的接口机制，来处理所有不同的数据结构。

作用:

 1.是为各种数据结构，提供一个统一的、简便的访问接口；

 2.是使得数据结构的成员能够按某种次序排列；

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

 

基本原理

  核心是一个指针对象,它有一个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};
    }
  };
}

next方法返回一个对象，表示当前数据成员的信息。这个对象具有value和done两个属性，value属性返回当前位置的成员，done属性是一个布尔值，表示遍历是否结束，即是否还有必要再一次调用next方法。

 

默认Iterator接口

一种数据结构只要部署了 Iterator 接口，我们就称这种数据结构是“可遍历的”（iterable）。

ES6 规定，默认的 Iterator 接口部署在数据结构的Symbol.iterator属性，或者说，一个数据结构只要具有Symbol.iterator属性，就可以认为是“可遍历的”

const obj = {
  [Symbol.iterator] : function () {
    return {
      next: function () {
        return {
          value: 1,
          done: true
        };
      }
    };
  }
};

 

原生具备 Iterator 接口的数据结构如下。并没有Object对象,默认的遍历器并不知道如何确定遍历的属性顺序.

• Array
• Map
• Set
• String
• TypedArray
• 函数的 arguments 对象
• NodeList 对象

我们可以手动调用Symbol.iterator属性来接入接口,实现遍历,也可以用for of 自动接入.Object除外

let arr = ['a', 'b', 'c'];
let iter = 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 }

 let arr = ['a', 'b', 'c'];
      
    for(let item of arr){
      console.log(item)
    }

 

如果Object对象也想通过for of来遍历,是需要手动添加Iterator

Object.prototype[Symbol.iterator] = function() {
    let that = this
    let index = 0
    let arr = Object.keys(that)
    let length = Object.keys(that).length
    return {
        next:() => {
            let value = that[arr[index]]
            let done = (index >= length)
            index++
            return {value,done}
        }
    }

　　

契合场景

  1.拓展运算符

  2.解构赋值

  3.yield*

  4.其他一些参数是数组的情况　

• for...of
• Array.from()
• Map(), Set(), WeakMap(), WeakSet()（比如new Map([['a',1],['b',2]])）
• Promise.all()
• Promise.race()

这些情景下都会去接入Iterator,完成一些我们看不到的操作,从而拿到我们看到的那些值.