This is the 8th day of my participation in the Gwen Challenge in November. See details: The Last Gwen Challenge in 2021.

Removing empty elements from JavaScript arrays may seem simple, but due to the nature of the JavaScript language, empty means different things. In this article, I’ll summarize JavaScript hollow and false values by looking at how to remove empty elements from JavaScript arrays.

About the null value

In JavaScript, the definition of a null value should generally consider the following three cases: empty string, NULL, and undefined

About the false value Falsy

In JavaScript, there is a special list of the following seven values, which are called false values, that is, they are all evaluated as false in conditional statements:

  1. digital0 、0: digital0 和 0
  2. BigInt 0n -0n: Zero in BigInt and negative BigInt zero
  3. null
  4. undefined
  5. false
  6. NaN
  7. An empty string"": Empty string value.

The above 7 values alone are false in conditional statements, but the comparison between them is not necessarily true. The following code shows some == comparisons to see if there are any surprises:

console.log(0==0) // true console.log(0==0n) // true console.log(0==null) // false console.log(0==undefined) // false console.log(0==false) // true console.log(0==NaN) // false console.log(0=="") // true console.log("The BigInt 0n") console.log(0n==0n) // true console.log(0n==null) // false console.log(0n==undefined) // false console.log(0n==false) //  true console.log(0n==NaN) // false console.log(0n=="") // true console.log("The value null") console.log(null==null) //  true console.log(null==undefined) // true console.log(null==false) // false console.log(null==NaN) // false console.log(null=="") // false console.log("The value undefined") console.log(undefined==undefined) // true console.log(undefined==false) // false console.log(undefined==NaN) // false console.log(undefined=="") // false console.log("The boolean false") console.log(false==false) // true console.log(false==NaN) // false console.log(false=="") // true console.log("The number NaN") console.log(NaN==NaN) // false console.log(NaN=="") // false console.log(""=="") // trueCopy the code

Let’s take a look at the comparison results of === :

console.log(0 === 0); // true
console.log(0 === 0n); // false
console.log(0 === null); // false
console.log(undefined === 0); // false
console.log(0 === false); // false
console.log(NaN === 0); // false
console.log(0 === ""); // false

console.log(0n === 0n); // true
console.log(0n === null); // false
console.log(undefined === 0n); // false
console.log(0n === false); // false
console.log(NaN === 0n); // false
console.log(0n === ""); // false
console.log(null === null); // true
console.log(undefined === null); // false
console.log(null === false); // false
console.log(NaN === null); // false
console.log(null === ""); // false

console.log("The value undefined");
console.log(undefined === undefined); // true
console.log(undefined === false); // false
console.log(undefined === NaN); // false
console.log(undefined === ""); // false

console.log("The boolean false");
console.log(false === false); // true
console.log(NaN === false); // false
console.log(false === ""); // false

console.log("The number NaN");
console.log(NaN === NaN); // false
console.log(NaN === ""); // false
console.log("" === ""); // true
Copy the code

About the true value

All but the seven false values in JavaScript are true values, and the following are true values that are easily overlooked:

  1. "false"String: "false"
  2. "0"String:"0"
  3. []: an empty array
  4. {}: an empty object
  5. function() {}: an empty function

The filter using

Now back to business, you can use the filter method of an array instance to remove empty elements from an array.

= const array [0, 1, 2, 3, and 3 a, 4, 4, and 5 or 6, NaN, false, 0, 1]. const filtered = array.filter((item) => { return item ! == null && typeof item ! == "undefined" && item ! = = ""; }); console.log(filtered); // [ 0, 1, 2, 3, 3, 'a', 4, 4, 5, 6, NaN, false,0,-1 ]Copy the code

If you want to remove all false values including null, undefined, 0, empty string, NaN, and false, the above filter criteria can be passed directly to the Boolean function filter as follows:

const filtered = array.filter(Boolean); console.log(filtered); // [1, 2, 3, 3, 'a', 4, 4, 5, 6,0,-1]Copy the code

If you only want to return an array of numbers, you can write it like this:

const filtered = array.filter(Number); console.log(filtered); // [1, 2, 3, 3, 4, 4, 5, 6,-1]Copy the code

Returns an array of non-zero numbers. Returns an array of non-zero numbers. Returns an array of non-zero numbers.

const filtered = array.filter(
    (item) => typeof item === "number" && !isNaN(item)
);
console.log(filtered); //  [0, 1, 2, 3, 3, 4, 4, 5, 6, 0,-1 ]
Copy the code

conclusion

By removing empty elements from the array in JavaScript, summarize the comparison results of true and false values in JavaScript under the condition of == and ===. The definition of null value needs to define the boundary according to specific requirements. For numeric filtering or judgment, it is often easy to cause the loss of 0.