Why does Array.filter(Number) filter zero out in J

问题:

I'm trying to filter all non-numeric elements out from an array. We can see the desired output when using typeof. But with Number, it filters zero out.

Here's the example (tested in Chrome Console):

[-1, 0, 1, 2, 3, 4, Number(0), '', 'test'].filter(Number)
// Which output with zero filtered out:
[-1, 1, 2, 3, 4]  // 0 is filtered

If we use typeof, it doesn't filter zero, which was expected.

// code
[-1, 0, 1, 2, 3, 4, Number(0), '', 'test'].filter(n => typeof n === 'number')
// output
[-1, 0, 1, 2, 3, 4, 0]

My question:

1. What is the difference between the 'Number' and 'typeof' approaches?

2. Number filters zero, but 'Number' itself literally contains zero, and this confuses me.

回答1:

Because 0 is one of the many falsy values in javascript

All these conditions will be sent to else blocks:

if (false)
if (null)
if (undefined)
if (0)
if (NaN)
if ('')
if ("")
if (``)

From the Array.prototype.filter() documentation:

filter() calls a provided callback function once for each element in an array, and constructs a new array of all the values for which callback returns a value that coerces to true

In your case the callback function is the Number. So your code is equivalent to:

[-1, 0, 1, 2, 3, 4, Number(0), '', 'test'].filter(a => Number(a)) 

// Number(0) -> 0
// Number(Number(0)) -> 0
// Number('') -> 0
// Number('test') -> NaN

When filter function picks truthy values (or values that coerces to true), the items which return 0 and NaN are ignored. So, it returns [-1, 1, 2, 3, 4]

回答2:

To prevent a falsy zero from filtering, you could use another callback for getting only numerical values: Number.isFinite

console.log([-1, 0, 1, 2, 3, 4, Number(0), '', 'test'].filter(Number.isFinite))

回答3:

Expected behavior

This behavior isn't unique to using Number as the filter function. A filter function that simple returns the 0 value would also remove it from the list.

var a = [-1, 0, 1, 2, 3, 4, Number(0), '', 'test'].filter(v => v)
console.log(a); // [-1, 1, 2, 3, 4, "test"]

This is because Number isn't specifically a filter function, it's primarily a type-casting function (and a class constructor, but not a very useful one). So when a number (like 0) is passed to Number, it just returns that number.

Array.prototype.filter removes values that are falsy. In JavaScript, the following are falsy and thus removed by filter.

false
null
undefined
0
NaN
''
""
``

(For complicated backwards compatibility reasons MDN goes into, document.all is also falsy in many browsers despite being an object, but that's a side-note)

回答4:

Zero is a falsey value. The typeof is always returning a boolean value. When the number 0 is returned, it is returning to the test, and therefore coming back as false, so the number zero is filtered out.

回答5:

It's because 0 is a falsy value which returns false, and anything that returns false to the filter function is filtered out of the new array.

Documentation

https://developer.mozilla.org/en-US/docs/Glossary/Falsy

回答6:

When you're using Number in filter, Actually it is passing each item of Array to Number constructor and in case of string or 0 Number will return NaN or 0 and both of them are false so filter is filtering out both of them

whereas when you're using typeof then 0 has "number" type so it is returning true and filter method doesn't filtering it out

回答7:

For preventing a falsy zero from filtering, you could use another callback for getting only numerical values: Number.isFinite

console.log([-1, 0, 1, 2, 3, 4, Number(0), '', 'test'].filter(Number.isFinite))

回答8:

The reason for this behavior is that 0, null, undefined, NaN is equivalent to false in JavaScript so, in the first case:

[-1, 0, 1, 2, 3, 4, Number(0), '', 'test'].filter(Number);

when used Number as one of the params in the filter, it returns the number itself. So when 0 is passed it returns 0 which javascript understands as false. So, it returns

[-1, 1, 2, 3, 4]

So to be on the safe side it is advised to use Number.isFinite instead of just Number.

[-1, 0, 1, 2, 3, 4, Number(0), '', 'test'].filter(Number.isFinite);

Gives same results as

[-1,0,1,2,3,4, Number(0), '','test'].filter(n=> typeof n === 'number');

would give.