日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
&&，||超越了我的認(rèn)知

今天的課程誕生于一個 bug，有一段代碼：

成都創(chuàng)新互聯(lián)公司是一家專業(yè)從事成都做網(wǎng)站、成都網(wǎng)站制作的網(wǎng)絡(luò)公司。作為專業(yè)網(wǎng)絡(luò)公司,成都創(chuàng)新互聯(lián)公司依托的技術(shù)實力、以及多年的網(wǎng)站運營經(jīng)驗,為您提供專業(yè)的成都網(wǎng)站建設(shè)、成都全網(wǎng)營銷及網(wǎng)站設(shè)計開發(fā)服務(wù)！

 
 
 
 
    
  
  
  
  
  1. const person = { 
    2. 
  
  
  
  
  2.     name: 'suyan', 
    3. 
  
  
  
  
  3.     getName() { 
    4. 
  
  
  
  
  4.         return this.name; 
    5. 
  
  
  
  
  5.     } 
    6. 
  
  
  
  
  6. }; 
    7. 
  
  
  
  
  7.  
    8. 
  
  
  
  
  8. function isSuyan()  
    9. 
  
  
  
  
  9.     if (person.name === 'suyan' && person.getName) { 
    10. 
  
  
  
  
  10.         return true; 
    11. 
  
  
  
  
  11.     } 
    12. 
  
  
  
  
  12.     return false; 
    13. 
  
  
  
  
  13. } 
    14.

隨手對這段代碼進(jìn)行了重構(gòu)：

 
 
 
 
    
  
  
  
  
  1. function isSuyan()  
    2. 
  
  
  
  
  2.     return person.name === 'suyan' && person.getName; 
    3. 
  
  
  
  
  3. } 
    4.

執(zhí)行下面打的代碼，結(jié)果是什么?

 
 
 
 
    
  
  
  
  
  1. let isTrue = isSuyan(); 
    2. 
  
  
  
  
  2. console.log(isTrue); 
    3.

結(jié)果是一個函數(shù)，可能出乎你我的意料：

遇到問題立馬在百度一下：

看到一段解釋：

Logical operators are typically used with Boolean (logical) values. When they are, they return a Boolean value. However, the && and || operators actually return the value of one of the specified operands, so if these operators are used with non-Boolean values, they will return a non-Boolean value.

意思：邏輯運算符如果使用的都是布爾值，則結(jié)果也是布爾值。然而，在 && 和 || 中， 當(dāng)操作數(shù)是非布爾值的時候結(jié)果可能是非布爾值。

理解起來有點繞開，看個例子：

&& 運算符從左到右進(jìn)行計算，如果為真，繼續(xù)往后走，直到遇到為 false 的，或者到了最后一個操作數(shù)。如果操作數(shù)是布爾值結(jié)果返回布爾值，如果操作數(shù)是非布爾值結(jié)果返回非布爾值。

 
 
 
 
    
  
  
  
  
  1. const a = 10; 
    2. 
  
  
  
  
  2. const b = -5; 
    3. 
  
  
  
  
  3. const c = 1; 
    4. 
  
  
  
  
  4. console.log(a && b); // -5 
    5. 
  
  
  
  
  5. console.log(a > 0 && b); // -5 
    6. 
  
  
  
  
  6. console.log(a < 0 && b); // false 
    7. 
  
  
  
  
  7. console.log(a && b < 0); // true 
    8. 
  
  
  
  
  8. console.log(a && b > 0); // false 
    9. 
  
  
  
  
  9. console.log(a > 0 && b < 0); // true 
    10. 
  
  
  
  
  10. console.log(a && b && c); // 1 
    11.

|| 運算符，只要遇到一個真值便停止計算，結(jié)果的規(guī)則和 && 運算符一致。

 
 
 
 
    
  
  
  
  
  1. console.log(a || b); // 10 
    2. 
  
  
  
  
  2. console.log(a > 0 || b); // true 
    3. 
  
  
  
  
  3. console.log(a < 0 || b); // -5 
    4. 
  
  
  
  
  4. console.log(a || b < 0); // 10 
    5. 
  
  
  
  
  5. console.log(a || b > 0); // 10 
    6. 
  
  
  
  
  6. console.log(a > 0 || b < 0); // true 
    7. 
  
  
  
  
  7. console.log(a || b || c); // 10 
    8.

擴(kuò)散幾個知識點：

1.可以被轉(zhuǎn)換成 false 的值：null、NaN、0、空字符串 "", '',``、undefined。

2.&& 的優(yōu)先級大于 || 的優(yōu)先級。

 
 
 
 
    
  
  
  
  
  1. true || false && false      // returns true, because && is executed first 
    2. 
  
  
  
  
  2. (true || false) && false    // returns false, because operator precedence cannot apply 
    3.

3.!和 !! 操作符返回的值永遠(yuǎn)是布爾值，上面的例子可以改為下面這樣，返回值永遠(yuǎn)是布爾值：

 
 
 
 
    
  
  
  
  
  1. function isSuyan() { 
    2. 
  
  
  
  
  2.     return !!(person.name === 'suyan' && person.getName); 
    3. 
  
  
  
  
  3. } 
    4.

4. 優(yōu)先級

假如有個 Label 顯示用戶的名稱，顯示規(guī)則為：默認(rèn)值是前端小課，如果用戶定義了別名就用別名，如果用戶定義了真實的名字就用真實的名字，優(yōu)先級為真實名字 > 昵稱 > 默認(rèn)名字。我以前這樣寫：

 
 
 
 
    
  
  
  
  
  1. function showName() { 
    2. 
  
  
  
  
  2.     let showName; 
    3. 
  
  
  
  
  3.     let trueName = '真名'; 
    4. 
  
  
  
  
  4.     let nickName = '別名'; 
    5. 
  
  
  
  
  5.     if (trueName) { 
    6. 
  
  
  
  
  6.         showName = trueName; 
    7. 
  
  
  
  
  7.     } 
    8. 
  
  
  
  
  8.     else if (nickName) { 
    9. 
  
  
  
  
  9.         showName = nickName; 
    10. 
  
  
  
  
  10.     } 
    11. 
  
  
  
  
  11.     else { 
    12. 
  
  
  
  
  12.         showName = '前端小課'; 
    13. 
  
  
  
  
  13.     } 
    14. 
  
  
  
  
  14.     return showName; 
    15. 
  
  
  
  
  15. } 
    16.

學(xué)完這節(jié)課程我這樣寫，兩個函數(shù)的結(jié)果是一樣的，但代碼量從 15 行縮減到了 6 行：

 
 
 
 
    
  
  
  
  
  1. function showName2() { 
    2. 
  
  
  
  
  2.     let defaultName = '前端小課'; 
    3. 
  
  
  
  
  3.     let trueName = '真名'; 
    4. 
  
  
  
  
  4.     let nickName = '別名'; 
    5. 
  
  
  
  
  5.     return trueName || nickName || defaultName; 
    6. 
  
  
  
  
  6. } 
    7.

這節(jié)課程主要學(xué)習(xí)了 JavaScript 中的 && 、||、! 和 !!，如果使用不當(dāng)可能會引發(fā)bug。大家加油!!!


文章標(biāo)題：&&，||超越了我的認(rèn)知
文章源于：http://www.dlmjj.cn/article/dhdscig.html