1、前言

js的運(yùn)算符很多，之前有文章提過。例如如下：

js整數(shù)的操作：

使用|0和~~可以將浮點(diǎn)轉(zhuǎn)成整型且效率方面要比同類的parseInt,Math.round 要快,在處理像素及動(dòng)畫位移等效果的時(shí)候會(huì)很有用。性能比較見此。

var foo = (12.4 / 4.13) | 0;//結(jié)果為3
var bar = ~~(12.4 / 4.13);//結(jié)果為3

還有一個(gè)小技巧，就是??！2個(gè)嘆號(hào)，可以將一個(gè)值，快速轉(zhuǎn)化為布爾值。你可以測(cè)試一下！

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

這些都是一些運(yùn)算符，具體請(qǐng)看四十九個(gè)javascript小知識(shí)實(shí)用技巧，js運(yùn)算符單豎杠“|”

今天再補(bǔ)充幾個(gè)：

2、逗號(hào)運(yùn)算符

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

逗號(hào)運(yùn)算符，它將先計(jì)算左邊的參數(shù)，再計(jì)算右邊的參數(shù)值。然后返回最右邊參數(shù)的值。

var a = 10, b = 20;

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

var c = CommaTest();

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

知道了調(diào)用函數(shù)運(yùn)算符后，我們舉個(gè)例子說明關(guān)于如何處理它們沖突的事。

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

上面這段代碼輸出10,但是如果根據(jù)逗號(hào)運(yùn)算符的原理來解釋的話，那應(yīng)該是輸出8才對(duì)。為什么呢？

因?yàn)槎禾?hào)運(yùn)算符在JavaScript在的優(yōu)先級(jí)是最底的，記住這一點(diǎn)非常有用。所以函數(shù)調(diào)用運(yùn)算符將先于逗號(hào)運(yùn)算符運(yùn)行。結(jié)果alert函數(shù)輸出第一個(gè)參數(shù)的值。將上面的代碼修改成如下所示即可。

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

3、javaScript空值合并操作符（??）

只有當(dāng)左側(cè)為null和undefined時(shí)，才會(huì)返回右側(cè)的數(shù) 空值合并操作符（??）是一個(gè)邏輯操作符，當(dāng)左側(cè)的操作數(shù)為 null 或者 undefined 時(shí)，返回其右側(cè)操作數(shù)，否則返回左側(cè)操作數(shù)。

與邏輯或操作符（||）不同，邏輯或操作符會(huì)在左側(cè)操作數(shù)為假值時(shí)返回右側(cè)操作數(shù)。也就是說，如果使用 || 來為某些變量設(shè)置默認(rèn)值，可能會(huì)遇到意料之外的行為。比如為假值（例如，'' 或 0）時(shí)。見下面的例子。

let str = null||undefined
let result = str??'haorooms博客'
console.log(result)//haorooms博客

const nullValue = null;
const emptyText = ""; // 空字符串，是一個(gè)假值，Boolean("") === false
const someNumber = 42;

const valA = nullValue ?? "valA 的默認(rèn)值";
const valB = emptyText ?? "valB 的默認(rèn)值";
const valC = someNumber ?? 0;

console.log(valA); // "valA 的默認(rèn)值"
console.log(valB); // ""（空字符串雖然是假值，但不是 null 或者 undefined）
console.log(valC); // 42

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

可選鏈操作符( ?. )允許讀取位于連接對(duì)象鏈深處的屬性的值，而不必明確驗(yàn)證鏈中的每個(gè)引用是否有效。?. 操作符的功能類似于 . 鏈?zhǔn)讲僮鞣?，不同之處在于，在引用為?nullish ) (null 或者 undefined) 的情況下不會(huì)引起錯(cuò)誤，該表達(dá)式短路返回值

使用可選鏈操作符( ?. )瀏覽器不會(huì)出現(xiàn)報(bào)錯(cuò)！

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

函數(shù)調(diào)用：

let result = someOne.customMethod?.();

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

可選鏈與表達(dá)式：

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

可選鏈訪問數(shù)組：

let arrayItem = arr?.[42];

短路計(jì)算：

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

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

//當(dāng)在表達(dá)式中使用可選鏈時(shí)，如果左操作數(shù)是 null 或 undefined，表達(dá)式將不會(huì)被計(jì)算


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

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

到此這篇關(guān)于js不常見操作運(yùn)算符總結(jié)的文章就介紹到這了,更多相關(guān)js操作運(yùn)算符內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論