Iterator | js基础

Array、map、Set、Object 这四种数据结构，可以随意的拼接成我们想要的数据结构。

• 它是一种接口，为各种不同的数据结构提供统一的访问机制。
• 任何数据结构只要部署 Iterator 接口就可以遍历访问。这种数据元素就被称为可遍历的（iterable）

遍历器

• 遍历器创建一个指针nextIndex指向第一个成员
• 当每一次调用next后，指针会指向下一个，携带的done表示对象是否遍历完，遍历完成true，否则为false

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};
    }
  };
}

执行iterator的函数

默认的iterator部署在Symbol(Symbol.iterator)上

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

es6部分数据结构已经有这个接口，就不用处理，可以被for...of遍历

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

数组和map的调用

对于原生没有设置这个函数的对象，需要自己部署这个遍历器，才能够for...of遍历

部署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};
    }
    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
}

执行步骤：

1. [Symbol.iterator]每一次都执行next，获得next返回来的对象a
2. [Symbol.iterator]返回的是a里面的value属性
3. 如果a对象的done为true，返回value
4. 如果为false，结束遍历

类数组转成数组结构

使用到iterator的场景

有iterator接口的对象，需要遍历获取元素的场景

let set = new Set().add('a').add('b')
// 1、解构赋值
let [x, y] = set; 

// 2、扩展运算符
let [first, ...reset] = set; 

// 3、yield *
let generator = function* () {
  yield 1;
  yield* [2,3,4];
  yield 5;
};
let iterator = generator();
iterator.next() // { value: 1, done: false }

// 4、类数组的字符串对象
let str = "hi";
let ite = str[Symbol.iterator]();
console.log(ite.next()); // {value: 'h', done: false}

for...of

• for...of 遍历有Symbol.iterator属性的数据结构
• for...in 遍历数据结构的属性（自己的，祖上的）

用遍历器对象访问

• Array、map、set可以使用for...in来遍历
• 使用返回的entries()、keys()、values()遍历

让对象遍历？

• 只能让对象拥有类似数组的属性才行，索引必须是从0递增，有长度属性
• 对象不能使用for...of遍历，用for...in通过键名获取属性

参考：Iterator

那抹，下回见