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

前端开发之迭代器模式

news 来源：原创 2024/9/20 0:13:19

在前端开发中，设计模式是提升代码可读性、可扩展性和可维护性的关键。迭代器模式（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 10yield 20yield 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);}
}