原创 石小石Orz 2025-03-10 08:30 北京
点击关注公众号，“技术干货”及时达！
点击关注公众号，“技术干货” 及时达！
!!在项目中的妙用
最近公司来了几个实习生，在领导的示意下，我负责帮他们优化审查代码。其中，有一个实习生的代码着实吸引了我。
业务应该是要做非空判断，他的代码是这么写的：
if (str !="" && str !=0 && str !=null && str != undefined) {
// 逻辑处理...
}
代码写的是没有问题的，但是我觉得可以优化，于是把他叫来了。我告诉他这个代码可以这么优化：
if (!!str) {
// 逻辑处理...
}
「他非常吃惊，居然还可以这么写，很激动的问我啥原理」。于是，我给他详细的讲了这个知识点。
他也很聪明，给他讲完这个知识点后，他立马举一反三，说「判断接口返回空数组」是不是可以这么写：
if (!!data.length) {
// 数组为空
}
看来他确实是明白这个知识点了，于是，我对他做了肯定！
鉴于一些小白不懂这个知识点，我详细的给大家介绍下吧！
!!的原理
再介绍!!的原理的原理前，我们需要了解一些前置知识。在 JavaScript 中，所有的值都可以被「隐式转换」为布尔值。在这种转换中，值会被分类为“真值” (truthy) 或“假值” (falsy)。
真值和假值
「假值 (falsy)」 ：在转换为布尔值时被视为 false 的值，包括：
❝❞
false
0（数字零）
-0（负零）
""（空字符串）
null
undefined
NaN（非数字）
「真值 (truthy)」 ：除了上述假值外，所有其他值在转换为布尔值时都被视为 true。
在条件判断if和逻辑运算中，所有的值都会被进行隐式抓换。如：
if(0){
}
// if中的0被视为false
if(1){
}
// if中的1被视为true（1是真值）
!! 运算符的工作机制
!! 可以将一个值强制转换为「布尔值」。它背后的原理是双重否定（double negation）：通过两次应用逻辑非运算符 !，将一个任意类型的值转换为 true 或 false。
「第一个」 !「运算符」：
将值转换为布尔值，并将其取反。也就是说，如果值是「真值」 ，则第一个 ! 会将其转换为 false；如果值是「假值」，则第一个 ! 会将其转换为 true。
「第二个」 !「运算符」：
再次取反前一步的结果，将其转换为相应的布尔值。如果前一步结果是 false，则第二个 ! 会将其转换为 true；如果前一步结果是 true，则第二个 ! 会将其转换为 false。
这样，经过 !! 运算后的结果就是将原始值强制转换为布尔值。
我们可以通过下面的示例巩固理解
console.log(!!0); // false
// 数字0是假值，!0 的结果是 true，再次取反，!!0的结果就是false
console.log(!!'0'); // true
// 字符0是真值，!'0' 的结果是 false，再次取反，!!'0'的结果就是 true
console.log(!!1); // true
// 数字1是真值，!1 的结果是 false，再次取反，!!1的结果就是true
console.log(!!""); // false
// 字符""是假值，!"" 的结果是 true，再次取反，!!""的结果就是false
console.log(!!"hello"); // true
// hello是真值，双重取反就是true
console.log(!!null); // false
// null是假值，双重取反就是false
console.log(!!undefined); // false
// undefined是假值，双重取反就是false
console.log(!!{}); // true
// {}是真值，双重取反就是true
console.log(!![]); // true
// []是真值，双重取反就是true
通过上述示例，我们可以快速得到一个结论：
❝「如果某个值是真值，使用!!就是true」
「如果某个值是价值，使用!!就是fasle」
❞
可见，要想熟练使用!!运算符，一定要清楚知道假值有哪些，真值有哪些！
!!的应用场景
将任意值转换为布尔值
!! 可以将任何类型的值（如对象、字符串、数字等）转换为布尔值，如果我们需要明确一个值是 true 还是 false 时很有用。
let isValid = !!inputValue; // 将 inputValue 转换为布尔值，判断其是否为真值
注意：数字0是假值，如果inputValue是0，但是0有效，慎用！
条件判断的简化
当需要判断变量是否为非空、非零、非 null、非 undefined 等时，!! 可以直接使用。
if (!!str) {
// str 是一个非空字符串
}
//同
if (str !="" && str !=0 && str !=null && str != undefined) {
// str 是一个非空字符串
}
确保返回值为布尔类型
在函数返回值需要是布尔类型时，!! 是一种确保返回值为 true 或 false 的最简单方法。再判断数组是不是为空时，这非常好用！
function isEmpty(arr) {
return !!arr.length; // 如果数组非空，返回 true，否则返回 false
}
console.log(isEmpty([])); // false
console.log(isEmpty([1])); // true
在逻辑运算中的应用
在复杂的逻辑运算中，使用 !! 可以将结果强制转换为布尔值，确保逻辑表达式的返回值是 true 或 false。
const isActive = !!user && !!user.isActive;
总结
这篇文章介绍了!!的原理，它核心依赖于 JavaScript 的隐式转换，因此我们必须知道真值和假值。同时，这篇文章介绍了!!的使用场景，大家可以根据情况使用！
但注意，!!可读性比较差，对于初学者，最好不要使用！如果你想希望代码更加清晰，可以考虑使用 Boolean() 函数来代替 !!。
点击关注公众号，“技术干货” 及时达！
