停止犯下這5個JavaScript風格錯誤
使你的程式碼可讀和可維護的快速提示。
有多少次,你開啟一箇舊的專案,發現混亂的程式碼,當你新增一些新的東西時,很容易崩潰?我們都有過這樣的經歷。
為了減少難以讀懂的JavaScript的數量,我提供了以下示例。這些都是我過去所犯過的錯誤。
辦公資源網址導航 https://www.wode007.com 熊貓辦公https://www.wode007.com/sites/73654.html
對具有多個返回值的函式使用陣列解構
假設我們有一個返回多個值的函式。一種可能的實現是使用陣列解構,如下所示:
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}`)
}