怎么寫出干凈的JS代碼

本篇內(nèi)容介紹了“怎么寫出干凈的JS代碼”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

1. 將數(shù)字定義為常量

我們常常會(huì)用到數(shù)字，比如以下代碼：

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

誰知道這個(gè) 100 具體指的是什么？我們通常需要結(jié)合函數(shù)上下文再推測(cè)、判斷這個(gè) 100 它可能是具體代表一個(gè)什么值。

如果這樣的數(shù)字有多個(gè)的話，一定會(huì)很容易造成更大的困惑。

寫出干凈的 JavaScript：將數(shù)字定義為常量

即可清晰的解決這個(gè)問題：

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

現(xiàn)在，我們通過聲明常量的名字，即可立馬讀懂 100 是“年齡要求”的意思。修改時(shí)也能迅速定位、一處修改、多處生效。

2. 避免將布爾值作為函數(shù)參數(shù)

將布爾值作為參數(shù)傳入函數(shù)中是一種常見的容易造成代碼混亂的寫法。

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

布爾值作為參數(shù)傳入函數(shù)不能表示出明確的意義，只能告訴讀者，這個(gè)函數(shù)將會(huì)有判斷發(fā)生，產(chǎn)生兩種或多種情況。

然而，我們提倡函數(shù)的單一職責(zé)原則，所以：

寫出干凈的 JavaScript：避免將布爾值作為函數(shù)參數(shù)

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

3. 將多個(gè)條件封裝

我們經(jīng)常會(huì)寫出這樣的代碼：

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

不是不行，只是隔久了會(huì)一下子看不懂這些判斷到底是要干嘛的，所以建議把這些條件用變量或函數(shù)進(jìn)行封裝。

寫出干凈的 JavaScript：將多個(gè)條件封裝

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)) {
  // ...
}

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

這樣的代碼是聲明式風(fēng)格的代碼，更易讀。

4. 避免否定的判斷條件

條件判斷中，使用否定判斷，會(huì)額外造成一種思考負(fù)擔(dān)。

比如下面的代碼，條件 !isCreatureNotHuman(creature) 雙重否定，讀起來就會(huì)覺得有點(diǎn)費(fèi)勁。

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

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

寫出干凈的 JavaScript：避免否定的判斷條件

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

很多時(shí)候讀代碼就是讀著讀著，看到一個(gè)“很爛”的寫法，就忍不了了，細(xì)節(jié)會(huì)疊加，千里之堤潰于蟻穴。

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

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

這一點(diǎn)，本瓜一直就有強(qiáng)調(diào)：

比如以下代碼：

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;
}

改寫成數(shù)組：

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

寫出干凈的 JavaScript：避免大量 if...else...

所以，當(dāng)代碼中出現(xiàn)大量 if...else... 時(shí)，多想一步，是否能稍加改造讓代碼看起來更加“干凈”。

小結(jié)：上述技巧可能在示例中看起來不值一提，但是在實(shí)際的項(xiàng)目中，當(dāng)業(yè)務(wù)邏輯復(fù)雜起來、當(dāng)代碼量變得很大的時(shí)候，這些小技巧一定能給出正面的作用、幫助，甚至超乎想象。

“怎么寫出干凈的JS代碼”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！