運算子

指定運算子

指定運算子通常用來指定一個值給變數 ( 賦值 )，最基本的就是我們常用到的運算符 =，會將符號右邊的值賦予到左邊的變數中。

範例

let a = 5;
console.log(a); // 答案為 5
a += 5;
console.log(a); // 答案為 10
a -= 2;
console.log(a); // 答案為 8
a/=4;
console.log(a); // 答案為 2

比較運算子

比較運算子可以用來比較符號兩邊運算元的關係，比較後如果關係成立會回傳 true，不成立則回傳 false。運算元可以是數值、字串、表達式或物件等。而對於不同型態的值，JavaScript 會嘗試將他們轉型到同樣型態後，再做比較，通常是先轉到數值型態。

比較運算 - 等於延伸

• == 和 != 不嚴格規範型態，若型態不同會自動轉型

  console.log(1 == "1"); // true
  console.log("5" != 5); // false
  

• undefined 和 null 相等

  console.log(undefined == null); // true
  

• NaN 和任何值都不相等，包含 NaN 本身

  console.log(NaN == null); // false
  console.log(NaN == NaN); // false
  

• === 和 !== 會判斷類型是否相同

  console.log("123" === 123); // false 類型不同，直接為 false (不相等)
  console.log("123" !== 123); // true 類型不同，直接為 true
  

比較運算 - 大於和小於延伸

• 比較運算子通常用來做數字型態的比較，規則與數學中的比大小相同

  console.log(5 > 4); // true
  console.log(4 >= 4); // true
  console.log(4 < 3); // false
  

• 當比較運算子左右兩邊都是字串型態時，不會將其轉為數字型態，而是從第一個字元開始比較

  console.log("a" < "bb"); // true (會從第一個字元開始比較，而 a < b)
  console.log("abc" > "bdf"); // false
  

• 當兩字串型態的數字比較時會遵循字串比較的規則，所以會造成問題

  console.log("11234455" > "5"); // false (會從第一個字元開始比較，而 5 > 1，所以 "5" 比較大)
  console.log("55" < "545"); // false (若第一個字元相同則往下比第二個字元)
  

邏輯運算子

邏輯運算子是用來做布林值的邏輯判斷，會根據內容回傳 true 或 false，主要有 && 、||、! 三種運算符號，分別代表 且、或、非。

&& 範例：必須滿足所有條件才成立 (為 true)

• 語意為 且，每個條件都為 true 時才返回 true

  console.log(true && true); //true
  console.log(false && true); // false (任一條件為 false 時即不成立)
  console.log(false && false); // false
  

• 多個 && 連接

  console.log(true && true && true); // true 
  console.log(true && false && true); // false 
  console.log(false && true && true); // false  
  console.log(false && false && true); // false 
  

• 結合比較運算子和變數

  console.log(2==2 && 3-1==2); // true
  let a = 10;
  let b = 5;
  console.log(a > 1 && b < 6); // true
  console.log(a > 10 && b < 6); // false (前者為 false)
  console.log(a > 10 && b < 3); // false (兩者皆 false)
  

|| 範例：滿足任一條件就成立 (為 true)

• 語意為 或，只要有一個條件是 true 就返回 true

  console.log(true || true); // true 
  console.log(true || false); // true (滿足一個條件)
  console.log(false || true); // true (滿足一個條件)
  console.log(false || false); // false (無滿足條件，兩者皆 false)
  

• 多個 || 連接

  console.log(true || true || true); // true 
  console.log(true || false || true); // true 
  console.log(false || true || true); // true
  console.log(false || false || false); // false
  

• 結合比較運算子和變數

  console.log(2==2 || 2-1==1); // true 
  console.log(2==3 || 2-1==1); // true (後者為 true)
  console.log(2==3 || 2-1==2); // false (兩者皆 false)
  

! 範例：表示否定

• 語意為 非，會回傳相反值

  console.log(!true); // false
  console.log(!false); // true
  

• 與其他邏輯運算子和比較運算子共同使用

  console.log(!false && 2==2); // true
  console.log(!true || 2==3 ); // false
  console.log(!false ); // true
  

上一篇：[快速入門前端 40] JavaScript：運算式和運算子 (1) 算數運算子和一元運算子
下一篇：[快速入門前端 42] JavaScript：運算式和運算子 (3) 三元運算子與運算子的優先性
系列文章列表：[快速入門前端] 系列文章索引列表