為了讓世界上不可讀的 Javascript 代碼更少,我得給你們看看以下的五個(gè)例子 — 我的恥辱柱。
使用數(shù)組解構(gòu)獲取函數(shù)的多個(gè)返回值
如果我們有一個(gè)返回多個(gè)值的函數(shù),可以使用數(shù)組解構(gòu)實(shí)現(xiàn)取值。代碼如下:
const func = () => { const a = 1; const b = 2; const c = 3; const d = 4;
return [a,b,c,d];
}const [a,b,c,d] = func();console.log(a,b,c,d); // Outputs: 1,2,3,4復(fù)制代碼
雖然上面的方法能實(shí)現(xiàn)賦值,但是它有一些副作用。
調(diào)用函數(shù)得到返回值 a,b,c,d 時(shí),我們需要注意返回值返回的順序。這里的一個(gè)小錯(cuò)誤很可能就是你 debug 路上的夢魘。
除了需要注意順序,我們還不能只獲取想要的其中幾個(gè)返回值,假如我只想要 c,d 呢?
const func = () => { const a = 1; const b = 2; const c = 3; const d = 4; return {a,b,c,d};
}const {c,d} = func();復(fù)制代碼
我們可以使用對象解構(gòu)賦值來代替它。
const func = () => { const a = 1; const b = 2; const c = 3; const d = 4; return {a,b,c,d};
}const {c,d} = func();復(fù)制代碼
現(xiàn)在我們可以自由地選擇需要哪些函數(shù)返回值。
以后就算函數(shù)增加了更多的返回值,對象解構(gòu)的代碼也可以不做任何變更,使代碼更加穩(wěn)定。
沒有在函數(shù)入?yún)⑹褂脤ο蠼鈽?gòu)
假設(shè)我們有一個(gè)入?yún)⑹菍ο蟮暮瘮?shù),函數(shù)內(nèi)代碼需要使用到這個(gè)對象的屬性。
一個(gè)幼稚的實(shí)現(xiàn)如下:
// badfunction getDaysRemaining(subscription) { const startDate = subscription.startDate; const endDate = subscription.endDate; return endDate - startDate;
}復(fù)制代碼
這個(gè)方案雖然滿足了我們的需要,但是聲明了兩個(gè)沒什么必要的臨時(shí)引用變量 startDate 和 endDate。
一個(gè)更好的方案是使用對象解構(gòu)在一行里面獲取入?yún)?startDate 和 endDate。
// betterfunction getDaysRemaining(subscription) { const { startDate, endDate } = subscription; return startDate - endDate;
}復(fù)制代碼
我們甚至可以直接在入?yún)⑹褂脤ο蠼鈽?gòu)定義這兩個(gè)變量。
// even betterfunction getDaysRemaining({ startDate, endDate }) { return startDate - endDate;
}
Much more elegant wouldn’t you agree?復(fù)制代碼
你難道不覺得這樣實(shí)現(xiàn)更優(yōu)雅嗎?
不使用展開語法(…)拷貝數(shù)組
使用 for 循環(huán)遍歷元素再拷貝到新數(shù)組除了繁瑣還很丑陋。
使用展開語法可以讓實(shí)現(xiàn)更加清晰和簡潔。
const stuff = [1,2,3];// badconst stuffCopyBad = []for(let i = 0; i < stuff.length; i ){
stuffCopyBad[i] = stuff[i];
}// goodconst stuffCopyGood = [...stuff];復(fù)制代碼
使用 Var
使用 const 保證一個(gè)變量不能重新賦值,能夠減少 bug 以及提高代碼可讀性。
// badvar x = "badX";var y = "baxY";// goodconst x = "goodX";const y = "goodX";復(fù)制代碼
If you really need to reassign a variable, always prefer let over var .
如果真的需要對一個(gè)變量重新賦值,使用 let 代替 var。
let 作用于塊作用域,而 var 作用于函數(shù)作用域。
塊作用域使變量僅在定義它的代碼塊中有效,在塊作用域外訪問變量將會提示 ReferenceError。
for(let i = 0; i < 10; i ){ //something}
print(i) // ReferenceError: i is not defined復(fù)制代碼
定義在函數(shù)作用域的變量可以在定義它的函數(shù)范圍內(nèi)使用。
for(var i = 0; i < 10; i ){ //something}console.log(i) // Outputs 10復(fù)制代碼
let和const定義都變量都可以在塊作用域訪問到。
不使用模板字符串
手動拼接字符串寫起來非常復(fù)雜,讀起來很困惑??蠢樱?/p>
// badfunction printStartAndEndDate({ startDate, endDate }) { console.log('StartDate:' startDate ',EndDate:' endDate)
}復(fù)制代碼
模板字符串提供清晰和易讀的在字符串插入變量的方法。
// goodfunction printStartAndEndDate({ startDate, endDate }) { console.log(`StartDate: ${startDate}, EndDate: ${endDate}`)
}復(fù)制代碼
模板字符串提供了也簡單的方法換行,你只需要在鍵盤按下 enter 鍵,像你平時(shí)(在系統(tǒng))使用一樣。
// prints on two linesfunction printStartAndEndDate({ startDate, endDate }) { console.log(`StartDate: ${startDate}
EndDate: ${endDate}`)
}復(fù)制代碼
更多相關(guān)免費(fèi)學(xué)習(xí)推薦:javascript(視頻)
更多關(guān)于云服務(wù)器,域名注冊,虛擬主機(jī)的問題,請?jiān)L問西部數(shù)碼官網(wǎng):m.ps-sw.cn