亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

javascript中!?和?!!?的區(qū)別與作用示例詳解

 更新時(shí)間：2025年06月10日 10:00:50   作者：YD_1989  
JavaScript中!取反布爾值,!!強(qiáng)制轉(zhuǎn)換為布爾值,!用于條件判斷取反,!!用于類型轉(zhuǎn)換,這篇文章主要介紹了javascript中!?和?!!?區(qū)別與作用的相關(guān)資料,需要的朋友可以參考下

在 JavaScript 里，! 和 !! 是兩種不同的邏輯運(yùn)算符，它們的功能和使用場(chǎng)景有明顯區(qū)別。

1、 !（邏輯非運(yùn)算符）

它的主要作用是 對(duì)操作數(shù)進(jìn)行布爾值取反。具體來說，就是 先把操作數(shù)轉(zhuǎn)換為布爾值，然后取其相反的值。

代碼示例：

console.log(!true);     // false
console.log(!false);    // true

// 對(duì)于非布爾值，會(huì)先將其轉(zhuǎn)換為布爾值再取反
console.log(!0);        // true（因?yàn)?0 轉(zhuǎn)換為布爾值是 false）
console.log(!'');       // true（空字符串轉(zhuǎn)換為布爾值是 false）
console.log(!null);     // true
console.log(!undefined);// true
console.log(!NaN);      // true

console.log(!5);        // false（因?yàn)?5 轉(zhuǎn)換為布爾值是 true）
console.log(!'hello');  // false（非空字符串轉(zhuǎn)換為布爾值是 true）
console.log(![]);       // false（空數(shù)組是對(duì)象，轉(zhuǎn)換為布爾值是 true）
console.log(!{});       // false（空對(duì)象轉(zhuǎn)換為布爾值是 true）

2、!!（雙重邏輯非運(yùn)算符）

它其實(shí)就是連續(xù)使用兩次 ! 運(yùn)算符。先通過第一個(gè) ! 對(duì)操作數(shù)取反，再用第二個(gè) ! 對(duì)取反后的結(jié)果再次取反，最終得到的是操作數(shù)對(duì)應(yīng)的布爾值。

console.log(!!true);    // true
console.log(!!false);   // false

// 對(duì)于非布爾值，會(huì)將其轉(zhuǎn)換為對(duì)應(yīng)的布爾值
console.log(!!0);       // false
console.log(!!'');      // false
console.log(!!null);    // false
console.log(!!undefined);// false
console.log(!!NaN);     // false

console.log(!!5);       // true
console.log(!!'hello'); // true
console.log(!![]);      // true
console.log(!!{});      // true

3、 核心區(qū)別

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

4、使用場(chǎng)景

  • !：用于條件判斷中取反
const value = null;
if (!value) {
    console.log('值為假值（false）');
}
  • !!：用于將一個(gè)值強(qiáng)制轉(zhuǎn)換為布爾類型，在需要布爾值的場(chǎng)景中經(jīng)常會(huì)用到。
const value = 'hello';
const isTruthy = !!value; // true
console.log(`值是否為真值：${isTruthy}`);

5、在 vue 項(xiàng)目中的使用

（1）!（邏輯非運(yùn)算符）在 vue 中的使用

模板中的條件判斷

在模板里進(jìn)行條件渲染時(shí)，! 可以對(duì)數(shù)據(jù)進(jìn)行取反操作。

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

計(jì)算屬性中返回取反結(jié)果

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

<template>
  <div>
    <button :disabled="isDisabled">提交</button>
  </div>
</template>

<script>
export default {
  computed: {
    isDisabled() {
      // 當(dāng)表單無效時(shí)禁用按鈕
      return !this.formIsValid;
    }
  }
}
</script>

（2）!!（雙重邏輯非運(yùn)算符）

強(qiáng)制轉(zhuǎn)換為布爾值

在模板表達(dá)式或者計(jì)算屬性中，!! 能把值強(qiáng)制轉(zhuǎn)換為布爾值，這在需要布爾值的場(chǎng)景中很有用。

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

監(jiān)聽事件時(shí)處理參數(shù)

在監(jiān)聽事件并處理參數(shù)時(shí)，!! 可將參數(shù)轉(zhuǎn)換為布爾值。

<template>
  <div>
    <input type="checkbox" @change="handleChange">
  </div>
</template>

<script>
export default {
  methods: {
    handleChange(event) {
      // 將事件的選中狀態(tài)轉(zhuǎn)換為布爾值
      const isChecked = !!event.target.checked;
      this.updateStatus(isChecked);
    }
  }
}
</script>

（3）Vue 特有的注意事項(xiàng)

在 v-bind 中使用

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

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

（4）對(duì)比示例

<template>
  <div class="user-profile">
    <!-- 使用 ! 進(jìn)行條件判斷 -->
    <div v-if="!user">
      <button @click="login">登錄</button>
    </div>
    
    <!-- 使用 !! 強(qiáng)制轉(zhuǎn)換為布爾值 -->
    <div v-if="!!user">
      <img :src="user.avatar" alt="用戶頭像">
      <h3>{{ user.name }}</h3>
      
      <!-- 在計(jì)算屬性中使用 ! -->
      <button :disabled="!canEdit">編輯資料</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: null, // 假設(shè)這是從 API 獲取的用戶數(shù)據(jù)
      canEdit: true
    }
  },
  methods: {
    login() {
      // 登錄邏輯...
    }
  },
  computed: {
    // 使用 !! 將值轉(zhuǎn)換為布爾值
    hasAvatar() {
      return !!this.user?.avatar;
    }
  }
}
</script>

6、總結(jié)

  • ! 是取反操作，得到的結(jié)果是布爾值，且與原值的布爾值相反。
  • !! 是強(qiáng)制類型轉(zhuǎn)換，得到的結(jié)果也是布爾值，和原值的布爾值相同。

到此這篇關(guān)于javascript中! 和 !! 的區(qū)別與作用示例詳解的文章就介紹到這了,更多相關(guān)js ! 和 !!區(qū)別與作用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論