【11月打卡】第74天 前端常用的7种设计模式(10)

迭代器模式

JS的有序结构

常见的有序数据结构有：

• 字符串
• 数组
• Map
• Set
• NodeList等DOM集合
• arguments

object不是有序结构

Symbol.iterator

js的有序结构都内置了Symbol.iterator属性

• Symbol.iterator是一个函数
• Symbol.iterator执行会生成迭代器
• 生成的迭代器有next方法，执行返回{ value, done } 这样的数据结构

const iterator = [1, 2, 3][Symbol.iterator]()
iterator.next()   // {value: 1, done: false}
iterator.next()   // {value: 2, done: false}
iterator.next()   // {value: 3, done: false}
iterator.next()   // {value: undefined, done: true}

• 迭代器有next方法，同时也有Symbol.iterator属性
• 迭代器执行Symbol.iterator返回的是迭代器本身

const set = new Set('abc');
const iterator = set[Symbol.iterator]()
const iteratorNext = iterator[Symbol.iterator]()
console.log(iterator === iteratorNext);   // true

• Array、NodeList等DOM集合、Set、Map执行values、keys、entries方法生成的都是迭代器

• 字符串 和 arguments 没有values、keys、entries方法

自定义迭代器

interface IteratorRes {
  value: any;
  done: boolean;
}

type ListType = string | Array<any>;
class GenIterator {
  private index = 0;
  constructor(private list: ListType) {}
  next(): IteratorRes {
    if (this.index < this.list.length) {
      return { value: this.list[this.index++], done: false };
    }
    return { value: undefined, done: true };
  }
  [Symbol.iterator]() {
    return this;
  }
}

const iterator = new GenIterator([1, 'a', 'b', 6]);
iterator.next()
iterator.next()
iterator.next()
iterator.next()
iterator.next()