# JS 學習筆記(4) - 值的比較與運算符

- [重新認識 JavaScript: Day 05 JavaScript 是「傳值」或「傳址」？](https://ithelp.ithome.com.tw/articles/10191057)
- [重新認識 JavaScript: Day 06 運算式與運算子](https://ithelp.ithome.com.tw/articles/10191180)
- [The JavaScript languageObjects - 值的比较](https://zh.javascript.info/comparison)
- [The JavaScript languageObjects - 基础运算符，数学](https://zh.javascript.info/operators#shu-yu-yi-yuan-yun-suan-fu-er-yuan-yun-suan-fu-yun-suan-yuan)

## 值的比較

我們知道，在數學中有很多用於比較大小的運算符。

在 JavaScript 中，它們的編寫方式如下：

* 大於 / 小於：a > b，a < b。
* 大於等於 / 小於等於：a >= b，a <= b。
* 檢查兩個值的相等：a == b，請注意雙等號 == 表示相等性檢查，而單等號 a = b 表示賦值。
* 檢查兩個值不相等。不相等在數學中的符號是 ≠，但在 JavaScript 中寫成 a != b。

比較的結果均返回**布林值**

alert( 2 > 1 );  // true
alert( 2 == 1 ); // false
alert( 2 != 1 ); // true

let result = 5 > 4; // 把比較的結果給 result
alert( result ); // true

### 字串比較

字串會按Unicode編碼順序進行判定，並且是按字符逐個比較

alert( 'Z' > 'A' ); // true
alert( 'Glow' > 'Glee' ); // true
alert( 'Bee' > 'Be' ); // true

**Unicode編碼**

可以看到，小寫 o 為 006F，小寫 e 為 0065，因 o > e，所以 `'Glow' > 'Glee'` 為 true。


### 不同型別比較

JS會先將值轉為**數字型別**(number)再進行比較

alert('2' > 1); // true
alert('01' == 1); // true

布林值`true = 1 , false = 0`

alert(true == 1); // true
alert(false < 1); // true

但這會造成一個問題就是，無法區分出 0 和 false

alert( 0 == false ); // true

也無法區分出空字串和false

alert( '' == false ); // true

#### 嚴格相等

如果想要解決上述的問題，可以使用三個等號 === 比較

alert( 0 === false ); // false

同樣的，不等於為 `!=` 嚴格不相等即為 `!==`

:::warning
當使用數學式或其他比較方法 `< > <= >=` 時：

`null/undefined` 會被轉化為數字：`null` 被轉化為 `0`，`undefined` 被轉化為 `NaN`。
:::

### 物件型別比較

兩個物件，屬性都有value 比較會相同嗎？

var obj1 = { value: 10 };
var obj2 = { value: 10 };
alert( obj1 == obj2 ); // false

如果使用傳值的方式再去比較，則會相同：

var obj1 = { value: 10 };
var obj2 = obj1;
alert( obj1 == obj2 ); // true

詳細的請參考 [重新認識 JavaScript: Day 05 JavaScript 是「傳值」或「傳址」？](https://ithelp.ithome.com.tw/articles/10191057)

## 基礎運算

### 運算子與運算元

假設一個運算式(Expression)為 `var a = 10 * 10;`，其中的 `10` 即為運算元(Operand)；`*` 為運算子(Operator)。

運算子可以分為以下幾類：

1. 算術運算子 (Arithmetic Operator)
1. 指派運算子 (Assignment Operator)
1. 位元運算子 (Bitwise Operator)
1. 比較運算子 (Comparison Operator)
1. 邏輯運算子 (Logical Operator)
1. 字串運算子 (String Operator)
1. 特殊運算子 (Special Operator)

### 算術運算子

最基本的 + - * / 加減乘除

* 加法 +
* 减法 -
* 乘法 *
* 除法 /
* 取餘數 %
* 求冪 **
* 遞增 ++
* 遞減 --

#### 取餘

a % b 為 a 除以 b 的餘數：

alert( 5 % 2 ); // 1，5 除以 2 的餘數
alert( 8 % 3 ); // 2，8 除以 3 的餘數

#### 求冪

a ** b 為 a 乘以自身 b 次：

alert( 2 ** 2 ); // 4  , 2*2
alert( 2 ** 3 ); // 8  , 2*2*2
alert( 2 ** 4 ); // 16 , 2*2*2*2

#### 遞增與遞減

++ 即為變數+1；--為變數-1

var a = 10;

a++;
console.log(a);       // 11 , a = a + 1;

a--;
console.log(a);       // 10 , a = a - 1;

++ 與 -- 擺放的位置不同也會有差異

var a = 10;
var b = 10;

console.log(a++);       // 10
console.log(++b);       // 11

console.log(a);         // 11
console.log(b);         // 11

:::success
a++ 代表 先輸出 a 再 +1；++b 代表 先將 b+1 再輸出 b。
:::

### 比較運算子

比較運算子用來比較兩邊數值，返回的值為 true 或 false

#### == 與 === (等於)

這部分前面值的比較提到過，就不再提

#### != 與 !== (不等於)

概念同上，就不再提

#### > 與 < (大於小於)

大於 `>` 小於 `<` 的比較，若是兩者為不同型別比較，會嘗試將其改為數值型別再進行比較

除此之外還有 `>=`(大於等於) 和 `<=`(小於等於)

var a = 10;
var b = 11;
var c = 10;

console.log( a > b );       // false
console.log( b > a );       // true

console.log( a > c );       // false
console.log( a >= c );      // true

:::warning
=> 不是運算子，是 ES6 的箭頭函式
:::

### 指派運算子
常見的指派運算子：

### 邏輯運算子

邏輯運算子 通常被用於布林(邏輯)值; 使用於 布林(邏輯)值時， 它們會回傳布林型態的值。 然而，&& 和 || 運算子實際上是回傳兩指定運算元之一，因此用於非布林型態值時，它可能會回傳一個非布林型態的值。


* 對 `||` 運算子來說，若第一個數值轉換為 true，則回傳第一個數值，否則回傳第二個數值。
* 對 `&&` 運算子來說，若第一個數值轉換為 true，則回傳第二個數值，否則回傳第一個數值。

---
詳細的運算子說明請參考：https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Expressions_and_Operators