JavaScript教學 - 運算子(Operators) - 上
介紹JavaScript中的運算子(Operators)的用法，包含種類、優先順序、算術運算子(Arithmetic Operator)、指派運算子(Assignment Operator)、位元運算子(Bitwise Operator)和比較運算子(Comparison Operator)。
1. 簡介
1.1 運算式
運算式(Expression)或稱表達式，能夠讓直譯器理解並執行的程式片段都可以稱作運算式， 例如任何的實字或變數名稱，以下為一些運算式：
123 i 123 + i x = 123 + i
以下不是運算式：
123 + x = 123 +
1.2 種類
運算式中可透過提供一些數值給運算子(Operator，或運算符)進行運算，進而得到一個運算結果，可以想成類似函式的回傳。另外被運算的數值稱為運算元(Operand)。
依據運算元的個數，運算子可以分為三種：
- 一元運算子，只有一個運算元，例如：!, ++等。
- 二元運算子，包含兩個運算元，大部分都屬於這類。
- 三元運算子，包含三個運算元，只有? :運算子屬於此類。
而依據性質，可以分為：
- 算術運算子(Arithmetic Operator)
- 指派運算子(Assignment Operator)
- 位元運算子(Bitwise Operator)
- 比較運算子(Comparison Operator)
- 邏輯運算子(Logical Operator)
- 字串運算子(String Operator)
- 特殊運算子(Special Operator)
1.3 優先順序
| 結合律 | 運算子 |
|---|---|
| 右 | new |
| 左 | [] () . |
| 右 | ++ -- ~ - +(正負號) ! delete typeof void |
| 左 | * / % |
| 左 | + - (加減, 字串連接) |
| 左 | << >> >>> |
| 左 | < <= > >= <> |
| 左 | == != === !== |
| 左 | & |
| 左 | ^ |
| 左 | | |
| 左 | && |
| 左 | || |
| 右 | ? : |
| 右 | = += -= *= /= %= &= |= ^= <<= >>= >>>= |
| 左 | , |
結合律左右的解釋範例如下：
console.log(1 + 2 + '3'); // 33 console.log(1 + '2' + 3); // 123 // 結合律: 右 var a = 1; var b = 2; a = b += 3; // b = 5, a = 5
2. 算術運算子
算術運算子(Arithmetic Operator)就如同數學的四則運算一般，包含以下運算子：
| 範例 | 名稱 | 說明 |
|---|---|---|
| +a | 正號 | 實際上無作用 |
| -a | 負號 | 將a正負變號 |
| a + b | 加法 | a和b的總和 |
| a - b | 減法 | a減去b |
| a * b | 乘法 | a乘上b |
| a / b | 除法 | a除以b |
| a % b | 取餘數 | a除以b的餘數(餘數的正負號與a相同) |
| ++a | 前置增值 | a先+1，再回傳 |
| a++ | 後置增值 | a先回傳，再+1 |
| --a | 前置減值 | a先-1，再回傳 |
| a-- | 後置減值 | a先回傳，再-1 |
3. 指派運算子
指派運算子(Assignment Operator)符號是(=)，你可能會把它想成數學的等於，但實際上不能這樣想，正確的意思是：將右邊的結果放入左邊。
指派運算子會將指派結果回傳，也就是指派的內容本身，又因為結合律為右，所以可以將指派的回傳結果指派給下個變數，例如
var x, y, z; console.log(y = 1); // 1 x = y = z = 2; console.log(x, y, z); // 2, 2, 2
另外也有具有運算的指派，包含以下運算子：
| 範例 | 說明 |
|---|---|
| a += b | a = a + b |
| a -= b | a = a - b |
| a *= b | a = a * b |
| a /= b | a = a / b |
| a %= b | a = a % b |
| a <<= b | a = a << b |
| a >>= b | a = a >> b |
| a &= b | a = a & b |
| a |= b | a = a | b |
| a ^= b | a = a ^ b |
4. 位元運算子
位元運算子(Bitwise Operator)能夠對整數的位元進行運算，包含以下運算子：
| 範例 | 名稱 | 說明 |
|---|---|---|
| a & b | 交集(And) | a和b的位元皆為1的部份為1 |
| a | b | 聯集(Or) | a或b的位元其中一方為1的部份為1 |
| a ^ b | 互斥(Xor) | a和b的位元只有其中一方為1的部份為1 |
| ~ a | 補數(Not) | a為1的部份為0，為0的部份為1 |
| a << b | 左移 | a往左移動b個位元(意同a乘以2的b次方) |
| a >> b | 帶正負號右移 | a往右移動b個位元，並保留原始正負號(意同a除以2的b次方之整數) |
| a >>> b | 補0右移 | a往右移動b個位元，無視正負號，左邊的位元一律補0 |
JavaScript中處理位元運算時，變數一律視為32位元的數值來處理，當位移數超過32位元時，會取32的餘數來進行運算，以下是一些範例：
function toBitsString(num) {
var str = '';
while(num)
{
str = (num & 1) + str;
num = num >>> 1
}
return str;
}
function toBits(num) {
var str = toBitsString(num)
for(var i = str.length;i < 8;++i)
str = '0' + str;
return str.slice(-8);
}
var a = 55;
var b = 66;
console.log(toBits(a)); // 00110111
console.log(toBits(b)); // & 01000010
//-----------
console.log(toBits(a & b)); // 00000010 : 2
// 00110111
// | 01000010
//-----------
console.log(toBits(a | b)); // 01110111 : 119
// 00110111
// ^ 01000010
//-----------
console.log(toBits(a ^ b)); // 01110101 : 117
// ~ 00110111
//------------
console.log(toBits(~a)); // 11001000 : -56
// 00110111 << 2
//------------
console.log(toBits(a << 2)); // 11011100 : 220
// 00110111 >> 33
//------------
console.log(toBits(a >> 33)); // 00011011 : 27
console.log(-4 >> 1); // -2
console.log(-4 >>> 1); // 2147483646
JavaScript的數字類別的toString函式能夠將數字依據指定的進位制輸出字串，但是它是把他視為具有正負號的數字處理，而不是作為位元組處理，所以必須自行實作轉換：
var a = -56; console.log(a.toString(2)); // -111000 console.log(a.toString(16)); // -38 console.log(toBitsString(a)); // 11111111111111111111111111001000
5. 比較運算子(Comparison Operator)
比較運算子(Comparison Operator)可以比較兩個值，並將結果以布林回傳，包含以下運算子：
| 範例 | 名稱 | 說明 |
|---|---|---|
| a == b | 相等 | 如果a和b的值相等則為true |
| a === b | 完全相等 | 如果a和b的值與型別都相等則為true，物件、陣列和函式必須是同一個物件才為true |
| a != b | 不相等 | 如果a和b的值不相等則為true |
| a !== b | 不完全相等 | 如果a和b的值或型別不相等則為true |
| a < b | 小於 | 如果a小於b則為true |
| a > b | 大於 | 如果a大於b則為true |
| a <= b | 小於等於 | 如果a小於等於b則為true |
| a >= b | 大於等於 | 如果a大於等於b則為true |
只有以下情形完全相等才為true：
- 兩者皆是非NaN數字型別且數值相等。
- 兩者皆是字串型別且內容相等。
- 兩者皆是布林型別且數值相等。
- 兩者都指向同一物件、陣列或函式。
- 兩者皆是null。
- 兩者皆是undefined。
進行相等運算比較時，會根據以下的規則來做處理：
- undefined或null只和undefined或null相等。
- 其他情況依據非相等運算規則處理。
進行非相等運算比較時，會根據以下的規則來做處理：
- 運算元包含undefined和NaN則為false。
- 兩者皆為字串，則以字串比較。(Unnicode編碼比較)
- 空陣列和字串比較，空陣列優先轉為字串比較。
- 一方為數字或能轉換為數字，則以數字比較。(另一方無法轉換則為false)
- 其他情況轉換為字串，以字串比較。
- 若不能轉換成數字或字串，則為false。
一些範例如下：
console.log(10 == '1e1'); // true, 數字比較
console.log('b' > 'a'); // true
console.log('' == 0); // true, 數字比較
console.log(false == null); // false, undefined或null只和undefined或null相等
console.log(undefined == null); // true
console.log(2 > true && true > 0); // true, 數字比較, true -> 1
console.log(1 > null && null > -1); // true, 數字比較, null -> 0
console.log(false > -1); // true, 數字比較
console.log([] > -1); // true, 數字比較, 空陣列轉為0
console.log(false > '-1'); // true, 數字比較
console.log([] > '-1'); // false, 字串比較!!
function A() {
}
A.prototype.toString = function () {
return 'A';
};
var a = new A();
var s = {}; // [object Object]
console.log(a < s); // true, 字串比較 'A' < '[object Object]'
console.log(a == 'A'); // true
console.log(s > '\xff'); // false
var b = [55];
var c = [66];
var d = [55,66];
console.log(b < c); // true, 字串比較 '55' < '66'
console.log(b == '55'); // true
console.log(d == '55,66'); // true
延伸閱讀
