显式转换与隐式转换
为了加深对本文涉及的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 中的内建函数之一,用于将一个值转换为布尔值 (true
或 false
)。在前端开发中,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
方法过滤掉了原始数组中的所有假值,如null
、undefined
、""
、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)
直观。当然,你纯粹为了炫技,那无所谓。
如果你不熟悉!!,参考:新手小白如何使用!!运算符写出更简洁直观的代码?