显示转换与隐式转换

为了加深对Boolean的语法理解，我们先回忆一下JavaScript中的显示与隐私转换

显示转换

显示转换是指通过明确的代码，主动江一中数据类型转换为另一种类型，这种方式通常是直观的，可控的。
常见方法：

• 使用构造函数：String(),Number(),Boolean()等
• 使用特定方法：如toString(),parseInt()等

javascript">// 转换为字符串
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和逻辑运算中，所有的值都会被进行隐式转换，如：

javascript">// if中的0被视为false
if(0){}
// if中的1被视为true（1是真值）
if(1){}

Boolean 的妙用

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

javascript">const data = res?.data || []if(data?.length){// ....
}

上述代码中，data?.length就会被隐式转换为布尔值，从而达到我们的预期功能
很少会有人会显示转换

javascript">const data = res?.data || []if(Boolean(data?.length)){// ....
}

这么一看，Boolean的使用场景似乎都可以被隐式转换替代
下面介绍一种清晰的写法

javascript">const rawlist = res?.data || []const trueList = values.filter(Boolean);

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

filter(Boolean)的奥秘

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

javascript">function Boolean(value) {// 布尔转换规则：Falsy 值返回 false，其它值返回 trueif (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)的语法就等价于下面的语法：

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

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

Boolean的其他使用场景

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

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

javascript"><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就可以完美解决这个问题

javascript"><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>   

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

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