JavaScript算法练习：Falsey Bouncer
这篇文章我们主要介绍如何通过JavaScript处理falsy值。将要完成的任务是创建一个函数bouncer()，它接受一个数组arr做为参数，并且删除所有falsy值。
在大数多编程语言中都知道布尔数据类型，它可以设置为true或false。而在JavaScript中，每个值都有一个固定的布尔值，称之为truthy或falsy。在JavaScript中，我们可以通过逻辑来处理，达到我们预期想要的效果，但如果使用不小心或没有理解清楚，它可能会导致一些问题。
什么情况值是falsy
在JavaScript中，下列值总是falsy:
falsenullundefinedNaN0" "(空字符串)
而其它值总是truthy。包括空的函数、对象、数组或者"0"或"false"这样的字符串。
一些falsy值表现有所不同，比如null、undefined和NaN。拿NaN为例，虽然它是falsy，但并不表示是其自身，而undefined和null相当于是其自身。
如何检测一个值是不是falsy
检测一个值是不是falsy，在JavaScript中可以使用===和!==来比较对象的值和类型。简而言之，任何值，通过逻辑比较，如果返回的值是false，那么它就是一个falsy值，反之是truthy值。
如何删除数组中的falsy值
文章开头已经说过，今天的任务是创建一个bouncer(arr)函数，通过逻辑判断，删除数组中的falsy值。比如：
bouncer([7, "ate", "", false, 9])返回[7, "ate", 9]bouncer(["a", "b", "c"])返回["a", "b", "c"]bouncer([false, null, 0, NaN, undefined, ""])返回[]bouncer([1, null, NaN, 2, undefined])返回[1, 2]
实现思路
- 通过
Boolean对象创建一个函数isFalsy(value)，判断值value是不是一个falsy值 - 通过
Array.prototype.filter()过滤掉数组arr中的falsy值，并且将遍历后的值存在一个result变量中,并且返回这个result值
思路清楚了就好处理了。在继续完成后面的任务之前，先来简单了解Boolean对象和Array.prototype.filter()的知识。
Boolean对象是一个包装了布尔值的对象。如果Boolean构造函数的参数不是一个布尔值，则该参数会被转换成一个布尔值。如果参数是falsy值(也就是0，-0，null，false，NaN，undefined或者空字符串"")，生成的Boolean对象的值为false。其他任何值，包括任何对象或者字符串"0"或"false"都会创建一个值为true的Boolean对象。
console.log(Boolean(0)); // false
console.log(Boolean(-0)); // false
console.log(Boolean('0')); // true
console.log(Boolean(false)); // false
console.log(Boolean('false')); // true
console.log(Boolean(true)); // true
console.log(Boolean('true')); // true
console.log(Boolean(null)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(undefined));// false
console.log(Boolean('')); // false
console.log(Boolean(1)); // true
console.log(Boolean(-1)); // true
console.log(Boolean(3)); // true
console.log(Boolean("w3cplus"));// true
注：在JavaScript中千万不要将原始值true和false和值为true、false的Boolean对象相混淆。
根据上述，可以写一个函数isFalsy(value)来判断值value是不是falsy:
function isFalsy(value) {
return Boolean(value);
}
来测试一下：
isFalsy(""); // false
isFalsy("0"); // true
isFalsy(0); // false
isFalsy()函数传入参数""和0时，返回的值为false，也就是说这两个值是一个falsy，而"0"返回的值为true，也就是说它是一个truthy值。
数组中有一个filter()方法使用指定的函数测试所有元素，并且根据调用函数的规则过滤掉不符合条件的元素，并且创建一个包含所有通过测试的元素的新数组。
比如下面的示例：
var mishMash = [4, "cookies", true, "cake", 18, "peppermints", 0];
var isTreat = mishMash.filter(
function (treat) {
return (typeof treat === "string");
}
);
console.log(isTreat); // ["cookies", "cake", "peppermints"]
将这两个功能结合到bouncer(arr)函数中就可以实现我们的需求：
function bouncer (arr) {
function isFalsy (value) {
return Boolean(value);
}
var result = arr.filter(isFalsy);
return result;
}
如果想验证这个函数功能是否正常，可以跑一下上面的测试用例。这里就不再演示了。
其实还可以将上面的函数精简一下：
function bouncer(arr) {
return arr.filter(Boolean);
}
除此之外，对isFalsy(value)修改（也就是修改过滤函数）也能实现：
function bouncer (arr) {
function isFalsy (value) {
return value;
}
var result = arr.filter(isFalsy);
return result;
}
上面的方法很简单，也易理解。但除此之外还有一些其他的方法。比如说通过while循环:
function bouncer (arr) {
var index = -1,
len = arr ? arr.length : 0,
resIndex = -1,
result = [];
while (++index < len) {
var value = arr[index];
if (value) {
result[++resIndex] = value;
}
}
return result;
}
或者：
function bouncer(arr) {
function isFalsy (value) {
if (value) {
return true;
}
if (value === false || value === null || value === 0 || value === "" || value === undefined || isNaN(value)) {
return false;
} else {
return true;
}
}
var result = arr.filter(isFalsy);
return result;
}
总结
上面总结了如何通过JavaScript相的Boolean、filter()方法来过滤数掉数组中的falsy值，也就是0，-0，null，false，NaN，undefined或者空字符串""。另外罗列了几种其他的方法。如果您有其他更好的方案，欢迎在下面的评论中与我们一起分享。
大漠
如需转载，烦请注明出处：https://www.fedev.cn/javascript/falsy-bouncer-in-javascript.htmlair max 90 essential edition