如何从 JavaScript 中的数组中删除空元素?
从 JavaScript 数组中删除空元素看似很简单,由于 JavaScript 的语言的特殊性,对于空的理解有不同意义。在本文中,将通过如何从 JavaScript 数组中删除空元素,总结一下 JavaScript 中空值和假值的知识点。
关于空值
在 JavaScript 中,空值的定义通常应该考虑以下三种情况 空字符串
、null
、undefined
关于假值 Falsy
在 JavaScript 中,有一个专门的列表,包括以下7个值,它们被称为假值,即它们在条件语句中都被计算为 false
:
- 数字
0
、-0
:数字0
和-0
- BigInt
0n
-0n
:在 BigInt 零和负 BigInt 零 null
undefined
false
NaN
- 空字符串
""
: 空字符串值。
上面 7 个值单独在条件语句中是 false
,但是它们之间的比较未必就是 true
,下面的代码展示了一些 ==
比较,看看有没有让你觉得不可思议的判断:
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(""=="") // true
下面让来看看 ===
的比较结果:
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
关于真值
JavaScript 中除了上面 7 种假值,剩下的都是真值,以下几种情况是容易被忽视的真值:
"false"
: 字符串"false"
"0"
:字符串"0"
[]
:空数组{}
:空对象function() {}
:空函数
filter 使用
现在回到正题,可以使用数组实例的 filter
方法从数组中删除空元素。
const array = [0,1,,2,,3,,3,a,4,,4,,5,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 ]
如果想删除所有虚假值包括 null
、 undefined
、 0
、空字符串
、 NaN
和 false
,上面的过滤条件可以直接将布尔函数传递给 filter
,如下:
const filtered = array.filter(Boolean);
console.log(filtered); // [ 1, 2, 3, 3, 'a', 4, 4, 5, 6,0,-1 ]
如果只想返回一个数字的数组,可以这样写:
const filtered = array.filter(Number);
console.log(filtered); // [ 1, 2, 3, 3, 4, 4, 5, 6,-1 ]
上面返回数字的写法,从结果可以看出,0
被过滤掉了,因此上面只是实现了返回非 0
数字组成的数组,下面是获取数组所有数字的方法:
const filtered = array.filter(
(item) => typeof item === "number" && !isNaN(item)
);
console.log(filtered); // [0, 1, 2, 3, 3, 4, 4, 5, 6, 0,-1 ]
总结
通过从 JavaScript 中的数组中删除空元素,总结 JavaScript 中真值假值情况,在 ==
和 ===
条件下的比较结果。而对于空值的定义需要根据具体需求来定义边界,对于数字过滤或者判断,经常容易导致 0
的丢失。