TypeScript/JavaScript 中高效过滤数组元素的指南-js教程-PHP中文网

TypeScript/JavaScript 中高效过滤数组元素的指南

聖光之護

发布： 2025-09-15 10:43:11

原创

358人浏览过

TypeScript/JavaScript 中高效过滤数组元素的指南

本文旨在指导开发者如何在TypeScript/JavaScript中高效且正确地从数组中筛选出符合特定条件的元素。我们将深入探讨使用Array.prototype.filter()方法，并解释为何它优于传统的findIndex()结合splice()来移除多个元素，从而避免常见的逻辑错误并提升代码的可读性与性能。

理解数组过滤的需求

在前端开发中，我们经常需要处理来自后端的数据，这些数据通常以数组对象的形式呈现。一个常见的任务是从这个数组中提取出满足特定条件的所有元素，例如，从一个包含多种类型证书的列表中，只获取“nave”类型的证书。

考虑以下数据结构：

interface Certificate {
    codicePat: number;
    dataInizioAttivita: string;
    dataCessazione: string;
    descrizioneTipoCertificato: string;
}

const certificates: Certificate[] = [
    {
        "codicePat": 93009428,
        "dataInizioAttivita": "1992-03-01",
        "dataCessazione": "0001-01-01",
        "descrizioneTipoCertificato": "NAVE",
    },
    {
        "codicePat": 93009429,
        "dataInizioAttivita": "1992-07-01",
        "dataCessazione": "0001-01-01",
        "descrizioneTipoCertificato": "NAVE",
    },
    {
        "codicePat": 93009430,
        "dataInizioAttivita": "1997-04-03",
        "dataCessazione": "0001-01-01",
        "descrizioneTipoCertificato": "COMANDATA",
    },
    {
        "codicePat": 93009431,
        "dataInizioAttivita": "1992-09-01",
        "dataCessazione": "1997-06-08",
        "descrizioneTipoCertificato": "NAVE",
    }
];

登录后复制

如果我们的目标是获取所有descrizioneTipoCertificato为“NAVE”的证书，一个常见的误区是尝试使用findIndex()和splice()的组合。

避免 findIndex() 和 splice() 的误用

开发者有时会尝试通过以下方式来“过滤”数组：

// 这是一个不正确的示例，请勿在实际项目中使用
function filterIncorrectly(dataArray: Certificate[]): Certificate[] {
    const dataPanContent = [...dataArray]; // 创建一个副本以避免直接修改原始数据
    // 假设我们想移除所有 'NAVE' 以外的元素，但这种逻辑是错误的
    // 或者更常见的是，想找到 'NAVE' 并将其移除，但实际上我们想保留 'NAVE'
    // 以下代码展示了原始问题中尝试移除 'NAVE' 的错误逻辑
    if (tipo === x.descrizioneTipoCertificato) { // 这里的tipo和x未定义，假设是外部传入的条件
        const index = dataPanContent.findIndex(obj => {
            return obj.descrizioneTipoCertificato === 'NAVE';
        });
        if (index !== -1) { // 确保找到了元素
            dataPanContent.splice(index, 1);
        }
    }
    return dataPanContent;
}

登录后复制

上述代码片段存在严重问题：

立即学习“Java免费学习笔记（深入）”；

只移除第一个匹配项： findIndex() 总是返回第一个满足条件的元素的索引。即使数组中有多个“NAVE”类型的证书，splice(index, 1) 也只会移除找到的第一个。如果这段代码在一个循环中执行，它可能会因为数组长度和索引的变化而导致不可预测的结果，甚至跳过某些元素。
修改原数组： splice() 是一个破坏性操作，它会修改调用它的原始数组。这在很多场景下是不希望发生的，尤其是在处理状态或需要保持数据不变性的函数式编程范式中。

因此，当目标是筛选而不是移除特定元素时，findIndex()和splice()的组合是低效且容易出错的。

腾讯元宝

腾讯混元平台推出的AI助手

223

查看详情

使用 Array.prototype.filter() 进行高效过滤

JavaScript（以及TypeScript）提供了一个专门用于此目的的高阶函数：Array.prototype.filter()。这个方法会创建一个新数组，其中包含所有通过所提供函数实现的测试的元素。

filter() 的工作原理

filter() 方法接受一个回调函数作为参数。这个回调函数会对数组中的每个元素执行一次。如果回调函数返回 true，则当前元素会被包含在新数组中；如果返回 false，则该元素会被跳过。

示例代码

让我们使用filter()来正确地从certificates数组中筛选出所有descrizioneTipoCertificato为“NAVE”的证书：

// 定义接口以增强类型安全性
interface Certificate {
    codicePat: number;
    dataInizioAttivita: string;
    dataCessazione: string;
    descrizioneTipoCertificato: string;
}

const certificates: Certificate[] = [
    {
        "codicePat": 93009428,
        "dataInizioAttivita": "1992-03-01",
        "dataCessazione": "0001-01-01",
        "descrizioneTipoCertificato": "NAVE",
    },
    {
        "codicePat": 93009429,
        "dataInizioAttivita": "1992-07-01",
        "dataCessazione": "0001-01-01",
        "descrizioneTipoCertificato": "NAVE",
    },
    {
        "codicePat": 93009430,
        "dataInizioAttivita": "1997-04-03",
        "dataCessazione": "0001-01-01",
        "descrizioneTipoCertificato": "COMANDATA",
    },
    {
        "codicePat": 93009431,
        "dataInizioAttivita": "1992-09-01",
        "dataCessazione": "1997-06-08",
        "descrizioneTipoCertificato": "NAVE",
    }
];

// 使用 filter() 方法筛选出所有 descrizionetipoCertificato 为 'NAVE' 的元素
const filteredCertificates: Certificate[] = certificates.filter(item => 
    item.descrizioneTipoCertificato === 'NAVE'
);

console.log(filteredCertificates);
/*
输出结果将是：
[
    {
        "codicePat": 93009428,
        "dataInizioAttivita": "1992-03-01",
        "dataCessazione": "0001-01-01",
        "descrizioneTipoCertificato": "NAVE"
    },
    {
        "codicePat": 93009429,
        "dataInizioAttivita": "1992-07-01",
        "dataCessazione": "0001-01-01",
        "descrizioneTipoCertificato": "NAVE"
    },
    {
        "codicePat": 93009431,
        "dataInizioAttivita": "1992-09-01",
        "dataCessazione": "1997-06-08",
        "descrizioneTipoCertificato": "NAVE"
    }
]
*/

登录后复制

如您所见，filter()方法简洁明了地完成了任务，并返回了一个包含所有符合条件元素的新数组，原始数组certificates保持不变。

filter() 的优势总结

不可变性 (Immutability)： filter() 不会修改原始数组，而是返回一个全新的数组。这符合函数式编程的原则，有助于避免副作用，使代码更易于理解和调试。
可读性 (Readability)： filter() 的名称直接表达了其意图——筛选。代码的意图一目了然。
效率 (Efficiency)： filter() 是为这种场景优化的，它遍历一次数组并根据条件构建新数组。相比于在循环中反复使用findIndex()和splice()，filter()通常更高效，因为splice()操作在删除元素后需要重新索引数组，这在处理大型数组时会带来性能开销。
简洁性 (Conciseness)： 使用箭头函数，filter() 可以写得非常紧凑和表达性强。

总结

在TypeScript/JavaScript中，当需要从数组中提取所有满足特定条件的元素时，Array.prototype.filter()是最佳实践。它提供了一种声明式、不可变且高效的方式来完成数据筛选任务，极大地提升了代码质量和可维护性。避免使用findIndex()和splice()的组合来尝试过滤多个元素，因为这不仅容易出错，而且效率低下。始终选择最能表达您意图的数组方法，以编写更健壮、更专业的代码。

以上就是TypeScript/JavaScript 中高效过滤数组元素的指南的详细内容，更多请关注php中文网其它相关文章！