JS数组去空：filter(Boolean)为何会误删0和false

一、filter(Boolean) 的底层执行原理

为了理解为什么 0 和 false 会被剔除，首先需要看清 arr.filter(Boolean) 实际上执行了什么代码。

Array.prototype.filter 接收一个回调函数作为断言（Predicate）。当传入内置构造函数 Boolean 时，JavaScript 会将数组中的每个元素依次传递给 Boolean(value)。以下两行代码在行为上是完全等价的：

// 语法糖简写
const result1 = arr.filter(Boolean);

// 完整展开写法
const result2 = arr.filter(item => Boolean(item));

当 Boolean() 作为普通函数被调用时，它会遵循 ECMAScript 规范执行抽象操作 ToBoolean(argument)。根据规范定义，只有以下 8 种“假值（Falsy）”在转换后会返回 false，其余所有值（包括空对象 {} 和空数组 []）均返回 true：

• undefined 与 null（无定义或空引用）
• false（布尔假值）
• 0、-0 与 0n（数值零与 BigInt 零）
• ""（长度为 0 的空字符串）
• NaN（非数值计算结果）

从规范可知，filter(Boolean) 绝非针对“空数据（Empty / Nullish）”的清洗器，而是标准的“假值排除器”。只要元素属于上述 8 种假值之一，filter 就会判定其不合格并从结果集中剔除。

二、为何“0”和“false”被误判：语言假值与业务空值的错位

在实际业务逻辑中，“空（Empty / Nullish）”通常具有明确的现实语义：表示字段未填写、未定义或数据缺失，例如 null、undefined 或未输入的空白文本 ""。

相对地，数值 0 与布尔值 false 在 99% 的场景下都是完全合法的“有效数据载体”：

• 数值 0：代表商品库存售罄为 0、考试得分为 0、账户余额为 0、地图坐标的原点 [0, 0]、列表第一项的索引 0。
• 布尔值 false：代表系统配置关闭 { isEnabled: false }、任务状态未完成、用户拒绝了授权协议。

当开发者仅仅想“移除非法空值”，却粗暴调用 filter(Boolean) 时，推导流水线会一视同仁地拦截这些数值与布尔项：

const rawData = [0, "张三", false, null, undefined, 42];

// 尝试去空
const cleaned = rawData.filter(Boolean);

console.log(cleaned);
// 预期产出: [0, "张三", false, 42]
// 实际输出: ["张三", 42]  <--- 0 和 false 凭空蒸发！

三、精准去空：四大业务场景的替代方案

针对不同的业务定义，我们需要使用语义明确、判断精准的断言表达式，而非依赖隐式类型转换的 Boolean。

场景 1：仅过滤无值状态（去除 null 和 undefined，保留 0、false、""）

这是现代开发中最通用的“去空（Nullish）”需求。利用 JavaScript 的宽松不相等操作符 != null，可以一行代码同时安全排除 null 与 undefined，且绝不误伤其他任何类型：

// 最优简写：x != null 同时覆盖 null 和 undefined
const safeList = arr.filter(x => x != null);

// 严格比较等价写法（适合 ESLint 强制开启 eqeqeq 的团队）
const strictSafeList = arr.filter(x => x !== null && x !== undefined);

场景 2：表单字段去空（去除 null、undefined 及未输入的空字符串 ""）

在处理用户输入或查询参数时，通常需要同时过滤未填写的空文本，但依然必须保留数字 0 和布尔 false：

const validFormValues = arr.filter(x => x != null && x !== '');

// 若需要防御纯空格文本（如 "   "）：
const strictFormValues = arr.filter(x => 
  x != null && (typeof x !== 'string' || x.trim() !== '')
);

场景 3：纯数值序列清洗（保留 0，剔除 null、undefined、"" 及 NaN）

在统计、图表坐标或价格计算中，如果数据源可能夹杂 NaN 或无效类型，必须显式结合数字类型与非数检查：

const validScores = arr.filter(x => typeof x === 'number' && !Number.isNaN(x));

四、TypeScript 中的类型守卫陷阱与工程实践

在 TypeScript 项目中，直接书写 arr.filter(Boolean) 往往无法达到预期的类型收窄效果，或者导致误删后的类型与实际运行期逻辑脱节。

TypeScript 标准库对 Boolean 构造函数作为谓词的声明为 Boolean(value: any): boolean，直接调用不会自动将 (T | null | undefined)[] 收窄为 T[]（除非在较新版本的特定类型上下文中通过 Truthy 守卫收窄，但那依然会把类型中的 0 或 false 危险排除）。

在大型工程中，推荐封装通用、语义明确的自定义类型守卫（User-Defined Type Guard）：

/**
 * 判断是否为非空值（排除 null 与 undefined）
 * 同时向 TypeScript 编译器提供类型断言
 */
export function isNotNullish<T>(val: T | null | undefined): val is T {
  return val !== null && val !== undefined;
}

// 业务调用示例
const list: (number | null | undefined)[] = [0, 10, null, 20, undefined];

// filteredList 类型被精确推导为: number[]
// 运行期值完整保留: [0, 10, 20]
const filteredList = list.filter(isNotNullish);

五、选型决策指南与总结

数组去空是前端与后端业务处理中极其频繁的基础操作。为了防止细小疏忽引发严重数据灭失，团队在日常编码中应遵循以下决策链路：