当前位置：首页 > article >正文

前端开发之迭代器模式

article 2024/11/13 11:59:48

在前端开发中，设计模式是提升代码可读性、可扩展性和可维护性的关键。迭代器模式（Iterator Pattern）是行为型设计模式中的一种，能够让我们顺序访问一个集合中的元素，而不暴露其底层的结构。在 TypeScript 这样具有类型检查的语言中，迭代器模式应用更加方便。

简单for循环

迭代器模式解决的问题是如何更加方便，更加简易，更加友好地去遍历一个顺序集合。用for循环不就行了？不行，普通for循环不是迭代器，它有两个缺点，不符合我们的设计原则。

const arr = [10, 20, 30]
const length = arr.length
for (let i = 0; i < length; i++) {
  console.log(arr[i])
}

如上代码，首先需要知道数组的长度 length ，需要知道如何获取数组的元素 arr[i] 。这样就不符合高内聚低耦合的设计原则，这样数组的很多信息就被公开了。作为一个数组被公开没什么问题，但是如果这个数组是一个比较复杂的数据结构呢？或者第三方服务呢？把场景放大就会是很大的问题。所以普通for循环不是迭代器，迭代器解决的问题是解决数据源里面数据不确定问题、数据封装问题，更好地遍历有序集合的问题。

简易迭代器

const pList = document.querySelectorAll("p");
pList.forEach((p) => console.log(p));

这里没有使用for循环，而使用forEach，本质的区别是，forEach遍历的时候，不需要知道数组长度，也不需要知道怎么获取一个元素，它直接通过参数传过来了。

迭代器模式

UML类图如下：


class DataIterator {
  private data: number[];
  private index: number = 0;

  constructor(container: DataContainer) {
    this.data = container.data;
  }
  next() {
    if (this.hasNext()) {
      return this.data[this.index++];
    }
    return null;
  }
  hasNext() {
    return this.index < this.data.length;
  }
}

class DataContainer {
  data = [10, 11, 12, 13, 14, 15];
  getIterator() {
    return new DataContainer(this);
  }
}

const dataContainer = new DataContainer();
const dataIterator = new DataIterator(dataContainer);
while (dataIterator.hasNext()) {
  console.log(dataIterator.next());
}

以上输出结果和for循环遍历是一样的，但我们费这么大力气是为了什么呢？就是为了掩饰迭代器背后它是怎样不用for循环，不用获取长度、不用通过index获取数据的这种高内聚低耦合的方式，更符合设计原则：使用者和目标分离解耦；目标能自行控制其内部逻辑；使用者不关心目标的内部结构。

迭代器场景

1. 有序结构。包含：字符串、数组、NodeList等DOM集合、Map、Set、arguments

2. Symbol.iterator

所有有序对象，都内置Symbol.iterator方法，执行该方法，会返回一个迭代器对象。

done为false，说明还没有到最后一个。和我们的 hasNext() 差不多。

我们可以自己定义一个迭代器。

interface IteratorRes {
  value: number | undefined;
  done: boolean;
}

class CustomIterator {
  private length = 3;
  private index = 0;

  next(): IteratorRes {
    this.index++;
    if (this.index <= this.length) {
      return { value: this.index, done: false };
    }
    return { value: undefined, done: true };
  }
  [Symbol.iterator]() {
    return this;
  }
}

const customIterator = new CustomIterator();
console.log(customIterator.next());
console.log(customIterator.next());
console.log(customIterator.next());
console.log(customIterator.next());

迭代器作用

1. 用于for of

只要有内置了Symbol.iterator，都可以执行。

const set = new Set([1, 2, 3]);
for (const num of set) {
  console.log(num);
}
const pList = document.querySelectorAll("p");
for (const p of pList) {
  console.log(p);
}
// 包括我们上面的例子
const customIterator = new CustomIterator();
for (const ci of customIterator) {
  console.log(ci);

2. 数组解构、扩展操作符、Array.from （可用于有任何迭代器模式的数据结构）

// 解构 数组
const arr = [10, 11, 12];
const [a1, a2] = arr;
console.log("a1", a1); // 10
console.log("a2", a2); // 11
// 解构 Set
const set = new Set([100, 200, 300]);
const [s1, s2] = set;
console.log("s1", s1); // 100
console.log("s2", s2); // 200

// 扩展操作符
const arr = [10, 11, 12];
console.log([...arr]) // [10, 11, 12]
const set = new Set([100, 200, 300]);
console.log([...set]) // [100, 200, 300]

// Array.form
console.log(Array.from(set)) // [100, 200, 300]

3. 用于创建Map和Set

4. 用于 Promise.all 和 Promise.race

5. 用于 yield*

Generator 生成器

function* getNums(){
    yield 10
    yield 20
    yield 30
}
const iterator = getNums()
console.log(iterator.next()) // {value: 10, done: false}
console.log(iterator.next()) // {value: 20, done: false}
console.log(iterator.next()) // {value: 30, done: false}
console.log(iterator.next()) // {value: undefined, done: true}
// 将上面的 console.log注释，接下来使用 for of
for (const number of iterator) {
    console.log(number) // 10 20 30
}

可见生成器返回的就是一个迭代器。

function* getNums(){
    yield* [10,20,30] // 有序结构，已经实现了[Symbol.Iterator]
}
const iterator = getNums()
for (const number of iterator) {
    console.log(number) // 10,20,30
}

接下来重构一下上面的 CustomIterator

class CustomIterator {
  private data: number[];
  constructor() {
    this.data = [10, 20, 30];
  }
  *[Symbol.iterator]() {
    yield* this.data;
  }
}
const iterator = new CustomIterator();
for (const n of iterator) {
  console.log(n); // 10 20 30
}

接下来我们使用 Generator + yield 深度优先遍历 DOM 树

<div id="app">
  <p>
    <b>hello</b>
    <i>world</i>
  </p>
  <p>
    <img src="https://www.baidu.com/img/PCfb_5bf082d29588c07f842ccde3f97243ea.png" />
  </p>
</div>

function* traverse(elementList: Element[]): any {
  for (const element of elementList) {
    yield element;
    const children = Array.from(element.children);
    if (children.length) {
      yield* traverse(children);
    }
  }
}
const iterator = document.getElementById("app");
if (iterator) {
  for (const iteratorElement of traverse([iterator])) {
    console.log(iteratorElement);
  }
}