面试题：复杂场景下 TypeScript 泛型函数的性能优化与设计

Question

在一个大型前端项目中，有一个频繁调用的泛型函数 `filterArray`，它接收一个数组和一个过滤函数作为参数，返回过滤后的数组。随着项目的发展，该函数的调用频率增加且涉及的数据类型愈发复杂，导致性能下降。请从泛型设计、类型擦除、运行时性能等多方面进行分析，并给出全面的性能优化策略及对应的代码实现。

Answer 1

泛型设计分析

1. 类型参数推断不精确：如果泛型类型参数推断不够精确，可能导致每次调用 filterArray 时编译器都需要额外的工作来确定具体类型。例如，当传递复杂嵌套类型的数组时，推断可能会变得复杂，影响编译性能。
2. 不必要的泛型灵活性：如果泛型设计过于宽泛，可能会导致不必要的类型检查和转换。比如，若泛型类型参数可以是任意类型，但实际使用场景主要是几种特定类型，就可以缩小泛型范围。

类型擦除分析

在 JavaScript（前端常用语言）中，由于其动态类型特性，不存在像 Java 那样严格意义上的类型擦除。然而，当使用 TypeScript 等类型化语言时，编译后类型信息会被擦除。这在一定程度上不会直接影响运行时性能，但如果类型设计不合理，可能导致编译阶段的性能问题。例如，过度复杂的类型定义可能会使编译器在类型检查上花费更多时间。

运行时性能分析

1. 过滤函数的复杂度：如果过滤函数本身逻辑复杂，例如包含大量计算、多次 DOM 操作或者复杂的算法，会导致每次调用 filterArray 时运行时间变长。
2. 数组长度：随着数组长度的增加，遍历数组进行过滤操作的时间也会线性增长。如果数组非常大，性能问题会更加明显。

性能优化策略及代码实现

1. 优化泛型设计
   • 缩小泛型范围：假设主要处理 string 和 number 类型的数组，可以这样定义泛型函数：

function filterArray<T extends string | number>(arr: T[], filterFn: (item: T) => boolean): T[] {
    return arr.filter(filterFn);
}

- **精确类型推断**：可以通过提供更明确的类型参数，帮助编译器进行类型推断。例如：

const numbers: number[] = [1, 2, 3, 4, 5];
const filteredNumbers = filterArray<number>(numbers, (num) => num > 3);

2. 优化过滤函数
   • 缓存计算结果：如果过滤函数中有重复计算的部分，可以将计算结果缓存起来。例如：

function complexCalculation(x: number): boolean {
    // 假设这是一个复杂计算
    return x * x > 10;
}
const cache: { [key: number]: boolean } = {};
function optimizedFilterFn(num: number): boolean {
    if (cache[num]!== undefined) {
        return cache[num];
    }
    const result = complexCalculation(num);
    cache[num] = result;
    return result;
}
function filterArray<T>(arr: T[], filterFn: (item: T) => boolean): T[] {
    return arr.filter(filterFn);
}
const numbers: number[] = [1, 2, 3, 4, 5];
const filteredNumbers = filterArray(numbers, optimizedFilterFn);

3. 处理大数据集
   • 分块处理：对于非常大的数组，可以将其分成多个小块进行处理，然后合并结果。

function filterArray<T>(arr: T[], filterFn: (item: T) => boolean): T[] {
    const chunkSize = 1000;
    let result: T[] = [];
    for (let i = 0; i < arr.length; i += chunkSize) {
        const chunk = arr.slice(i, i + chunkSize);
        const filteredChunk = chunk.filter(filterFn);
        result = result.concat(filteredChunk);
    }
    return result;
}

4. 使用更高效的算法
   • 如果过滤逻辑允许，可以使用更高效的算法。例如，对于排序后的数组，可以使用二分查找等算法进行过滤优化。但这需要根据具体的过滤逻辑来确定是否适用。