你在閱讀其他人的代碼的時(shí)候拟枚，有沒(méi)有遇見(jiàn)一些奇怪的寫(xiě)法薪铜，讓你的思路瞬間卡住，等你回過(guò)神來(lái)便不明覺(jué)厲恩溅，某位大俠曾經(jīng)來(lái)過(guò)這里隔箍。

今天，我們就來(lái)盤(pán)點(diǎn)一下 JavaScript 中一些強(qiáng)大的運(yùn)算符吧~~~

一脚乡、??空值合并運(yùn)算符

如果你第一次遇到它蜒滩，看到的是兩個(gè)問(wèn)號(hào)，估計(jì)腦海里還有更多的問(wèn)號(hào)(小朋友奶稠，你是否有很多問(wèn)號(hào)~~~)

兩個(gè)問(wèn)號(hào)??其美名曰空值合并操作符俯艰，如果第一個(gè)參數(shù)不是 null/undefined，將返回第一個(gè)參數(shù)锌订，否則返回第二個(gè)參數(shù)竹握。

console.log(1 ?? "www.shanzhzonglei.com"); // 1
console.log(false ?? "www.shanzhzonglei.com"); // false
console.log(null ?? "www.shanzhzonglei.com"); // www.shanzhzonglei.com
console.log(undefined ?? "www.shanzhzonglei.com"); // // www.shanzhzonglei.com

所以，只有當(dāng)?shù)谝粋€(gè)參數(shù)是 null/undefined 的時(shí)候辆飘，才返回第二個(gè)參數(shù)啦辐。

注意，雖然 JS 中的未定義 undefined蜈项、空對(duì)象 null昧甘、數(shù)值 0、空數(shù)字 NaN战得、布爾 false，空字符串''都是假值庸推，但??非空運(yùn)算符只對(duì) null/undefined 做處理常侦。

它與邏輯或操作符（||）不同，邏輯或操作符會(huì)在左側(cè)操作數(shù)為假值時(shí)返回右側(cè)操作數(shù)贬媒。比如為假值（'' 或 0）時(shí)聋亡。

console.log(1 || 2); // 1
console.log("" || 2); // 2

二、??=空賦值運(yùn)算符

哦际乘，現(xiàn)在還不止兩個(gè)問(wèn)號(hào)坡倔，還多了一個(gè)等號(hào)，題目越來(lái)越難了么？

??=空賦值運(yùn)算符罪塔，僅當(dāng)值為 null 或 undefined 時(shí)投蝉，此賦值運(yùn)算符才會(huì)賦值。

const student = { age: 20 };
student.age ??= 18;
console.log(student.age); // 20

student.name ??= "shanguagua";
console.log(student.name); // 'shanguagua'

它和上面的??空值合并運(yùn)算符是有聯(lián)系的：x ??= y等價(jià)于x ?? (x = y)征堪，只有當(dāng) x 為 null 或 undefined 時(shí)瘩缆，x = y才會(huì)執(zhí)行。

let x = null;
x ??= 20;
console.log(x); // 20

let y = 5;
y ??= 10;
console.log(y); // 5

三佃蚜、?.可選鏈操作符

可選鏈操作符?.允許讀取位于連接對(duì)象鏈深處的屬性的值庸娱，而不必明確驗(yàn)證鏈中的每個(gè)引用是否有效。操作符會(huì)隱式檢查對(duì)象的屬性是否為 null 或 undefined谐算，代碼更加優(yōu)雅簡(jiǎn)潔熟尉。

const obj = {
  name: "山呱呱",
  foo: {
    bar: {
      baz: 18,
      fun: () => {},
    },
  },
  school: {
    students: [
      {
        name: "shanguagua",
      },
    ],
  },
  say() {
    return "www.shanzhonglei.com";
  },
};

console.log(obj?.foo?.bar?.baz); // 18
console.log(obj?.school?.students?.[0]["name"]); // shanguagua
console.log(obj?.say?.()); // www.shanzhonglei.com

四、?:三元運(yùn)算符

它也叫三目運(yùn)算符洲脂。額斤儿，這個(gè)就很常用了。

對(duì)于條件表達(dá)式b ? x : y腮考，先計(jì)算條件 b雇毫，然后進(jìn)行判斷。如果 b 的值為 true踩蔚，計(jì)算 x 的值棚放，運(yùn)算結(jié)果為 x 的值；否則馅闽，計(jì)算 y 的值飘蚯，運(yùn)算結(jié)果為 y 的值。

console.log(false ? 1 : 2); // 2
console.log(true ? 1 : 2); // 1

五福也、邏輯與(&&)和邏輯或(||)

先來(lái)復(fù)習(xí)一下吧：

邏輯與(&&)：當(dāng)?shù)谝粋€(gè)操作數(shù)為 true 時(shí)局骤，將不會(huì)判斷第二個(gè)操作數(shù)，因?yàn)闊o(wú)論第二個(gè)操作數(shù)為何暴凑，最后的運(yùn)算結(jié)果一定是 true峦甩。

實(shí)際開(kāi)發(fā)中，利用設(shè)個(gè)特性现喳，可實(shí)現(xiàn)如下操作：

1凯傲、如果某個(gè)值為 true，則運(yùn)行某個(gè) function

function say() {
  console.log("www.shanzhonglei.com");
}
let type = true;
type && say(); // www.shanzhonglei.com

2嗦篱、判斷某個(gè)值

// 如果age大于10并且小于20才會(huì)執(zhí)行
if (age > 10 && age < 20) {
  console.log(age);
}

邏輯或(||): 當(dāng)?shù)谝粋€(gè)操作數(shù)為 false 時(shí)(也就是 js 的假值)冰单，將不會(huì)判斷第二個(gè)操作數(shù)，因?yàn)榇藭r(shí)無(wú)論第二個(gè)操作數(shù)為何灸促，最后的運(yùn)算結(jié)果一定是 false诫欠。

實(shí)際開(kāi)發(fā)中涵卵，利用設(shè)個(gè)特性，可實(shí)現(xiàn)如下操作：

1荒叼、給某個(gè)變量設(shè)置初始值

let student = {
  name: "shanguagua",
};

console.log(student.age || "www.shanzhonglei.com"); // www.shanzhonglei.com

2轿偎、判斷某個(gè)值

// 如果age等于10或者等于20或者等于30都執(zhí)行
if (age === 10 || age === 20 || age === 30) {
  console.log(age);
}

六、位運(yùn)算符 & 和 |

位運(yùn)算符是按位進(jìn)行運(yùn)算甩挫，&(與)贴硫、|(或)，使用位運(yùn)算符時(shí)會(huì)拋棄小數(shù)位伊者，我們可以利用|0來(lái)給數(shù)字取整英遭。也可以使用&1來(lái)判斷奇偶數(shù)。

實(shí)際開(kāi)發(fā)中亦渗，利用設(shè)個(gè)特性挖诸，可實(shí)現(xiàn)如下操作：

1、取整

1.3 |
  (0 - // 打印出 1
    1.9) |
  0; // 打印出 -1

2法精、判斷奇偶數(shù)

let num = 5;
!!(num & 1); // true
!!(num % 2); // true

七多律、雙位運(yùn)算符 ~~

可以使用雙位操作符來(lái)替代正數(shù)的 Math.floor( )，替代負(fù)數(shù)的 Math.ceil( )搂蜓。

雙否定位操作符的優(yōu)勢(shì)在于它執(zhí)行相同的操作運(yùn)行速度更快狼荞，對(duì)正數(shù)來(lái)說(shuō)~~運(yùn)算結(jié)果與 Math.floor( ) 運(yùn)算結(jié)果相同，而對(duì)于負(fù)數(shù)來(lái)說(shuō)與 Math.ceil( ) 的運(yùn)算結(jié)果相同帮碰。

Math.floor(5.2) === 5; // true
~~3.2 === 3; // true
Math.ceil(-6.6) === -6; // true
~~-4.5 === -6; // true

七相味、邏輯運(yùn)算符 !

!，可將變量轉(zhuǎn)換成 boolean 類型殉挽，null丰涉、undefined 和空字符串''取反都為 true，其余都為 false斯碌。一般來(lái)說(shuō)會(huì)有好幾種用法一死，!，!!傻唾，!=投慈，!==。

7.1 利用!取反

let cat = false;
console.log(!cat); // true

7.2 利用!!做類型判斷

判斷變量 a 不等于 null冠骄，undefined 和''才能執(zhí)行的方法伪煤。

var a;
if (a != null && typeof a != undefined && a != "") {
  //a有內(nèi)容才執(zhí)行的代碼
}

等價(jià)于：

if (!!a) {
  //a有內(nèi)容才執(zhí)行的代碼...
}

7.3 兩個(gè)值是否相等

一般來(lái)說(shuō)都是用的全不等于!==，因?yàn)槭褂貌坏扔?=的話猴抹，0 != ""返回的是 false，原因是 JS 中 0 和''轉(zhuǎn)化成布爾型都為 false锁荔，所以推薦還是使用全不等于!==蟀给。

let a = 0;
let b = 0;
let c = "0";
let d = '';
a != b       //false
a != c      // false    number和string的0 被判斷為相等
a != d      // false    0和空字符串被判斷為相等

a !== b    // false
a !== c   // true
a !== d   // true

推薦閱讀

歡迎大家關(guān)注我的公眾號(hào)【前端技術(shù)驛站】蝙砌，求關(guān)注，馬上突破100大關(guān)了~~~實(shí)戰(zhàn)視頻已準(zhǔn)備好跋理，回復(fù)[5678]獲取