站長資訊網(wǎng)如何寫出干凈的JS代碼？下面本篇文章就來給大家整理分享5 個寫出干凈 JavaScript 的小技巧，希望對大家有所幫助！
降低閱讀負擔(dān)，啟發(fā)創(chuàng)作心智，輕松學(xué)習(xí) JavaScript 技巧，日拱一卒，jym，沖~
1. 將數(shù)字定義為常量
我們常常會用到數(shù)字，比如以下代碼：
const isOldEnough = (person) => { return person.getAge() >= 100; }
誰知道這個 100 具體指的是什么？我們通常需要結(jié)合函數(shù)上下文再推測、判斷這個 100 它可能是具體代表一個什么值。
如果這樣的數(shù)字有多個的話，一定會很容易造成更大的困惑。
寫出干凈的 JavaScript：將數(shù)字定義為常量
即可清晰的解決這個問題：
const AGE_REQUIREMENT = 100; const isOldEnough = (person) => { return person.getAge() >= AGE_REQUIREMENT; }
現(xiàn)在，我們通過聲明常量的名字，即可立馬讀懂 100 是“年齡要求”的意思。修改時也能迅速定位、一處修改、多處生效。
2. 避免將布爾值作為函數(shù)參數(shù)
將布爾值作為參數(shù)傳入函數(shù)中是一種常見的容易造成代碼混亂的寫法。
const validateCreature = (creature, isHuman) => { if (isHuman) { // ... } else { // ... } }
布爾值作為參數(shù)傳入函數(shù)不能表示出明確的意義，只能告訴讀者，這個函數(shù)將會有判斷發(fā)生，產(chǎn)生兩種或多種情況。
然而，我們提倡函數(shù)的單一職責(zé)原則，所以：
寫出干凈的 JavaScript：避免將布爾值作為函數(shù)參數(shù)
const validatePerson = (person) => { // ... } const validateCreature = (creature) => { // ... }
3. 將多個條件封裝
我們經(jīng)常會寫出這樣的代碼：
if ( person.getAge() > 30 && person.getName() === "simon" && person.getOrigin() === "sweden" ) { // ... }
不是不行，只是隔久了會一下子看不懂這些判斷到底是要干嘛的，所以建議把這些條件用變量或函數(shù)進行封裝。
寫出干凈的 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 ~
這樣的代碼是聲明式風(fēng)格的代碼，更易讀。
4. 避免否定的判斷條件
條件判斷中，使用否定判斷，會額外造成一種思考負擔(dān)。
比如下面的代碼，條件 !isCreatureNotHuman(creature) 雙重否定，讀起來就會覺得有點費勁。
const isCreatureNotHuman = (creature) => { // ... } if (!isCreatureNotHuman(creature)) { // ... }
寫出干凈的 JavaScript：避免否定的判斷條件
改寫成以下寫法則讀起來更輕松，雖然這只是一個很小的技巧，但是在大量的代碼邏輯中，多處去遵循這個原則，肯定會很有幫助。
很多時候讀代碼就是讀著讀著，看到一個“很爛”的寫法，就忍不了了，細節(jié)會疊加，千里之堤潰于蟻穴。
const isCreatureHuman = (creature) => { // ... } if (isCreatureHuman(creature)) { // ... }
5. 避免大量 if…else…
這一點，本瓜一直就有強調(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… 時，多想一步，是否能稍加改造讓代碼看起來更加“干凈”。
小結(jié)：上述技巧可能在示例中看起來不值一提，但是在實際的項目中，當(dāng)業(yè)務(wù)邏輯復(fù)雜起來、當(dāng)代碼量變得很大的時候，這些小技巧一定能給出正面的作用、幫助，甚至超乎想象。
【
