JavaScript中如何移除数组处理后产生的空数组并过滤null项？

这是个很常见的误区——很多人会混淆map和filter的核心作用，我来帮你理清思路并给出最优解：

问题根源 #

你用map处理后出现空数组，是因为map的本质是对数组每一项做转换，它不会减少数组的长度——哪怕你返回空数组、null或者undefined，这些值都会被保留在结果数组里，所以才会出现[user1, [], user3]这种包含空数组的结果。

正确解法：先过滤，再转换 #

想要去掉user为null的项，同时得到干净的转换结果，正确的流程是先用filter筛选出符合条件的元素，再用map做转换（如果不需要转换，直接用filter即可）。

示例代码

let arr = [{ user: 1, details: 'sample' }, { user: null, details: 'sample' }, { user: 3, details: 'sample' }];

// 场景1：只保留原对象，移除user为null的项
const filteredOriginal = arr.filter(item => item.user !== null);
console.log(filteredOriginal); 
// 输出：[{ user: 1, details: 'sample' }, { user: 3, details: 'sample' }]
console.log(filteredOriginal.length); // 输出：2

// 场景2：转换为你需要的userX格式字符串
const transformedResult = arr
  .filter(item => item.user !== null) // 先筛掉不符合条件的项
  .map(item => `user${item.user}`); // 再对剩下的项做转换

console.log(transformedResult); // 输出：['user1', 'user3']
console.log(transformedResult.length); // 输出：2

备选方案（不推荐）：先map再过滤空数组 #

如果你一定要先使用map（不建议，因为多了一次不必要的遍历），也可以在map之后再用filter去掉空数组：

const result = arr
  .map(item => item.user ? `user${item.user}` : [])
  .filter(item => Array.isArray(item) ? item.length > 0 : true); // 过滤空数组

console.log(result); // 输出：['user1', 'user3']

但这种方式会遍历数组两次，效率不如先过滤再转换的方式，所以优先推荐第一种方案。

内容的提问来源于stack exchange，提问作者rainier-albario