如何在TypeScript中结合使用map和find方法筛选数组元素？

嘿，我懂你现在的困扰啦——你想用map和find组合来提取原数组里所有长度大于5的字符串，但当前代码返回的全是第一个匹配到的angular，完全不是你想要的结果对吧？

先说说你现有代码的问题 #

你的代码里，map会遍历sampleArray2的每一个元素，但每次执行find的时候，它都会从数组开头找第一个长度大于5的元素（也就是angular），所以每一轮map迭代都返回这个值，最后就得到了四个重复的angular。

满足要求的解决方案（同时用map和find） #

我们可以调整find的逻辑，让它和当前map迭代的元素关联起来，再过滤掉无效值，就能得到正确结果：

let sampleArray2:string[] = ["hello","world","angular","typescript"]; 
let subArray:string[] = sampleArray2
  // 用map遍历每个元素，通过find判断当前元素是否符合条件
  .map(val => sampleArray2.find(item => item === val && item.length > 5))
  // 过滤掉find返回的undefined
  .filter(item => item !== undefined) as string[];

console.log(subArray); // 输出: [ 'angular', 'typescript' ]

逻辑解释 #

1. map遍历阶段：对原数组的每个元素val，用find在原数组中查找和当前元素相同且长度大于5的项——如果val本身符合条件，find会返回它；如果不符合，find返回undefined。
2. 过滤阶段：把map结果里的undefined去掉，剩下的就是所有符合要求的字符串。

额外小提示 #

其实如果不需要强制同时用map和find，直接用filter会更简洁高效：

let subArray = sampleArray2.filter(val => val.length > 5);

但既然你明确要求用map+find，上面的方案就完全符合你的需求啦！

内容的提问来源于stack exchange，提问作者codingsplash