javascript —— ! 和 !! 的區別與作用

在 JavaScript 里，! 和 !! 是兩種不同的邏輯運算符，它們的功能和使用場景有明顯區別。

1、 !（邏輯非運算符）

它的主要作用是 對操作數進行布爾值取反。具體來說，就是 先把操作數轉換為布爾值，然后取其相反的值。

代碼示例：

console.log(!true);     // false
console.log(!false);    // true// 對于非布爾值，會先將其轉換為布爾值再取反
console.log(!0);        // true（因為 0 轉換為布爾值是 false）
console.log(!'');       // true（空字符串轉換為布爾值是 false）
console.log(!null);     // true
console.log(!undefined);// true
console.log(!NaN);      // trueconsole.log(!5);        // false（因為 5 轉換為布爾值是 true）
console.log(!'hello');  // false（非空字符串轉換為布爾值是 true）
console.log(![]);       // false（空數組是對象，轉換為布爾值是 true）
console.log(!{});       // false（空對象轉換為布爾值是 true）

2、!!（雙重邏輯非運算符）

它其實就是連續使用兩次 ! 運算符。先通過第一個 ! 對操作數取反，再用第二個 ! 對取反后的結果再次取反，最終得到的是操作數對應的布爾值。

console.log(!!true);    // true
console.log(!!false);   // false// 對于非布爾值，會將其轉換為對應的布爾值
console.log(!!0);       // false
console.log(!!'');      // false
console.log(!!null);    // false
console.log(!!undefined);// false
console.log(!!NaN);     // falseconsole.log(!!5);       // true
console.log(!!'hello'); // true
console.log(!![]);      // true
console.log(!!{});      // true

3、 核心區別

• !：能將任何值轉換為布爾值，并且結果與該值本身的布爾值相反。
• !!：同樣可以把任何值轉換為布爾值，但結果和該值本身的布爾值相同。其本質和 Boolean() 函數的作用一樣。

4、使用場景

• !：用于條件判斷中取反

const value = null;
if (!value) {console.log('值為假值（false）');
}

• !!：用于將一個值強制轉換為布爾類型，在需要布爾值的場景中經常會用到。

const value = 'hello';
const isTruthy = !!value; // true
console.log(`值是否為真值：${isTruthy}`);

5、在 vue 項目中的使用

（1）!（邏輯非運算符）在 vue 中的使用

模板中的條件判斷

在模板里進行條件渲染時，! 可以對數據進行取反操作。

<template><div><!-- 如果 isLoading 為 false，則顯示內容 --><div v-if="!isLoading">內容已加載</div><!-- 如果 user 為空，則顯示提示 --><div v-if="!user">請先登錄</div></div>
</template>

計算屬性中返回取反結果

在計算屬性里，! 能夠返回取反后的布爾值。

<template><div><button :disabled="isDisabled">提交</button></div>
</template><script>
export default {computed: {isDisabled() {// 當表單無效時禁用按鈕return !this.formIsValid;}}
}
</script>

（2）!!（雙重邏輯非運算符）

強制轉換為布爾值

在模板表達式或者計算屬性中，!! 能把值強制轉換為布爾值，這在需要布爾值的場景中很有用。

<template><div><!-- 將 message 轉換為布爾值，判斷是否顯示消息提示 --><Alert v-if="!!message" :type="messageType">{{ message }}</Alert><!-- 顯示數據是否存在的狀態 --><span>{{ !!user ? '已登錄' : '未登錄' }}</span></div>
</template>

監聽事件時處理參數

在監聽事件并處理參數時，!! 可將參數轉換為布爾值。

<template><div><input type="checkbox" @change="handleChange"></div>
</template><script>
export default {methods: {handleChange(event) {// 將事件的選中狀態轉換為布爾值const isChecked = !!event.target.checked;this.updateStatus(isChecked);}}
}
</script>

（3）Vue 特有的注意事項

在 v-bind 中使用

在使用 v-bind 綁定布爾屬性時，!! 可以確保傳入的值是布爾類型。

<template><div><!-- 確保 loading 是布爾值 --><Spinner :loading="!!loadingState" /></div>
</template>

（4）對比示例

<template><div class="user-profile"><!-- 使用 ! 進行條件判斷 --><div v-if="!user"><button @click="login">登錄</button></div><!-- 使用 !! 強制轉換為布爾值 --><div v-if="!!user"><img :src="user.avatar" alt="用戶頭像"><h3>{{ user.name }}</h3><!-- 在計算屬性中使用 ! --><button :disabled="!canEdit">編輯資料</button></div></div>
</template><script>
export default {data() {return {user: null, // 假設這是從 API 獲取的用戶數據canEdit: true}},methods: {login() {// 登錄邏輯...}},computed: {// 使用 !! 將值轉換為布爾值hasAvatar() {return !!this.user?.avatar;}}
}
</script>

6、總結

• ! 是取反操作，得到的結果是布爾值，且與原值的布爾值相反。
• !! 是強制類型轉換，得到的結果也是布爾值，和原值的布爾值相同。