理解数组过滤的需求
在前端开发中，我们经常需要处理来自后端的数据，这些数据通常以数组对象的形式呈现。一个常见的任务是从这个数组中提取出满足特定条件的所有元素，例如，从一个包含多种类型证书的列表中，只获取“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()的组合来尝试过滤多个元素，因为这不仅容易出错，而且效率低下。始终选择最能表达您意图的数组方法，以编写更健壮、更专业的代码。
