被同事代码震惊,使用Boolean 构造函数代码居然可以如此优雅!

2,695 阅读3分钟

显式转换与隐式转换

为了加深对本文涉及的Boolean的语法理解,我们先回忆一下JavaScript中的显示与隐式转换

显式转换

显式转换是指通过明确的代码,主动将一种数据类型转换为另一种类型。这种方式通常是直观的、可控的。

常见方法

  • 使用构造函数:String()Number()Boolean() 等。
  • 使用特定方法:如 toString()parseInt() 等。
// 转换为字符串
const num = 42;
const str = String(num);      // "42"
const str2 = num.toString();  // "42"

// 转换为数字
const strNum = "123";
const num2 = Number(strNum);  // 123

// 转换为布尔值
const val = 0;
const bool = Boolean(val);    // false

隐式转换

在 JavaScript 中,所有的值都可以被隐式转换为布尔值。在这种转换中,值会被分类为“真值” 或“假值”。

假值 (falsy) :在转换为布尔值时被视为 false 的值,包括:

  • false
  • 0 (数字零)
  • -0 (负零)
  • "" (空字符串)
  • null
  • undefined
  • NaN (非数字)

真值 (truthy) :除了上述假值外,所有其他值在转换为布尔值时都被视为 true

条件判断if逻辑运算中,所有的值都会被进行隐式抓换。如:

// if中的0被视为false
if(0){

}
// if中的1被视为true(1是真值)
if(1){

}

Boolean的妙用

Boolean 构造函数是 JavaScript 中的内建函数之一,用于将一个值转换为布尔值 (truefalse)。在前端开发中,Boolean的用途似乎并不多,在进行一些布尔判断时,我们几乎都使用了隐式转换。

const data = res?.data || []

if(data?.length){
  // ....
}

上述代码中,data?.length就会被隐式转换为布尔值, 从而达到我们的预期功能。

很少有人会显示转换

const data = res?.data || []

if(Boolean(data?.length)){
  // ....
}

这么一看,Boolean的使用场景似乎都可以被隐式转换替代。

然而,前几天,我们代码评审的时候,我看到同事一段非常“奇特”的代码

const rawlist = res?.data || []

const trueList = values.filter(Boolean);

虽然,我没理解这样为啥生效,但我很明白这个段代码的含义是通过filter方法过滤掉了原始数组中的所有假值,如nullundefined""0等。

我很好奇,fillter不是接受一个箭头函数么

[].filter(()=> {})

为什么values.filter(Boolean);也能生效?

filter(Boolean)的奥秘

其实,filter(Boolean)生效的原因非常简单,因为Boolean本身就是js中的一个构造函数,我们可以将它理解为下面的伪代码

function Boolean(value) {
    // 布尔转换规则:Falsy 值返回 false,其它值返回 true
    if (value === false || value === 0 || value === "" || value === null || value === undefined || value === NaN) {
        return false; 
    } else {
        return true;  
    }
}

// 或

function Boolean(value) {
  return value ? true : false; // 使用三元运算符模拟
}

显然,values.filter(Boolean)的语法就等价于下面的语法:

const trueList = values.filter(item => Boolean(item));

可见,filter(Boolean)的写法可以方便的过滤到数组中的所有假值!这确实是一个非常优雅的写法!

Boolean的其他使用场景

Boolean 作为 JavaScript 的一个内置构造函数,可以作为一个简单的类型转换工具,在ts中,借助Boolean可以将某个值转换为布尔类型,从而避免一些类型报错。

如,如果用户输入了某个值,我们显示某个组件

<div class="count-info">
    <span v-if="inputValue">{{ "输入的值为:" + inputValue }}</span>
    <input v-model="inputValue">
</div>
<script setup lang="ts">
  const inputValue = ref<string>("")
</script>   

在ts中,编译器会给我们提示警告:v-if后面需要跟一个布尔值,但inputValue是string类型。

此时,我们用Boolean转换inputValue就可以完美解决这个问题

<div class="count-info">
    <span v-if="Boolean(inputValue)">{{ "输入的值为:" + inputValue }}</span>
    <input v-model="inputValue">
</div>
<script setup lang="ts">
  const inputValue = ref<string>("")
</script>   

当然,有些人喜欢花里花哨,使用!!强制转换

<div class="count-info">
    <span v-if="!!inputValue">{{ "输入的值为:" + inputValue }}</span>
    <input v-model="inputValue">
</div>
<script setup lang="ts">
  const inputValue = ref<string>("")
</script>   

这种写法,显然不如Boolean(inputValue)直观。当然,你纯粹为了炫技,那无所谓。

如果你不熟悉!!,参考:新手小白如何使用!!运算符写出更简洁直观的代码?