原创 石小石Orz 2024-12-03 08:30 重庆
点击关注公众号，“技术干货”及时达！
点击关注公众号，“技术干货” 及时达！
显式转换与隐式转换
为了加深对本文涉及的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)直观。当然，你纯粹为了炫技，那无所谓。
❝如果你不熟悉!!，参考：新手小白如何使用!!运算符写出更简洁直观的代码？
❞
点击关注公众号，“技术干货” 及时达！
