1. 程式人生 > 程式設計 >js不常見操作運算子總結

js不常見操作運算子總結

目錄
  • 2、逗號運算子
  • 3、空值合併操作符(??)
  • 4、Script可選鏈操作符( ?. )

1、前言

的運算子很多,之前有文章提過。例如如下:

js整數的操作:

使用|0~~可以將浮點轉成整型且效率方面要比同類的parseInt,Math.round 要快,在處理畫素及動畫位移等效果的時候會很有用。效能比較見此。

var fhttp://www.cppcns.comoo = (12.4 / 4.13) | 0;//結果為3
var bar = ~~(12.4 / 4.13);//結果為3


還有一個小技巧,就是!!2個歎號,可以將一個值,快速轉化為布林值。你可以測試一下!

var eee="eee";
alert(!!eee)


這些都是一些運算子,具體請看四十九個javascript小知識實用技巧,js運算子單豎槓“|”

今天再補充幾個:

2、逗號運算子

let x = 1;
x = (x++,x);
console.log(x);
// expected output: 2
x = (2,3);
console.log(x);
// expected output: 3

逗號運算子,它將先計算左邊的引數,再計算右邊的引數值。然後返回最右邊引數的值。

var a = 10,b = 20;

function CommaTest(){
    return a++,b++,10;
}

var c = CommaTest()
; alert(a); // 返回11 alert(b); // 返回21 alert(c); // 返回10

知道了呼叫函式運算子後,我們舉個例子說明關於如何處理它們衝突的事。

alert(2*5,2*4); // 輸出10

上面這段程式碼輸出10,但是如果根據逗號運算子的原理來解釋的話,那應該是輸出8才對。為什麼呢?

因為逗號運算子在JavaScript在的優先順序是最底的,記住這一點非常有用。所以函式呼叫運算子將先於逗號運算子執行。結果alert函式輸出第一個引數的值。將上面的程式碼修改成如下所示即可。

alert((2*5,2*4)); // 返回8

3、javaScript空值合併操作符(??)

只有當左側為nullundefined時,才會返回右側的數 空值合併操作符(??)是一個邏輯操作符,當左側的運算元為 null 或者 undefined 時,返回其右側運算元,否則返回左側運算元。

與邏輯或操作符(||)不同,邏輯或操作符會在左側運算元為假值時返回右側運算元。也就是說,如果使用 || 來為某些變數設定預設值,可能會遇到意料之外的行為。比如為假值(例如,'' 或 0)時。見下面的例子。

let str = null||undefined
let result = str??'haorooms部落格'
console.log(result)//haorooms部落格

const nullValue = null;
const emptyText = ""; // 空字串,是一個假http://www.cppcns.com值,Boolean("") === false
const someNumber = 42;

const valA = nullValue ?? "valA 的預設值";
const valB = emptyText ?? "valB 的預設值";
const valC = someNumber ?? 0;

console.log(valA); // "valA 的預設值"
console.log(valB); // ""(空字串雖然是假值,但不是 null 或者 undefined)
console.log(valC); // 42

4、javaScript可選鏈操作符( ?. )

可選鏈操作符( ?. )允許讀取位於連線物件鏈深處的屬性的值,而不必明確驗證鏈中的每個引用是否有效。?. 操作符的功能類似於 . 鏈式操作符,不同之處在於,在引用為空(nullish ) (null 或者 undefined) 的情況下不會引起錯誤,該表示式短路返回值

使用可選鏈操作符( ?. )瀏覽器不會出現報錯!

const demo = {
    name: 'haorooms',cat: {
        name: 'haorooms cat'
    }
};
console.log(demo.dog?.name); 
// expecte客棧d output: undefined
console.log(demo.what?.());
// expected output: undefined


函式呼叫:

let result = someOne.customMethod?.();

如果希望允許 someOne 也為 null 或者 undefined ,那麼你需要像這樣寫 someOne?.customMethod?.()

可選鏈與表示式:

let nestedProp = obj?.['prop' + 'Name'];

可選鏈訪問陣列:

let arrayItem = arr?.[42];

短路計算:

let potentiallyNullObj = null;
let x = 0;
let prop = potentiallyNullObj?.[x++];

 
console.log(x); // x 將不會被遞增,依舊輸出 0

//當在表示式中使用可選鏈時,如果左運算元是 null 或 undefined,表示式將不會被計算


let customer = {
  name: "haorooms",details: { age: 82 }
};

let customerCity = customer?.city ?? "中國";
console.log(customerCity);  // “中國”

到此這篇關於js不常見操作運算子總結的文章就介紹到這了,更多相關js操作運算子內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!