摘要：系列目錄復(fù)習(xí)資料資料整理個(gè)人整理重溫基礎(chǔ)語(yǔ)法和數(shù)據(jù)類型重溫基礎(chǔ)流程控制和錯(cuò)誤處理重溫基礎(chǔ)循環(huán)和迭代重溫基礎(chǔ)函數(shù)本章節(jié)復(fù)習(xí)的是中的表達(dá)式和運(yùn)算符，用好這些可以大大提高開(kāi)發(fā)效率。

本文是 重溫基礎(chǔ) 系列文章的第五篇。
今日感受：家的意義。

系列目錄：

【復(fù)習(xí)資料】ES6/ES7/ES8/ES9資料整理(個(gè)人整理)

【重溫基礎(chǔ)】1.語(yǔ)法和數(shù)據(jù)類型

【重溫基礎(chǔ)】2.流程控制和錯(cuò)誤處理

【重溫基礎(chǔ)】3.循環(huán)和迭代

【重溫基礎(chǔ)】4.函數(shù)

本章節(jié)復(fù)習(xí)的是JS中的表達(dá)式和運(yùn)算符，用好這些可以大大提高開(kāi)發(fā)效率。
**由于思否的markdown編輯器中，用表格編輯的時(shí)候，若含有"||"或者"|"會(huì)出錯(cuò)，所以我這里有幾張用截圖咯。

一些基礎(chǔ)：JavaScript中運(yùn)算符有一元、二元和三元（條件）運(yùn)算符，常見(jiàn)寫(xiě)法：

// 操作數(shù) + 運(yùn)算符 + 操作數(shù)
1 + 2 ;

// 運(yùn)算符 + 操作數(shù)
x ++;

// 操作數(shù) + 運(yùn)算符
++ x;

本文將介紹一下幾類運(yùn)算符：

賦值運(yùn)算符(Assignment operators)

比較運(yùn)算符(Comparison operators)

算數(shù)運(yùn)算符(Arithmetic operators)

位運(yùn)算符(Bitwise operators)

邏輯運(yùn)算符(Logical operators)

字符串運(yùn)算符(String operators)

條件（三元）運(yùn)算符(Conditional operator)

逗號(hào)運(yùn)算符(Comma operator)

一元運(yùn)算符(Unary operators)

關(guān)系運(yùn)算符(Relational operator)

最簡(jiǎn)單的賦值運(yùn)算符是 = ，它將右邊操作數(shù)的值賦值給左邊的操作數(shù)，如 a = b。
另外常見(jiàn)的復(fù)合賦值運(yùn)算符有如下：
|名稱|簡(jiǎn)寫(xiě)的操作符|含義|
|---|---|---|
|賦值| x = y| x = y|
|加法賦值| x += y | x = x + y|
|減法賦值| x -= y | x = x - y|
|乘法賦值| x *= y | x = x * y|
|除法賦值| x /= y | x = x / y|
|求余賦值| x %= y | x = x % y|
|求冪賦值| x **= y| x = x ** y|
|左移位賦值| x <<= y| x = x << y|
|右移位賦值| x >>= y| x = x >> y|
|無(wú)符號(hào)右移位賦值| x >>>= y| x = x >>> y|
|按位與賦值| x &= y| x = x & y|
|按位異或賦值| x ^= y| x = x ^ y|
|按位或賦值| x |= y| x = x | y|

另外在ES6中，新增一類解構(gòu)賦值：

let a = ["aa", "bb", "cc"];

// 不使用解構(gòu)賦值
let a1 = a[0];
let a2 = a[1];

// 使用解構(gòu)賦值
let [a1, a2] = a;

通過(guò)比較兩個(gè)比較對(duì)象來(lái)返回一個(gè)是否為真的布爾值，當(dāng)兩個(gè)比較的對(duì)象不是相同類型，JavaScript會(huì)嘗試將兩個(gè)比較對(duì)象轉(zhuǎn)換成相同類型進(jìn)行比較:

let a = 10;
let b = "12";
a > b; // false

常用的比較運(yùn)算符有：
|名稱|描述|返回true的示例|
|---|---|---|
|等于 == | 操作符兩邊數(shù)據(jù)相等 | 3 == "3" |
|不等于 !== | 操作符兩邊數(shù)據(jù)不相等 | 3 != "4" |
|全等 === | 操作符兩邊數(shù)據(jù)相等且類型相同 | 3 === 3 |
|不全等 !== | 操作符兩邊數(shù)據(jù)不相等或類型不相同 | 3 !== "3" |
|大于 > | 判斷操作符左邊大于右邊 | 3 > 2 |
|大于等于 >= | 判斷操作符左邊大于或等于右邊 | 3 >= 2 |
|小于 < | 判斷操作符左邊小于右邊 | 3 < 4 |
|小于等于 <= | 判斷操作符左邊小于或等于右邊 | 3 <= 4 |

注意：
=>不是運(yùn)算符，而是ES6中新增的箭頭函數(shù)的標(biāo)記符號(hào)。

除了標(biāo)準(zhǔn)的加減乘除這些基本運(yùn)算符，JavaScript還提供一些新的算數(shù)運(yùn)算符：

位運(yùn)算符是在數(shù)字底層（即表示數(shù)字的 32 個(gè)數(shù)位）進(jìn)行操作的。
復(fù)習(xí)數(shù)字32位數(shù)的表示

示例解釋：
1的二進(jìn)制表示為 0 0 0 0 0 0 1
3的二進(jìn)制表示為 0 0 0 0 0 1 1

1.按位與 &

1 & 3 ; // 1
1 | 3 ; // 3
1 ^ 3 ; // 2
~1 ;    // -2
1>>1  ; // 0

1.16進(jìn)制顏色值轉(zhuǎn)RGB：

function hexToRGB(hex){
    let h = hex.replace("#","0x"),
        r = h >> 16,
        g = h >> 8 & 0xff,
        b = h & 0xff;
    return `rgb(${r},${g},$)`
}
hexToRGB("#eeddff");           // "rgb(238,221,255)"

2.RGB轉(zhuǎn)16進(jìn)制：

function RGBToHex(rgb){
    let r = rgb.split(/[^d]+/),
        c = r[1]<<16 | r[2]<<8 | r[3];
    return `#${c.toString(16)}`;
}
RGBToHex("rgb(238,221,255)"); // "#eeddff"

常用來(lái)處理布爾值，但是當(dāng)處理非布爾值的時(shí)候，往往返回非布爾值：

注意： 能被轉(zhuǎn)成false的值有null，0，NaN，空字符串""和undefined。
幾個(gè)示例：

let a1 = true && true;    // true
let a2 = true && false;   // false
let a3 = false && true;   // false
let a4 = false && false;  // false
let a5 = false && "leo";  // false
let a6 = true && "leo";   // "leo"
let a7 = "leo" && "robin";// "robin"


let b1 = true || true;    // true
let b2 = true || false;   // true
let b3 = false || true;   // true
let b4 = false || false;  // false
let b5 = false || "leo";  // "leo"
let b6 = true || "leo";   // true
let b7 = "leo" || "robin";// "leo"

let c1 = !true;  // false
let c2 = !false; // true
let c3 = !"leo"; // false

常常還使用短路求值：

false && anything ; // 被短路求值為false
true || anything ;  // 被短路求值為true

在拼接字符串中，由 + 來(lái)連接兩個(gè)字符串：

let a = "leo " + "cute~"; // "leo cute~"

let b = "ha";
a += b; // "leo cute~ha"

可以使用三個(gè)操作數(shù)的運(yùn)算符，運(yùn)算結(jié)果為根據(jù)給定條件在兩個(gè)值中取一個(gè)：

// 當(dāng)條件為真 則取 值1 ，否則取 值2
// 條件 ? 值1 : 值2
let a = 10;
let b = a > 5 ? "yes" : "no"; // "yes"

對(duì)兩個(gè)操作數(shù)求值并且返回最終操作數(shù)的值，通常用于for循環(huán)中，在每次循環(huán)時(shí)對(duì)多個(gè)變量進(jìn)行更新：

let a1 = [1,2,3,9,6,6];
for(let i = 0,j = 5; i<=j; i++, j--){
    console.log(`i:${i},j:${j},i值:${a1[i]},j值:${a1[j]}`)
}
// i:0,j:5,i值:1,j值:6
// i:1,j:4,i值:2,j值:6
// i:2,j:3,i值:3,j值:9

一元操作符僅對(duì)應(yīng)一個(gè)操作數(shù)。

刪除一個(gè)對(duì)象或一個(gè)對(duì)象的屬性或者一個(gè)數(shù)組中某一個(gè)鍵值，返回一個(gè)布爾值，刪除成功返回true，否則返回false:

let a = {name : "leo",age : "15"};
delete a.name;  // true
a;              // {age: "15"}

let b = [1,3,5];
delete b[0];    // true
b;              // [empty, 3, 5]
b[0];           // undefined

返回一個(gè)參數(shù)的類型的字符串值，參數(shù)可以輸字符串，變量，關(guān)鍵詞或者對(duì)象:

typeof new Function(); // "function"
typeof "leo" ;         // "string"
typeof 11 ;            // "number"
typeof undefined ;     // "undefined"

typeof true ;          // "boolean"
typeof null ;          // "object"

參數(shù)也可以是表達(dá)式，typeof會(huì)根據(jù)其返回結(jié)果返回所包含的類型：

typeof (1+1) ;         // "number"
typeof (1+1==2 ? "yes" : "no") ;   // "string"

表示一個(gè)運(yùn)算沒(méi)有返回值，常常用在創(chuàng)建一個(gè)超鏈接文本，但是點(diǎn)擊的時(shí)候沒(méi)有任何效果：

點(diǎn)擊
點(diǎn)擊

比較兩個(gè)操作數(shù)：

判斷指定屬性是否在指定對(duì)象中，若是則返回true：

// 對(duì)象
let a = {name:"leo",age:"15"};
"name" in a;  // true

// 數(shù)組
let b = ["leo", "pingan", "robin"];
0 in b;       // true
"length" in b;// true

判斷一個(gè)對(duì)象是否是指定類型，若是則返回true：

let d = new Date();
d instanceof Date;  // true

當(dāng)我們需要調(diào)整表達(dá)式計(jì)算順序，就需要用到運(yùn)算符的優(yōu)先級(jí)，通過(guò)括號(hào)來(lái)實(shí)現(xiàn)排序，常見(jiàn)優(yōu)先級(jí)從高到低：

1.MDN 表達(dá)式和運(yùn)算符

本部分內(nèi)容到這結(jié)束

歡迎關(guān)注微信公眾號(hào)【前端自習(xí)課】每天早晨，與您一起學(xué)習(xí)一篇優(yōu)秀的前端技術(shù)博文 .