本文旨在指导开发者如何在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()的组合是低效且容易出错的。
使用 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 中高效过滤数组元素的指南的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1520235.html
微信扫一扫 
支付宝扫一扫 
