如何从 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) // trueconsole.log(0==0n) // trueconsole.log(0==null) // falseconsole.log(0==undefined) // falseconsole.log(0==false) // trueconsole.log(0==NaN) // falseconsole.log(0=="") // true
console.log("The BigInt 0n")console.log(0n==0n) // trueconsole.log(0n==null) // falseconsole.log(0n==undefined) // falseconsole.log(0n==false) // trueconsole.log(0n==NaN) // falseconsole.log(0n=="") // true
console.log("The value null")console.log(null==null) // trueconsole.log(null==undefined) // trueconsole.log(null==false) // falseconsole.log(null==NaN) // falseconsole.log(null=="") // false
console.log("The value undefined")console.log(undefined==undefined) // trueconsole.log(undefined==false) // falseconsole.log(undefined==NaN) // falseconsole.log(undefined=="") // false
console.log("The boolean false")console.log(false==false) // trueconsole.log(false==NaN) // falseconsole.log(false=="") // true
console.log("The number NaN")console.log(NaN==NaN) // falseconsole.log(NaN=="") // false
console.log(""=="") // true

复制代码

下面让来看看 === 的比较结果：

console.log(0 === 0); // trueconsole.log(0 === 0n); // falseconsole.log(0 === null); // falseconsole.log(undefined === 0); // falseconsole.log(0 === false); // falseconsole.log(NaN === 0); // falseconsole.log(0 === ""); // false
console.log(0n === 0n); // trueconsole.log(0n === null); // falseconsole.log(undefined === 0n); // falseconsole.log(0n === false); // falseconsole.log(NaN === 0n); // falseconsole.log(0n === ""); // falseconsole.log(null === null); // trueconsole.log(undefined === null); // falseconsole.log(null === false); // falseconsole.log(NaN === null); // falseconsole.log(null === ""); // false
console.log("The value undefined");console.log(undefined === undefined); // trueconsole.log(undefined === false); // falseconsole.log(undefined === NaN); // falseconsole.log(undefined === ""); // false
console.log("The boolean false");console.log(false === false); // trueconsole.log(NaN === false); // falseconsole.log(false === ""); // false
console.log("The number NaN");console.log(NaN === NaN); // falseconsole.log(NaN === ""); // falseconsole.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 的丢失。

发布于: 刚刚阅读数: 2

原文链接:【http://xie.infoq.cn/article/07a8545d11e0dab8953c6a570】。

devpoint

关注

细节的追求者 2011.11.12 加入

专注前端开发，用技术创造价值！

发布

暂无评论

创作场景

如何从 JavaScript 中的数组中删除空元素？

关于空值

关于假值 Falsy

关于真值

filter 使用

总结

devpoint

评论