前言

這裡會介紹三元運算子為主，今天會講到NULL運算子、三元運算子、三元運算子連續判斷取值。

基本的運算子(快速帶過)

• 賦值運算子：等號是最基本的，還有例如 +=、-=

• 比較運算子：比較兩者的，例如等於、大於等於、不等於…

• 算術運算子：加減乘除，例如 ++、 - -、%

• 位元運算子：把比較的運算元都當作0跟1的集合來看，運算子如 | (OR)、& (AND) …

• 邏輯運算子：判斷一個以上運算式回傳的布林值，運算子如 &&(AND)、||(OR)、!(NOT)

• 字串運算子：運算子+號用於連接字串時。

• 條件（三元）運算子：JS中唯一需要三個運算元的運算子。可以在任何用了標準運算子的地方，改用三元運算子，下面文章會提到的！

• 逗點運算子：通常用於迴圈內部。

• 一元運算子：只需要一個運算元的運算。

  • delete 運算子，他會刪除物件、Object[key]、Object[indx]；刪除陣列元素，例如 array[index]
  • typeof 運算子，會回傳代表運算元類型的 字串。 運算元能是字串，變數，或是會回傳型態的物件。(the 複製)
  • void 運算子，會解析運算式但不回傳任何，通常被用在「什麼都不做的超連結」。<a href="javascript:void(0)">範例連結</a>

• 關係運算子：比較後回傳布林值

  • in 運算子：看某個性值是否存在陣列中。
  • instanceof 運算子：看物件具有指定物件型態時，回傳true

?? - NULL運算子

狀況

希望得到的東西，如果沒有設定值，那至少要有個預設值。

常看到的寫法

let 變數 = 判斷式 ?? 如果判斷式為null，變數就會等於這裡

for(let i = 0; i < num; i++){
	let fruitPicArray[i] = fruitPicArray[i] ?? '/img/basicPic'
}

?: - 三元運算子

狀況

當變數需要依照判斷式是true是false，有所應變時。

常看到的寫法

let 變數 = 判斷式 ?? 如果判斷式為true，就會等於這邊的值 : 如果判斷式為false，就會等於這邊的值

判斷式等於true或false，變數都會被賦值。

let a
let b  = 1+1
let c =  1+5
const threeYuan = (condition ) => {
    a = condition ===2 ? '判斷式是對的' : '判斷式是錯的'
}
threeYuan(b)
console.log(a)
threeYuan(c)
console.log(a)

>> 判斷式是對的
>> 判斷式是錯的

三元運算子連續判斷取值

狀況

例如寫換頁時的頁數；頁數到0時要顯示1，頁數被加到超過最大頁數時要等於最大頁數。

範例說明

以上方狀況直接來當一個範例來解答：

1. 如果page==0，是的話page=1，不是的話再接著判斷 (傳入頁數=0時，頁數就=1)

2. 如果page!==0

   1. page>totalPage且totalPage!=0的話，page=totalPage (傳入頁數>最大頁數時，頁數就=最大頁數)

   2. 以上的狀況都不是的話，page=page (傳入頁數在最大頁數範圍內時，不做更動)

// 範例
let page = 4
let totalPage = 4
page = page == 0 ? 1:
            page > totalPage ? totalPage:            
            page
console.log(page)

寫成if else

// 寫成if else 的話
let page = 4
let totalPage = 4
if(page == 0){
	page = 1
}else{
	if(page > totalPage){
		page = totalPage 
	}else{
		page = page 
	}
}
console.log(page)

優化

第一次看到有點看不懂，改成這樣能更簡潔易讀

// 優化(取min值的方法)
let page = 0
let totalPage = 4
page = page == 0 ? 1: Math.min(totalPage , page)
console.log(page)

// 再優化一次
let page = 5
let totalPage = 4
page = Math.max(1, Math.min(totalPage , page))
console.log(page)

結語

今天說明了三種運算子，在實作上經常碰到。本篇文章也有 三元運算子連續判斷取值 的優化方法！我認為這些都是很實用的技巧唷。

參考

基本的運算子有哪些
https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Expressions_and_operators