JavaScript常用的判斷方法

發表於 | 分類於 ， |

前言

判斷是邏輯的起源，
寫得好、寫得巧、寫得呱呱叫，
這裡會把一些我覺得跟『判斷』有關且常用的東西放進來。

condition

(圖片來源: 網路)

判斷

故名意思，判斷就是要得到一個『是』或『不是』結果，而在JavaScript裡，我們期待得到的是『ture』或『false』或其他經由邏輯得到的結果。

1
2
3
4
5
var a = 1;
var b = 2;

//a等於b？
console.log(a == b); //false

這就是一個簡單的判斷

比較運算子 Comparison operators

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var a = 1;
var b = 2;

//a等於b？
console.log(a == b); //false

//a不等於b?
console.log(a != b); //true

//a等於b？(嚴謹模式)
console.log(a === b); //false

//a不等於b?(嚴謹模式)
console.log(a !== b); //true

//a大於b
console.log(a > b); //false

//a大於等於b
console.log(a >= b); //false

//a小於b
console.log(a < b); //ture

//a小於等於b
console.log(a <= b); //false

Tip: “!” 驚嘆在運算子中為相反的意思。 ex: !false === true

這就是全部的比較運算子，基本上都是國小，使用上應該都很直覺。

比較值得留意的是嚴謹模式下的“===”與“!==”

嚴謹模式

在嚴謹模式開發現，可避免一些不必要的錯誤，在這裡我們只說明比較運算子的存在的兩個嚴謹模式，“===”與“!==”。

Tip: 比較運算子沒有這種東西 “>>” “<<”

1
2
3
4
5
6
7
8

console.log(3 == '3'); //true
console.log(0 == ''); //true

//嚴謹模式
// number 不等於 string
console.log(3 == '3'); //false
console.log(0 == ''); //false

在嚴謹模式下的比較運算子，會連『型別』也進行比較。

邏輯運算子 Logical operators

&&

1
2
3
4
5
6
7
var a1 =  true && true;     // t && t returns true
var a2 =  true && false;    // t && f returns false
var a3 = false && true;     // f && t returns false
var a4 = false && (3 == 4); // f && f returns false
var a5 = "Cat" && "Dog";    // t && t returns 'Dog'
var a6 = false && "Cat";    // f && t returns false
var a7 = "Cat" && false;    // t && f returns false

||

1
2
3
4
5
6
7
var o1 =  true || true;     // returns true
var o2 = false || true;     // returns true
var o3 =  true || false;    // returns true
var o4 = false || (3 == 4); // returns false
var o5 = 'Cat' || 'Dog';    // returns 'Cat'
var o6 = false || 'Cat';    // returns 'Cat'
var o7 = 'Cat' || false;    // returns 'Cat'

“||” 可以看成『或著』的意思，由前面開始，只要是 null、 0、 NaN、 空字串 (“”)、undefined可以轉換為false的運算式，就會下面一位，直到符合或是最後一個。

1
2
3
4
5
var o8 =  null || undefind || false || 'Hi';  // returns 'Hi'
var o9 =  null || 'Hi' || false;              // returns 'Hi'
var o10 =  '' || 'Hi';                        // returns 'Hi'
var o11 =  0 || 'Hi';                         // returns 'Hi'
var o12 =  [] || 'Hi';                        // returns []

??

1
2
3
4
5
6
var b1 =  1 ?? true;     // returns 1
var b2 = 	false ?? true;    // returns true
var b3 =  null ?? 1;    		// returns 1
var b4 =  undefined ?? 1;   // returns 1
var b5 =  0 ?? 1;    				// returns 0
var b6 =  '' ?? 'Hi';    		// returns ''

Nullish coalescing operator (??)是我比較後來才知道的，有時候使用”??”會比”||”好，因為他的０或空字串””不會被判定略過，某些狀況下還是比較適合的。

switch

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function getMeal(time) {
  switch (time) {
    case 7:
      return '早餐';
    case 12:
      return '午餐';
    case 16:					//16跟17 共用結果
    case 17:
      return '晚餐';
    case 20:
      break;					//加上break會強迫終止判斷
      return '宵夜';
    default:
      return '沒了';
}

console.log(getMeal(12)); //'午餐'
console.log(getMeal(16)); //'晚餐'
console.log(getMeal(20)); //undefined

未達條件會繼續往下走，直到default。

if…else

1
2
3
4
5
6
7
8
9
10
11
12
13
function getMeal(time) {
  if (time == 7){
    return '早餐';
  } else if (time == 12){ // 符合條件，結束判斷，以下不執行
    return '午餐';
  } else if (time == 17){
    return '晚餐';
  } else {
    return '沒了';
  }
}

console.log(getMeal(12)); //'午餐'

未達條件會繼續往下走，符合條件其中之一作件，會停止整個if…else判斷。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
if (time == 7) {              //if作為整個 if...else的開頭 
  return '早餐';
} else if (time == 12) {    //else if 可作為下一個條件
  return '午餐';
} else if (time == 17) {    //未達條件再往下走
  return '晚餐';
} else {									 //直到碰到 else 就必定結束
  return '沒了';
}

if (time == 7) {             
  return '早餐';
} else {								
  return '沒了';            //不一定會有 else if
}

if (time == 7) {              //可以做一個簡單的判斷
  return '早餐';            //所以也不一定會有 else
}

有時判斷思路可以改變下，以 getMeal 的函式來說，可以寫成更簡潔的

1
2
3
4
5
6
7
8
function getMeal(time) {
  if (time == 7)return '早餐';
  if (time == 12)return '午餐';
  if (time == 17)return '晚餐';
  return '沒了'
}

console.log(getMeal(12)); //'午餐'

Tip: 如果判斷是只有簡單的對或錯可以使用”三元表達式”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

function isTure(boolean) {
  if(boolean == true) {
    return('Yes');
  } else if (boolean == false) {
    return('No')
  }
}

//看起來可以簡單點
function isTure(boolean) {
  if(boolean == true) {
    return('Yes');
  } else {
    return('No');
  }
}

//在拿掉一點東西
function isTure(boolean) {
  if(boolean == true) return('Yes');
  return('No');
}

//三元表達式 來囉
function isTure(boolean) {
  boolea ? return('Yes') : return('No');
}

三元表達式 ＝> “ 判斷 ? 結果一 : 結果二 “

可以想像成，如果判斷是對的話，走結果一，其他走結果二。

Optional chaining (?.)

1
2
3
4
5
6
7
8
9
10
11
12
13
const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah'
  },
};

const dogName = adventurer.dog?.name;
console.log(dogName);
// undefined

console.log(adventurer.someNonExistentMethod?.());
// undefined

如我物件找不到的話會直接終止，給予undefined，並不會繼續往下找，省得一些不必要的過程。
但在一些程式中需要防呆機制，以保證就算找不到想要的值，程式還是可以正常地跑下去。

1
2
3
4
5
6
const dogName = adventurer.dog?.name ?? 'No name'
console.log(dogName);
// 'No name'

console.log(adventurer.someNonExistentMethod?.() ?? 'NonExistentMethod');
// 'NonExistentMethod'

為什麼不用「||」

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const adventurer = {
  name: 'Alice',
  cat: {
    name: ''
  },
};

const catName = adventurer.cat?.name ?? 'No name';
console.log(catName);
// ''

const catName2 = adventurer.cat?.name || 'No name';
console.log(catName2);
// 'No name'

完全是看自己需求，看前面提到的，如果你需要如果找到的值，
只要是 null、 0、 NaN、 空字串 (“”)、undefined可以轉換為false的運算式，就往下的話，就可以用||。

Tip: 在??中，0 或是 “”，都會被保留。

小結

我只寫些常用且比較直覺關於判斷的東西，歡迎批評指教。

參考資料

MDN Web Docs