JavaScript 如何重構代碼（一）

發表於 | 分類於 | |

這個主題打算寫系列文
先簡單介紹三個 if else 的重構方法

內文

  • 更好的 if else 寫法 (三元運算子)
  • 更好的 if else 寫法（return）
  • 更好的 if else 寫法（物件）

更好的 if else (三元運算子)

if else 寫法

1
2
3
4
5
if (id === 1) {
  alert("ID 是 1");
} else {
  alert("ID 不是 1");
}

三元運算子

1
id === 1 ? alert("ID 是 1") : alert("ID 不是 1");

更好的 if else（return 寫法）

if else 寫法

1
2
3
4
5
6
7
8
9
if (id === 1) {
  alert("ID 是 1");
} else if (id === 2) {
  alert("ID 是 2");
} else if (id === 3) {
  alert("ID 是 3");
} else {
  alert("ID 不是 1, 2, 3");
}

retrun

1
2
3
4
5
6
(function () {
  if (id === 1) return alert("ID 是 1");
  if (id === 2) return alert("ID 是 2");
  if (id === 3) return alert("ID 是 3");
  return alert("ID 不是 1, 2, 3");
})();

更好的 if else（物件寫法）

if else 寫法

1
2
3
4
5
6
7
8
9
if (id === 1) {
  alert("ID 是 1");
} else if (id === 2) {
  alert("ID 是 2");
} else if (id === 3) {
  alert("ID 是 3");
} else {
  alert("ID 不是 1, 2, 3");
}

物件

1
2
3
4
5
6
7
8
const obj = {
  0: "ID 不是 1, 2, 3",
  1: "ID 是 1",
  2: "ID 是 2",
  3: "ID 是 3",
};
const selectedID = obj[id] || obj[0];
alert(selectedID);

本文作者： David Huang
本文地址： https://davidblog.github.io/2020/06/15/refactor/

0%