JavaScript 操作符全解析

2024-04-27 15:14:28

字體：大中小

來源：轉載

供稿：網友

——跟我一起學 javaScript (6)

ECMAScript 操作符能夠適應多種類型的值。應用于對象時，相應的操作符會調用對象的 valueOf() 或 toString() 方法，以取得可以操作的值。

1 一元操作符

只能操作一個值

1.1 遞增與遞減操作符

分為前置和后置兩種情況前置遞增或遞減時，變量的值都是在語句被求值以前改變的，稱為副效應：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>前置遞增與遞減的副效應</title></head><body><script type="text/Javascript"> var age = 19; var anotherAge = --age + 2; console.log(age);//18 console.log(anotherAge);//20</script></body></html>由于前置遞增和遞減操作與執行語句的優先級相等，因此整個語句會從左到右被求值：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>前置遞增與遞減與執行語句的優先級相等</title></head><body><script type="text/javascript"> var num1 = 2; var num2 = 20; console.log(--num1 + num2);//21 console.log(num1 + num2);//21</script></body></html>后置型的遞增和遞減操作會在包含的語句被求值后才執行：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>后置遞增與遞減在包含它們的語句求值后才執行</title></head><body><script type="text/javascript"> var num1 = 2; var num2 = 20; console.log(num1-- + num2);//22 console.log(num1 + num2);//21</script></body></html>規則如下：

應用的對象	操作
包含有效數字字符	轉換為數字值，再執行
不包含有效數字字符	NaN
false	轉換為0，再執行
true	轉換為1，再執行
浮點數值	執行
對象	先調用對象的 valueOf() 方法取得值，然后應用上述規則；如果結果是 NaN，再調用 toString() 方法取得值，然后應用上述規則

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>后置遞增與遞減操作符規則</title></head><body><script type="text/javascript"> var s1 = "2"; var s2 = "z"; var b = false; var f = 1.1; var o = { valueOf: function () { return -1; } }; s1++; //3 s2++;//NaN b++;//1 f--;//0.10000000000000009（浮點舍入錯誤） o--;//-2</script></body></html>

1.2 一元加和減操作符

一元加操作符放在數值前面，對數值不會產生影響。對非數值應用一元加操作符，會像調用 Number() 轉型函數一樣對這個值執行轉換：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>不同數據類型應用一元操作符類型</title></head><body><script type="text/javascript"> var s1 = "01"; var s2 = "1.1"; var s3 = "z"; var b = false; var f = 1.1; var o = { valueOf: function () { return -1; } }; s1 = +s1;//1 s2 = +s2;//1.1 s3 = +s3;//NaN b = +b;//0 f = +f;//1.1 o = +o;//-1</script></body></html>一元減操作符用于表示負數。對非數值應用一元減操作符時，也會遵循與一元加操作符相同的規則，最后再把數值轉換為負數：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>一元減操作符應用于數值時，該值會變為負數</title></head><body><script type="text/javascript"> var s1 = "01"; var s2 = "1.1"; var s3 = "z"; var b = false; var f = 1.1; var o = { valueOf: function () { return -1; } }; s1 = -s1;//-1 s2 = -s2;//-1.1 s3 = -s3;//NaN b = -b;//0（Chrome 中會變為 -0） f = -f;//-1.1 o = -o;//1</script></body></html>一元加和減操作符主要用于算術運算，也可用于數據類型的轉換。

2 位操作符

位操作符會按內存中表示數值的位來操作數值。ECMAScript 中所有的數值都是以 IEEE-754 64 位格式存儲，但位操作符會先將 64 位的值轉換為 32 位的整數，然后執行操作，最后再將結果轉換為 64 位。這會導致嚴重的副效應，即對 NaN 和 Infinity 值應用位操作時，會被當做 0 來處理。對于有符號整數，第 32 位表示數值的符號；0 表示正數，1 表示負數。負數使用的格式是二進制補碼。

計算二進制補碼的步驟： 1. 求數值絕對值的二進制碼 2. 求二進制反碼 3. 將二進制反碼加 1

ECMAScript 會隱藏上面的信息，以二進制字符串形式輸出負數時，只會在這個負數絕對值的二進制碼前加一個負號：var num = -18;alert(num.toString(2)); //"-10010"默認情況下，ECMAScript 中所有整數都是有符號整數。如果對非數值應用位操作符，會先自動使用 Number() 函數將該值轉換為數值，再進行下一步操作。

2.1 按位非

由波浪線（~）表示，返回數值的反碼：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>按位非</title></head><body><script type="text/javascript"> var num1 = 25; var num2 = ~num1; console.log(num2);//-26</script></body></html>

2.2 按位與

由 & 表示，對相同位置上的兩個數執行 AND 操作，規則如下：

第一個數的位	第二個數的位	結果
1	1	1
1	0	0
0	1	0
0	0	0

即按位與操作中，只有兩個數值對應的位都是 1 時，才返回 1。<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>按位與</title></head><body><script type="text/javascript"> var result = 25 & 3; console.log(result);//1</script></body></html>

2.3 按位或

由 | 表示，規則如下：

第一個數的位	第二個數的位	結果
1	1	1
1	0	1
0	1	1
0	0	0

即按位或操作中，只有兩個數值對應的位都是 0 時，才返回 0。<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>按位或</title></head><body><script type="text/javascript"> var result = 25 | 3; console.log(result);//27</script></body></html>

2.4 按位異或

由插入符號 ^ 表示，規則如下：

第一個數的位	第二個數的位	結果
1	1	0
1	0	1
0	1	1
0	0	0

只有兩個數值對應的位只有一個 1 時，才返回 1。

2.5 左移

由兩個小于號（<<）表示，會將數值中的所有位向左移動指定的位數。左移后多出的空位會以 0 來填充。左移不會影響操作數的符號位。<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>左移</title></head><body><script type="text/javascript"> var oldValue = 2; console.log(oldValue << 5);//64</script></body></html>

2.6 有符號的右移

由兩個大于號（>>）表示，會將數值中的除了符號位之外的所有位向右移動指定的位數：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>有符號右移</title></head><body><script type="text/javascript"> var oldValue = 64; console.log(oldValue >> 5);//2</script></body></html>

2.7 無符號右移

由三個大于號（>>>）表示，會將數值中的所有位向右移動指定的位數：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>無符號右移</title></head><body><script type="text/javascript"> var oldValue = 64; console.log(oldValue >>> 5);//2</script></body></html>負數是以其絕對值額二進制補碼形式表示，所以對負數執行無符號右移后，結果會變得非常大。

3 布爾操作符

3.1 邏輯非

由！表示，可以應用于任何 ECMAScript 類型。規則如下：

操作數	結果
對象	false
空字符串	true
非空字符串	false
0	true
非 0 數值（包括 Infinity）	false
null	true
NaN	true
undefined	true

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>邏輯非</title></head><body><script type="text/javascript"> console.log(!false);//true console.log(!"blue");//false console.log(!0);//true console.log(!NaN);//true console.log(!"");//true console.log(!12345);//false</script></body></html>同時使用兩個邏輯非操作符，實際上就會模擬出 Boolean() 函數的行為：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>兩個邏輯非可以模擬出一個 Boolean 函數</title></head><body><script type="text/javascript"> console.log(!!"blue");//true console.log(!!0);//false console.log(!!NaN);//false console.log(!!"");//false console.log(!!12345);//true</script></body></html>

3.2 邏輯與

由 && 表示，規則如下：

第一個操作數	第二個操作數	結果
true	true	true
true	false	false
false	true	false
false	false	false

可以應用于任何類型的操作數。如果有一個操作數不是布爾值，就不一定返回布爾值，具體規則：

操作數類型	結果
第一個操作數是對象	返回第二個操作數
第二個操作數是對象	只有第一個操作數求值結果為 true，才會返回該對象
兩個操作數都是對象	返回第二個操作數
有一個操作數是 null	null
有一個操作數是 NaN	NaN
有一個操作數是 undefined	undefined

邏輯與操作屬于短路操作，即如果第一個操作數能夠決定結果，就不會再對第二個操作數執行求值。<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>邏輯與操作</title></head><body><script type="text/javascript"> var found = true; var result = (found && someUnderfinedVariable); //報錯 console.log(result);//不會執行</script></body></html><!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>邏輯與操作（短路操作）</title></head><body><script type="text/javascript">var found = false;var result = (found && someUnderfinedVariable); //不會報錯console.log(result);//會執行</script></body></html>

3.3 邏輯或

由 || 表示，規則如下：

第一個操作數	第二個操作數	結果
true	true	true
true	false	true
false	true	true
false	false	false

與邏輯與相似，如果有一個操作數不是布爾值，邏輯或就不一定返回布爾值，具體規則：

操作數類型	結果
第一個操作數是對象	返回第一個操作數
第一個操作數是求值結果為 false	返回第二個操作數
兩個操作數都是對象	返回第一個操作數
有一個操作數是 null	null
有一個操作數是 NaN	NaN
有一個操作數是 undefined	undefined

邏輯或操作也屬于短路操作，即如果第一個操作數的求值結果為 true，就不會再對第二個操作數執行求值。<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>邏輯或（短路操作）</title></head><body><script type="text/javascript"> var found = true; var result = (found || someUnderfinedVariable); //不會報錯 console.log(result);//不執行</script></body></html><!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>邏輯與操作（短路操作）</title></head><body><script type="text/javascript">var found = false;var result = (found && someUnderfinedVariable); //不會報錯console.log(result);//會執行</script></body></html>可以利用邏輯或的這一行為來避免為變量賦值 null 或 undefined 值：var myObject = PReferredObejct || backupObject;backupObject 可以在 preferredObejct 不包含有效值的情況下提供備用值。程序的賦值語句經常會采用這樣的模式。

4 乘性操作符

操作數如果是非數值，會自動執行類型轉換。

4.1 乘法

由星號（*）表示，具體規則：

操作數類型	結果
都是數值	常規乘法運算，如果乘積超過表示范圍，則返回 Infinity
有一個操作數是 NaN	NaN
Infinity 與 0 相乘	NaN
Infinity 與非 0 數值相乘	Infinity
Infinity 與 Infinity 相乘	Infinity
有一個操作數不是數值	后臺調用 Number() 轉換為數值，在應用上面的規則

4.2 除法

由斜線（/）表示，具體規則：

操作數類型	結果
都是數值	常規除法運算，如果商超過表示范圍，則返回 Infinity
有一個操作數是 NaN	NaN
Infinity 被 Infinity 除	NaN
0 被 0 除	NaN
非零的有限數被 0 除	Infinity
Infinity 與非 0 數值除	Infinity
有一個操作數不是數值	后臺調用 Number() 轉換為數值，再應用上面的規則

5 加性操作符

5.1 加法

操作數類型	結果
有一個操作數是 NaN	NaN
Infinity 加 Infinity	Infinity
-Infinity 加 -Infinity	-Infinity
+0 加 +0	+0
-0 加 -0	-0
+0 加 -0	+0
兩個操作數都是字符串	第二個與第一個拼接
只有一個操作數是字符串	另一個字符串轉換為字符串，再拼接
有一個操作數是對象、數值或布爾值	調用它的 toString() 方法取得字符串值，再按照字符串規則處理；對于nudefined 和 null，則調用 String() 取得 “undefined” 和 “null”

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>加法</title></head><body><script type="text/javascript"> console.log(5+5);//10 console.log(5+"5");//55</script></body></html>忽視加法操作中的數據類型，是編程的常見錯誤（使用圓括號可以避免）：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>加法使用的常見錯誤</title></head><body><script type="text/javascript"> var num1 = 5; var num2 = 10; console.log("The sum of 5 and 10 is " + num1 + num2);//510 console.log("The sum of 5 and 10 is " + (num1 + num2));//15</script></body></html>

5.2 減法

操作數類型	結果
兩個操作數都是數值	常規減法
有一個操作數是 NaN	NaN
Infinity 減 Infinity	NaN
-Infinity 減 -Infinity	-Infinity
Infinity 減 -Infinity	Infinity
-Infinity 減 Infinity	-Infinity
+0 減 +0	+0
+0 減 -0	-0
-0 減 -0	+0
有一個操作數是字符串、布爾值、null 或 undefined	調用 Number() 函數轉換為數值，再執行減法；如果轉換結果是 NaN，結果就是 NaN
有一個操作數是對象	調用對象的 valueOf() 取得數值；如果值是 NaN，結果就是 NaN；如果沒有 valueOf()，則調用 toString() 并將得到的字符串轉換為數值

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>減法操作</title></head><body><script type="text/javascript"> console.log(5 - true);//4；true 被轉換為 1 console.log(NaN -1);//NaN console.log(5 - 3);//2 console.log(5 - "");//5;"" 被轉換為 0 console.log(5 - "2");//3 console.log(5 - null);//5;null 被轉換為 0</script></body></html>

6 關系操作符

當關系操作符使用了非數值時，就會進行數值轉換，規則：

操作數類型	結果
兩個操作數都是數值	數值比較
兩個操作數都是字符串	比較兩個字符串中對應的字符編碼值
有一個操作數是數值	另一個操作數轉換為數值，再比較
有一個操作數是對象	調用對象的 valueOf() ，再按照前面的規則執行比較；如果對象沒有 valueOf() 方法，則調用 toString() 并將得到的結果進行比較
有一個操作數是布爾值	先轉換為數值，再比較

注意：

用關系操作符比較兩個字符串時，比較的是兩個字符串中對應位置的每個字符的字符編碼值。因此，如果要真正按字母表順序比較字符串，就必須把兩個操作數都轉換為相同的大小寫形式后，再進行比較。比較數值的字符串形式時，比較的也是字符串編碼。任何操作數與NaN 比較，結果都是 false。<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>關系操作符</title></head><body><script type="text/javascript"> console.log(5 > 3);//true console.log(5 < 3);//false //字符串比較的是字符串中對應位置的字符編碼值，而大寫字母的編碼值都小于小寫字母的字符編碼 console.log("Brick" < "alphabet");//true console.log("Brick".toLowerCase() < "alphabet".toLowerCase());//false；全部轉為小寫或者大寫，這樣就能按照字母表順序比較 console.log("23" < "3");//true；數字字符串比較的還是字符編碼 console.log("23" < 3);//false；其中一個操作數如果是數字，就會把另一個操作數也轉為數字后，再進行比較 console.log("a" < 3);//false；非法數字的字符串會被轉換為 NaN，任何操作數與 NaN 比較都是 false。 console.log(NaN < 3);//false console.log(NaN >= 3);//false</script></body></html>

7 相等操作符

7.1 相等（==）與不相等(!=)

會先轉換（強制轉換），再比較；轉換規則：

操作數類型	結果
有一個操作數是布爾值	先轉換為數值；false 轉為 0，true 轉為 1
一個操作數是字符串，另一個是數值	先將字符串轉換為數值，再比較
一個操作數是對象，另一個不是	調用對象的 valueOf() 方法，再比較

比較規則：

null 和 undefined 是相等的。比較相等性之前，不能將 null 和 undefined 轉換成其他任何值。有一個操作數是 NaN，則相等操作符返回 false；即使兩個操作數都是 NaN，相等操作符也是返回 false（因為 NaN 不等于 NaN）。如果兩個操作數都是對象，則比較它們是不是同一個對象（即指向同一個對象）。

7.2 全等(===)與不全等

比較前不會自動轉換：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>相等操作符</title></head><body><script type="text/javascript"> //全等和不全等與相等和不相等的唯一區別就是，在比較前不轉換操作符 console.log("55" == 55);//true console.log("55" === 55);//false console.log("55" != 55);//false console.log("55" !== 55);//true</script></body></html>

注意:

null == undefined ，返回 true。null === undefined，返回 false。為了保證代碼中數據類型的完整性，推薦使用全等和不全等操作符。