如何寫出乾淨的JS程式碼？ 5個編寫小技巧分享

降低閱讀負擔，啟發創作心智，輕鬆學習JavaScript 技巧，日拱一卒，jym，衝~

1. 將數字定義為常數

我們常常會用到數字，比如以下代碼：

const isOldEnough = (person) => {
  return person.getAge() >= 100;
}

誰知道這個100 具體指的是什麼？我們通常需要結合函數上下文再推測、判斷這個100 它可能是具體代表一個什麼值。

如果這樣的數字有多個的話，一定會很容易造成更大的困惑。

寫出乾淨的JavaScript：將數字定義為常數

即可清晰的解決這個問題：

const AGE_REQUIREMENT = 100;
const isOldEnough = (person) => {
  return person.getAge() >= AGE_REQUIREMENT;
}

現在，我們透過宣告常數的名字，即可立刻讀懂100 是「年齡要求」的意思。修改時也能迅速定位、一處修改、多處生效。

2. 避免將布林值作為函數參數

將布林值作為參數傳入函數中是一種常見的容易造成程式碼混亂的寫法。

const validateCreature = (creature, isHuman) => {
  if (isHuman) {
    // ...
  } else {
    // ...
  }
}

布林值作為參數傳入函數不能表示出明確的意義，只能告訴讀者，這個函數將會有判斷發生，產生兩種或多種情況。

然而，我們提倡函數的單一職責原則，所以：

寫出乾淨的JavaScript：避免將布林值作為函數參數

const validatePerson = (person) => {
  // ...
}
const validateCreature = (creature) => {
  // ...
}

3. 將多個條件封裝

我們常常會寫出這樣的程式碼：

if (
  person.getAge() > 30 &&
  person.getName() === "simon" &&
  person.getOrigin() === "sweden"
) {
  // ...
}

不是不行，只是隔久了會一下子看不懂這些判斷到底是要幹嘛的，所以建議把這些條件用變數或函數來封裝。

寫出乾淨的JavaScript：將多個條件封裝

const isSimon =
  person.getAge() > 30 &&
  person.getName() === "simon" &&
  person.getOrigin() === "sweden";
if (isSimon) {
  // ...
}

或

const isSimon = (person) => {
  return (
    person.getAge() > 30 &&
    person.getName() === "simon" &&
    person.getOrigin() === "sweden"
  );
};
if (isSimon(person)) {
  // ...
}

噢，原來這些條件是為了判斷這個人是不是Simon ~

這樣的程式碼是聲明式風格的程式碼，比較易讀。

4. 避免否定的判斷條件

條件判斷中，使用否定判斷，會額外造成一種思考負擔。

例如下面的程式碼，條件!isCreatureNotHuman(creature)雙重否定，讀起來就會覺得有點費力。

const isCreatureNotHuman = (creature) => {
  // ...
}

if (!isCreatureNotHuman(creature)) {
  // ...
}

寫出乾淨的JavaScript：避免否定的判斷條件

改寫成以下寫法則讀起來更輕鬆，雖然這只是一個很小的技巧，但是在大量的程式碼邏輯中，多處去遵循這個原則，肯定會很有幫助。

很多時候讀程式碼就是讀著，看到一個「很爛」的寫法，就忍不了了，細節會疊加，千里之堤潰於蟻穴。

const isCreatureHuman = (creature) => {
  // ...
}
if (isCreatureHuman(creature)) {
  // ...
}

5. 避免大量if...else...

這一點，本瓜一直就有強調：

例如以下程式碼：

if(x===a){
   res=A
}else if(x===b){
   res=B
}else if(x===c){
   res=C
}else if(x===d){
    //...
}

改寫成map 的寫法：

let mapRes={
    a:A,
    b:B,
    c:C,
    //...
}
res=mapRes[x]

再例如以下程式碼：

const isMammal = (creature) => {
  if (creature === "human") {
    return true;
  } else if (creature === "dog") {
    return true;
  } else if (creature === "cat") {
    return true;
  }
  // ...
return false;
}

改寫成陣列：

const isMammal = (creature) => {
  const mammals = ["human", "dog", "cat", /* ... */];
  return mammals.includes(creature);
}

寫出乾淨的JavaScript：避免大量if...else...

所以，當程式碼中出現大量if...else... 時，多想一步，是否能稍加改造讓程式碼看起來更「乾淨」。

小結：上述技巧可能在範例中看起來不值一提，但是在實際的專案中，當業務邏輯複雜起來、當程式碼量變得很大的時候，這些小技巧一定能給出正面的作用、幫助，甚至超乎想像。

以上就是如何寫出乾淨的JS程式碼？ 5個撰寫小技巧分享的詳細內容，更多請關注php中文網其它相關文章！