寫出乾淨的 JavaScript 5 個小技巧

---

theme: channing-cyan

攜手創作，共同成長！這是我參與「掘金日新計劃 · 8 月更文挑戰」的第15天，點選檢視活動詳情

---

降低閱讀負擔，啟發創作心智，輕鬆學習 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... 時，多想一步，是否能稍加改造讓程式碼看起來更加“乾淨”。

---

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

OK，以上便是本篇分享。點贊關注評論，為好文助力👍

我是掘金安東尼 🤠 100 萬人氣前端技術博主 💥 INFP 寫作人格堅持 1000 日更文 ✍ 關注我，安東尼陪你一起度過漫長程式設計歲月 🌏