新手小白如何使用!!运算符写出更简洁直观的代码？

!!在项目中的妙用

最近公司来了几个实习生，在领导的示意下，我负责帮他们优化审查代码。其中，有一个实习生的代码着实吸引了我。

业务应该是要做非空判断，他的代码是这么写的：

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() 函数来代替 !!。

点击关注公众号，“技术干货” 及时达！