JavaScript 如何重構代碼（二）

發表於 | 分類於 | |

重構代碼第二彈!!!
在沒有寫第二彈前…
我ㄧ直在想會不會所有規劃好的系列文 都只有一回…XD

內文

  • 更好的 function (參數給予預設值)
  • 更好的 array callback（ function 獨立拆出並給予命名）
  • 更好的 邏輯運算子 || (改用陣列過濾)

更好的 function (參數給予預設值)


處理動態資料時
將 function 給予預設值是一個好選擇
以免 API 未回傳正確資料時 APP 閃退
或發生各種不必要的悲劇

當參數遇到 undefined 時則會給予預設值

Normal

1
2
3
4
const getAPlusB = (a, b) => a + b;

getAPlusB();
// NaN

Better 寫法一

1
2
3
4
const getAPlusB = (a = 0, b = 0) => a + b;

getAPlusB();
// 0

Better 寫法二

1
2
3
4
5
6
7
8
const getAPlusB = (a, b) => {
  a = a || 0;
  b = b || 0;
  return a + b;
};

getAPlusB();
// 0

更好的 array callback（ function 獨立拆出並給予命名）


當 array 方法裡面的 callback function 較複雜的時候
將其獨立出來給予命名是一個好選擇
因為可以更直觀的了解其作用與功能

Normal

1
2
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
array.map((item) => item * 2);

Better

1
2
3
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const doubleEachNumber = (number) => number * 2;
array.map(doubleEachNumber);

更好的 邏輯運算子 || (改用陣列過濾)


這邊範例是用 indexOf 來重構
但實際上用 includes 會更直觀
但使用上需要注意 indexOf 存在於 ES5
而 includes 則為 ES6 所加上的

Normal

1
2
3
4
5
6
7
8
9
const getIdInfo = (id) => {
  if (id === 1 || id === 2 || id === 3 || id === 4 || id === 5) {
    return console.log("id 介於 1 到 5 之間");
  } else if (id === 6 || id === 7 || id === 8 || id === 9 || id === 10) {
    return console.log("id 介於 6 到 10 之間");
  } else {
    return console.log("id 不存在");
  }
};

Better

1
2
3
4
5
6
7
8
const arrayOne = [1, 2, 3, 4, 5];
const arrayTwo = [6, 7, 8, 9, 10];

const getIdInfo = (id) => {
  if (arrayOne.indexOf(id) !== -1) return console.log("id 介於 1 到 5 之間");
  if (arrayTwo.indexOf(id) !== -1) return console.log("id 介於 6 到 10 之間");
  return console.log("id 不存在");
};

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

0%