日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

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

新聞中心

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

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

成都創(chuàng)新互聯(lián)公司是一家專業(yè)從事成都做網(wǎng)站、成都網(wǎng)站制作的網(wǎng)絡(luò)公司。作為專業(yè)網(wǎng)絡(luò)公司,成都創(chuàng)新互聯(lián)公司依托的技術(shù)實(shí)力、以及多年的網(wǎng)站運(yùn)營(yíng)經(jīng)驗(yàn),為您提供專業(yè)的成都網(wǎng)站建設(shè)、成都全網(wǎng)營(yíng)銷(xiāo)及網(wǎng)站設(shè)計(jì)開(kāi)發(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.

隨手對(duì)這段代碼進(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é)果是一個(gè)函數(shù)，可能出乎你我的意料：

遇到問(wèn)題立馬在百度一下：

看到一段解釋：

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.

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

理解起來(lái)有點(diǎn)繞開(kāi)，看個(gè)例子：

&& 運(yùn)算符從左到右進(jìn)行計(jì)算，如果為真，繼續(xù)往后走，直到遇到為 false 的，或者到了最后一個(gè)操作數(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.

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

 
 
 
 
    
  
  
  
  
  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ò)散幾個(gè)知識(shí)點(diǎn)：

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

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

 
 
 
 
    
  
  
  
  
  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)先級(jí)

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

 
 
 
 
    
  
  
  
  
  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é)課程我這樣寫(xiě)，兩個(gè)函數(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)可能會(huì)引發(fā)bug。大家加油!!!


新聞標(biāo)題：&&，||超越了我的認(rèn)知
轉(zhuǎn)載源于：http://m.5511xx.com/article/dhdscig.html