停止犯下這5個JavaScript風格錯誤
有多少次,你打開一箇舊的項目,發現混亂的代碼,當你添加一些新的東西時,很容易崩潰?我們都有過這樣的經歷。
爲了減少難以讀懂的javascript的數量,我提供了以下示例。這些都是我過去所犯過的錯誤。
對具有多個返回值的函數使用數組解構
假設我們有一個返回多個值的函數。一種可能的實現是使用數組解構,如下所示:
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
儘管上面的方法很好用,但確實引入了一些複雜性。
當我們調用函數並將值分配給 a,b,c,d
時,我們需要注意返回數據的順序。這裏的一個小錯誤可能會成爲調試的噩夢。
此外,無法確切指定我們要從函數中獲取哪些值,如果我們只需要 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();
現在,我們可以輕鬆地從函數中選擇所需的數據,這也爲我們的代碼提供了未來的保障,允許我們在不破壞東西的情況下增加額外的返回變量。
不對函數參數使用對象分解
假設我們有一個函數,該函數將一個對象作爲參數並對該對象的屬性執行一些操作。一種幼稚的方法可能看起來像這樣:
// 不推薦 function getDaysRemaining(subscription) { const startDate = subscription.startDate; const endDate = subscription.endDate; return endDate - startDate; }
上面的方法按預期工作,但是,我們創建了兩個不必要的臨時引用 startDate
和 endDate
。
一種更好的實現是對 subscription
對象使用對象解構來在一行中獲取 startDate
和 endDate
。
// 推薦 function getDaysRemaining(subscription) { const { startDate, endDate } = subscription; return startDate - endDate; }
我們可以更進一步,直接對參數執行對象析構。
// 更好 function getDaysRemaining({ startDate, endDate }) { return startDate - endDate; }
更優雅,不是嗎?
在不使用擴展運算符的情況下複製數組
使用 for
循環遍歷數組並將其元素複製到新數組是冗長且相當醜陋的。
可以以簡潔明瞭的方式使用擴展運算符來達到相同的效果。
const stuff = [1,2,3]; // 不推薦 const stuffCopyBad = [] for(let i = 0; i < stuff.length; i++){ stuffCopyBad[i] = stuff[i]; } // 推薦 const stuffCopyGood = [...stuff];
使用var
使用 const
保證不能重新分配變量。這樣可以減少我們代碼中的錯誤,並使其更易於理解。
// 不推薦 var x = "badX"; var y = "baxY"; // 推薦 const x = "goodX"; const y = "goodX";
果你確實需要重新分配變量,請始終選擇 let
而不是 var
。
這是因爲 let
是塊作用域的,而 var
是函數作用域的。
塊作用域告訴我們,只能在定義它的代碼塊內部訪問變量,嘗試訪問塊外部的變量會給我們提供ReferenceError。
for(let i = 0; i < 10; i++){ //something } print(i) // ReferenceError: i is not defined
函數作用域告訴我們,只能在定義其的函數內部訪問變量。
for(var i = 0; i < 10; i++){ //something } console.log(i) // 10
let
和 const
都是塊範圍的。
不使用模板字面值
手動將字符串連接在一起相當麻煩,而且輸入時可能會造成混淆。這是一個例子:
// 不推薦 function printStartAndEndDate({ startDate, endDate }) { console.log('StartDate:' + startDate + ',EndDate:' + endDate) }
模板文字爲我們提供了一種可讀且簡潔的語法,該語法支持字符串插值。
// 推薦 function printStartAndEndDate({ startDate, endDate }) { console.log(`StartDate: ${startDate}, EndDate: ${endDate}`) }
模板文字也提供了嵌入新行的簡便方法,你所需要做的就是照常按鍵盤上的Enter鍵。
// 兩行打印 function printStartAndEndDate({ startDate, endDate }) { console.log(`StartDate: ${startDate} EndDate: ${endDate}`) }
推薦閱讀
如果對你有幫助,還可以 在看、留言、 轉發 ,這是對作者最大的幫助