一起盤點JavaScript中一些強大的運算符

前言

你在閱讀其他人的代碼的時候,有沒有遇見一些奇怪的寫法,讓你的思路瞬間卡住,等你回過神來便不明覺厲,某位大俠曾經來過這裡。

今天,我們就來盤點一下 JavaScript 中一些強大的運算符吧~~~

一、??空值合並運算符

如果你第一次遇到它,看到的是兩個問號,估計腦海裡還有更多的問號(小朋友,你是否有很多問號~~~)

兩個問號??其美名曰空值合並操作符,如果第一個參數不是 null/undefined,將返回第一個參數,否則返回第二個參數。

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

所以,隻有當第一個參數是 null/undefined 的時候,才返回第二個參數。

註意,雖然 JS 中的未定義 undefined、空對象 null、數值 0、空數字 NaN、佈爾 false,空字符串”都是假值,但??非空運算符隻對 null/undefined 做處理。

它與邏輯或操作符(||)不同,邏輯或操作符會在左側操作數為假值時返回右側操作數。比如為假值(” 或 0)時。

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

二、??=空賦值運算符

哦,現在還不止兩個問號,還多瞭一個等號,題目越來越難瞭麼?

??=空賦值運算符,僅當值為 null 或 undefined 時,此賦值運算符才會賦值。

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

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

它和上面的??空值合並運算符是有聯系的:x ??= y等價於x ?? (x = y),隻有當 x 為 null 或 undefined 時,x = y才會執行。

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

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

三、?.可選鏈操作符

可選鏈操作符?.允許讀取位於連接對象鏈深處的屬性的值,而不必明確驗證鏈中的每個引用是否有效。操作符會隱式檢查對象的屬性是否為 null 或 undefined,代碼更加優雅簡潔。

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

四、?:三元運算符

它也叫三目運算符。額,這個就很常用瞭。

對於條件表達式b ? x : y,先計算條件 b,然後進行判斷。如果 b 的值為 true,計算 x 的值,運算結果為 x 的值;否則,計算 y 的值,運算結果為 y 的值。

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

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

先來復習一下吧:

邏輯與(&&):當第一個操作數為 true 時,將不會判斷第二個操作數,因為無論第二個操作數為何,最後的運算結果一定是 true。

實際開發中,利用設個特性,可實現如下操作:

1、如果某個值為 true,則運行某個 function

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

2、判斷某個值

// 如果age大於10並且小於20才會執行
if (age > 10 && age < 20) {
  console.log(age);
}

邏輯或(||): 當第一個操作數為 false 時(也就是 js 的假值),將不會判斷第二個操作數,因為此時無論第二個操作數為何,最後的運算結果一定是 false。

實際開發中,利用設個特性,可實現如下操作:

1、給某個變量設置初始值

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

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

2、判斷某個值

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

六、位運算符 & 和 |

位運算符是按位進行運算,&(與)、|(或),使用位運算符時會拋棄小數位,我們可以利用|0來給數字取整。也可以使用&1來判斷奇偶數。

實際開發中,利用設個特性,可實現如下操作:

1、取整

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

2、判斷奇偶數

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

七、雙位運算符 ~~

可以使用雙位操作符來替代正數的 Math.floor( ),替代負數的 Math.ceil( )。

雙否定位操作符的優勢在於它執行相同的操作運行速度更快,對正數來說~~運算結果與 Math.floor( ) 運算結果相同,而對於負數來說與 Math.ceil( ) 的運算結果相同。

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

七、邏輯運算符 !

!,可將變量轉換成 boolean 類型,null、undefined 和空字符串”取反都為 true,其餘都為 false。一般來說會有好幾種用法,!,!!,!=,!==。

7.1 利用!取反

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

7.2 利用!!做類型判斷

判斷變量 a 不等於 null,undefined 和”才能執行的方法。

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

等價於:

if (!!a) {
  //a有內容才執行的代碼...
}

7.3 兩個值是否相等

一般來說都是用的全不等於!==,因為使用不等於!=的話,0 != “”返回的是 false,原因是 JS 中 0 和”轉化成佈爾型都為 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

總結

到此這篇關於JavaScript中一些強大的運算符的文章就介紹到這瞭,更多相關JavaScript強大的運算符內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: