JavaScript中如何组合使用map与filter方法移除返回结果中的null值

实现方案 #

你可以通过以下两种方式实现需求： #

方案1：先映射后过滤（写法直观易读）

columnValueList(val) {
  return this.beacons
    .map((d) => d[val]?.name)
    .filter(name => name != null);
}

• 这里用可选链?.避免d[val]不存在时抛出访问异常
• filter判断条件name != null可以同时过滤null和undefined两类无效值
• 如果运行环境不支持ES2020可选链语法，可以使用兼容写法：

columnValueList(val) {
  return this.beacons
    .map((d) => d[val] && d[val].name)
    .filter(name => name !== null && name !== undefined);
}

方案2：flatMap单次遍历（大数据量下性能更优）

columnValueList(val) {
  return this.beacons.flatMap((d) => {
    const name = d[val]?.name;
    return name != null ? [name] : [];
  });
}

flatMap会自动将返回的数组合并扁平化，需要过滤的无效值直接返回空数组即可，无需额外遍历步骤。

参考数据结构

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