TS设计模式之迭代器模式

yzc008

545人浏览 · 2025-07-30 09:50:25

yzc008 · 2025-07-30 09:50:25 发布

关注大师不迷路，大师带你上高度~

文章目录

前言
一、迭代器模式是什么？
二、使用步骤
应用场景
总结

前言

关注大师不迷路，大师带你上高度~

一、迭代器模式是什么？

迭代器模式是一种设计模式，它提供一种方法来顺序访问聚合对象中的各个元素，而又不暴露该对象的内部表示。
核心组成
Iterator（迭代器）：如 DataIterator 类，负责管理遍历状态和提供 next()、hasNext() 方法
Container（容器）：如 DataContainer 类，负责存储数据并提供获取迭代器的方法 getInterator()

注意：普通的for循环不是迭代器

二、使用步骤

1、迭代器详解

代码如下：

//普通的for循环不是迭代器
/**
 * 迭代器的特点
 * 1、顺序访问有序结构（如数组、NodeList）
 * 2、不知道数据的长度和内部结构 
 * 3、高内聚、低耦合
 */
class DataIterator {
    private data: number[]
    private index = 0
    constructor(constainer: DataContainer) {
        this.data = constainer.data
    }
    next(): number | null {
        if (this.hasNext()) {
            return this.data[this.index++]
        }
        return null
    }
    hasNext(): boolean {
        if (this.index >= this.data.length) return false
        return true
    }
}
class DataContainer {
    data = [10, 20, 30, 40, 50]
    getInterator() {
        return new DataIterator(this)
    }
}
const constainer = new DataContainer()
const interator = constainer.getInterator()
while (interator.hasNext()) {
    const num = interator.next()
    console.log(num);
}

2、应用场景

代码如下：

/**
 * 1、有序结构
 * 2、Symbol.iterator和迭代器js中所有的有序接口都内置Symbol.iterator
 */

// 自己模拟迭代器

interface InteratorRes {
    value: number | undefined
    done: boolean
}
class CustomInterator {
    private length = 3
    private index = 0
    next(): InteratorRes {
        this.index++
        if (this.index <= this.length) {
            return { value: undefined, done: true }
        }
        return { value: undefined, done: true }
    }
    // 在TypeScript（‌TS）‌类中，‌‌:ml-search[Symbol.iterator] { return this }的意思是该方法使得类的实例成为一个迭代器。‌
    // 具体来说，‌它定义了一个默认的迭代器，‌当使用for...of循环或其他迭代器相关的操作时，‌会调用这个方法来获取迭代器对象。‌
    [Symbol.iterator]() {
        return this
    }
}
const interator1 = new CustomInterator()
console.log(interator.next());
console.log(interator.next());
console.log(interator.next());
console.log(interator.next());

3、js中的for…of

代码如下：

interface InteratorRes {
    value: number | undefined
    done: boolean
}
class CustomInterator {
    private length = 3
    private index = 0
    next(): InteratorRes {
        this.index++
        if (this.index <= this.length) {
            return { value: undefined, done: true }
        }
        return { value: undefined, done: true }
    }
    // 在TypeScript（‌TS）‌类中，‌‌:ml-search[Symbol.iterator] { return this }的意思是该方法使得类的实例成为一个迭代器。‌
    // 具体来说，‌它定义了一个默认的迭代器，‌当使用for...of循环或其他迭代器相关的操作时，‌会调用这个方法来获取迭代器对象。‌
    [Symbol.iterator]() {
        return this
    }
}
const interator1 = new CustomInterator()
// 只要有内置的Symbol.iterator就可以用for...of遍历
for (const iterator of interator1) {
    console.log(iterator);
}

4、数据解构也是通过迭代器完成的

代码如下：

const [n1, n2] = [10, 20, 20]
const [n3, n4] = interator1
const a1 = [...interator1]
// Array.from,可以将迭代器变成数组

//生成器就是arr[Symbol.Iterator]()
function* genNums() {
    yield 10
    yield 20
    yield 30
}
const numInterator = genNums()
console.log(numInterator.next());
console.log(numInterator.next());
console.log(numInterator.next());
console.log(numInterator.next());

function* genNums1() {
    yield* [10, 20, 30] //yield* 后面可以带一个有序结构
}
const numInterator1 = genNums1()
for (const iterator of numInterator1) {
    console.log(iterator);

}

5、自己实现生成器

代码如下：

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