JavaScript filter函数用if语句时null值未保留的原因咨询

这事儿得从Array.filter()的核心规则说起：它只关心你回调函数返回值的「真假性」，而不是你返回的是不是原元素本身。只要返回的是「真值（truthy）」，就保留当前元素；如果是「假值（falsy）」，就把它过滤掉。

先给你明确JS里的假值范围：null、undefined、0、''（空字符串）、NaN、false，除此之外的基本都是真值。

现在逐个拆解你的三个例子：

1. 直接返回val !== 0 #

arr.filter((val) => {return val !== 0}) //>> [1, 2, null, 4]

当val是null时，null !== 0这个表达式的结果是true（因为null和0类型都不一样，严格不等必然成立），true是标准的真值，所以filter会保留null这个元素。

2. 用if语句返回val #

arr.filter((val) => {if(val !== 0) return val}) //>> [1, 2, 4]

当val是null时，val !== 0条件成立，会执行return val，也就是返回null。而null属于JS里的假值，filter看到假值就判定“这个元素不需要保留”，所以null被过滤掉了。

3. 用if语句返回[val] #

arr.filter((val) => {if(val !== 0) return [val]}) //>> [1, 2, null, 4]

这里返回的是一个数组——哪怕数组里装的是null，数组本身在JS里属于真值（所有对象类型都是真值，空数组也不例外）。filter看到真值就判定“这个元素要保留”，所以null就被留下来了。

简单总结：filter的回调函数本质是个「元素准入判断器」，它只看你返回的是“真”还是“假”，不是看你返回的是不是原元素。返回null相当于告诉filter“拒接这个元素”，返回数组相当于告诉filter“放行这个元素”。

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