JavaScript算法练习:Falsey Bouncer

发布于 大漠

这篇文章我们主要介绍如何通过JavaScript处理falsy值。将要完成的任务是创建一个函数bouncer(),它接受一个数组arr做为参数,并且删除所有falsy值。

在大数多编程语言中都知道布尔数据类型,它可以设置为truefalse。而在JavaScript中,每个值都有一个固定的布尔值,称之为truthyfalsy。在JavaScript中,我们可以通过逻辑来处理,达到我们预期想要的效果,但如果使用不小心或没有理解清楚,它可能会导致一些问题。

什么情况值是falsy

在JavaScript中,下列值总是falsy:

  • false
  • null
  • undefined
  • NaN
  • 0
  • " "(空字符串)

而其它值总是truthy。包括空的函数、对象、数组或者"0""false"这样的字符串。

一些falsy值表现有所不同,比如nullundefinedNaN。拿NaN为例,虽然它是falsy,但并不表示是其自身,而undefinednull相当于是其自身。

如何检测一个值是不是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-0nullfalseNaNundefined或者空字符串""),生成的Boolean对象的值为false。其他任何值,包括任何对象或者字符串"0""false"都会创建一个值为trueBoolean对象。

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中千万不要将原始值truefalse和值为truefalseBoolean对象相混淆。

根据上述,可以写一个函数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相的Booleanfilter()方法来过滤数掉数组中的falsy值,也就是0-0nullfalseNaNundefined或者空字符串""。另外罗列了几种其他的方法。如果您有其他更好的方案,欢迎在下面的评论中与我们一起分享。

大漠

常用昵称“大漠”,W3CPlus创始人,目前就职于手淘。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验,尤其专注对CSS3的研究,是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3:核心技术与案例实战》。

如需转载,烦请注明出处:https://www.fedev.cn/javascript/falsy-bouncer-in-javascript.htmlair max 90 essential edition