2020-7-24 seo達(dá)人
使你的代碼可讀和可維護(hù)的快速提示。
有多少次，你打開(kāi)一個(gè)舊的項(xiàng)目，發(fā)現(xiàn)混亂的代碼，當(dāng)你添加一些新的東西時(shí)，很容易崩潰？我們都有過(guò)這樣的經(jīng)歷。
為了減少難以讀懂的javascript的數(shù)量，我提供了以下示例。這些都是我過(guò)去所犯過(guò)的錯(cuò)誤。
對(duì)具有多個(gè)返回值的函數(shù)使用數(shù)組解構(gòu)
假設(shè)我們有一個(gè)返回多個(gè)值的函數(shù)。一種可能的實(shí)現(xiàn)是使用數(shù)組解構(gòu)，如下所示：
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); // 1,2,3,4
盡管上面的方法很好用，但確實(shí)引入了一些復(fù)雜性。
當(dāng)我們調(diào)用函數(shù)并將值分配給 a,b,c,d 時(shí)，我們需要注意返回?cái)?shù)據(jù)的順序。這里的一個(gè)小錯(cuò)誤可能會(huì)成為調(diào)試的噩夢(mèng)。
此外，無(wú)法確切指定我們要從函數(shù)中獲取哪些值，如果我們只需要 c 和 d 怎么辦？
相反，我們可以使用對(duì)象解構(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();
現(xiàn)在，我們可以輕松地從函數(shù)中選擇所需的數(shù)據(jù)，這也為我們的代碼提供了未來(lái)的保障，允許我們?cè)诓黄茐臇|西的情況下增加額外的返回變量。
不對(duì)函數(shù)參數(shù)使用對(duì)象分解
假設(shè)我們有一個(gè)函數(shù)，該函數(shù)將一個(gè)對(duì)象作為參數(shù)并對(duì)該對(duì)象的屬性執(zhí)行一些操作。一種幼稚的方法可能看起來(lái)像這樣：
// 不推薦
function getDaysRemaining(subscription) {
const startDate = subscription.startDate;
const endDate = subscription.endDate;
return endDate - startDate;
}
上面的方法按預(yù)期工作，但是，我們創(chuàng)建了兩個(gè)不必要的臨時(shí)引用 startDate 和 endDate。
一種更好的實(shí)現(xiàn)是對(duì) subscription 對(duì)象使用對(duì)象解構(gòu)來(lái)在一行中獲取 startDate 和 endDate。
// 推薦
function getDaysRemaining(subscription) {
const { startDate, endDate } = subscription;
return startDate - endDate;
}
我們可以更進(jìn)一步，直接對(duì)參數(shù)執(zhí)行對(duì)象析構(gòu)。
// 更好
function getDaysRemaining({ startDate, endDate }) {
return startDate - endDate;
}
更優(yōu)雅，不是嗎？
在不使用擴(kuò)展運(yùn)算符的情況下復(fù)制數(shù)組
使用 for循環(huán)遍歷數(shù)組并將其元素復(fù)制到新數(shù)組是冗長(zhǎng)且相當(dāng)丑陋的。
可以以簡(jiǎn)潔明了的方式使用擴(kuò)展運(yùn)算符來(lái)達(dá)到相同的效果。
const stuff = [1,2,3];
// 不推薦
const stuffCopyBad = []
for(let i = 0; i < stuff.length; i++){
stuffCopyBad[i] = stuff[i];
}
// 推薦
const stuffCopyGood = [...stuff];
使用var
使用 const 保證不能重新分配變量。這樣可以減少我們代碼中的錯(cuò)誤，并使其更易于理解。
// 不推薦
var x = "badX";
var y = "baxY";
// 推薦
const x = "goodX";
const y = "goodX";
果你確實(shí)需要重新分配變量，請(qǐng)始終選擇 let 而不是 var。
這是因?yàn)?let 是塊作用域的，而 var 是函數(shù)作用域的。
塊作用域告訴我們，只能在定義它的代碼塊內(nèi)部訪問(wèn)變量，嘗試訪問(wèn)塊外部的變量會(huì)給我們提供ReferenceError。
for(let i = 0; i < 10; i++){
//something
}
print(i) // ReferenceError: i is not defined
函數(shù)作用域告訴我們，只能在定義其的函數(shù)內(nèi)部訪問(wèn)變量。
for(var i = 0; i < 10; i++){
//something
}
console.log(i) // 10
let 和 const 都是塊范圍的。
不使用模板字面值
手動(dòng)將字符串連接在一起相當(dāng)麻煩，而且輸入時(shí)可能會(huì)造成混淆。這是一個(gè)例子：
// 不推薦
function printStartAndEndDate({ startDate, endDate }) {
console.log('StartDate:' + startDate + ',EndDate:' + endDate)
}
模板文字為我們提供了一種可讀且簡(jiǎn)潔的語(yǔ)法，該語(yǔ)法支持字符串插值。
// 推薦
function printStartAndEndDate({ startDate, endDate }) {
console.log(`StartDate: ${startDate}, EndDate: ${endDate}`)
}
模板文字也提供了嵌入新行的簡(jiǎn)便方法，你所需要做的就是照常按鍵盤(pán)上的Enter鍵。
// 兩行打印
function printStartAndEndDate({ startDate, endDate }) {
console.log(`StartDate: ${startDate}
EndDate: ${endDate}`)
}
藍(lán)藍(lán)設(shè)計(jì)( m.skdbbs.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.skdbbs.com