为何filter加元素到数组，0加不进去？

Question

我使用Array.filter去过滤数字，然后加入到新的数组里面：

let arr = [0, 0, 0]

let posArr = arr.filter(item => {
    if (Number(item) >= 0) return Number(item) 
})
console.log(posArr) // [] 为何不能把0加入？

但是结果差强人意，为何0加不进去？

Answer 1

顾名思义，filter 是过滤，并且 filter 内部的 return Number(0) == return false。

如果你想要返回所有大于等于0的项，可以这样写

let arr = [0, 0, 0]
let posArr = arr.filter(item => item >= 0)
console.log(posArr) // [0, 0, 0] 

如果你想把所有非 Number 类型的元素转换成 Number 类型，并筛选 大于等于0 的项，那么可以这样写

let arr = [0, "0", "-1"]
let posArr = arr.map(item=>Number(item)).filter(item => item >= 0)
console.log(posArr) // [0, 0] 

Answer 2

了解几个概念

• Falsy - 术语表 | MDN
• Truthy（真值） - 术语表 | MDN
• Array.prototype.filter() - JavaScript | MDN

Answer 3

filter 方法只是单纯的做过滤，并不会修改元素本身的值。你可以结合 filter 和 map 方法链式处理数据:

var arr = ['3', -2, 2, '-1', 1]
var posArr = arr
    .filter(num => Number(num) >= 0)
    .map(num => Number(num))

console.log(posArr)
//  [3, 2, 1]

这种链式调用在复杂化的数据处理中可读性会很高，但在一些简单的代码中可能看上去有点繁琐。这时可以用高级一点的 reduce 函数来处理：

var posArr = arr.reduce((acc, num) => {
    // 预先将数据类型做转换
    const current = Number(num)
    if (current >= 0) {
        acc.push(current)
    }

    return acc
}, [])

console.log(posArr)
//  [3, 2, 1]

Answer 4

let arr = [0, 0, 0]

let posArr = arr.filter(item => Number(item) >= 0)

Answer 5

数组的 filter 方法会返回一个包含遍历处理时返回”真值”的元素的新数组。而你的代码中 filter 回调函数的每一次遍历的结果都是 0，而 0 在这里会被当成 ”假值”，所以最后的结果是一个空数组。