杜絕這五個 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); // Outputs: 1,2,3,4複製程式碼

雖然上面的方法能實現賦值，但是它有一些副作用。

呼叫函數得到返回值 a,b,c,d 時，我們需要注意返回值返回的順序。這裡的一個小錯誤很可能就是你 debug 路上的夢魘。

除了需要注意順序，我們還不能只獲取想要的其中幾個返回值，假如我只想要 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();複製程式碼

我們可以使用物件解構賦值來代替它。

const func = () => {  const a = 1;  const b = 2;  const c = 3;  const d = 4;  return {a,b,c,d};
}const {c,d} = func();複製程式碼

現在我們可以自由地選擇需要哪些函數返回值。

以後就算函數增加了更多的返回值，物件解構的程式碼也可以不做任何變更,使程式碼更加穩定。

沒有在函數入參使用物件解構

假設我們有一個入參是物件的函數，函數內程式碼需要使用到這個物件的屬性。一個幼稚的實現如下：

// badfunction getDaysRemaining(subscription) {  const startDate = subscription.startDate;  const endDate = subscription.endDate;  return endDate - startDate;
}複製程式碼

這個方案雖然滿足了我們的需要，但是宣告了兩個沒什麼必要的臨時參照變數 startDate 和 endDate。

一個更好的方案是使用物件解構在一行裡面獲取入參 startDate 和 endDate。

// betterfunction getDaysRemaining(subscription) {  const { startDate, endDate } = subscription;  return startDate - endDate;
}複製程式碼

我們甚至可以直接在入參使用物件解構定義這兩個變數。

// even betterfunction getDaysRemaining({ startDate, endDate }) {  return startDate - endDate;
}
Much more elegant wouldn’t you agree?複製程式碼

你難道不覺得這樣實現更優雅嗎？

不使用展開語法(...)拷貝陣列

使用 for 迴圈遍歷元素再拷貝到新陣列除了繁瑣還很醜陋。

使用展開語法可以讓實現更加清晰和簡潔。

const stuff = [1,2,3];// badconst stuffCopyBad = []for(let i = 0; i < stuff.length; i++){
  stuffCopyBad[i] = stuff[i];
}// goodconst stuffCopyGood = [...stuff];複製程式碼

使用 `Var`

使用 const 保證一個變數不能重新賦值，能夠減少 bug 以及提高程式碼可讀性。

// badvar x = "badX";var y = "baxY";// goodconst x = "goodX";const y = "goodX";複製程式碼

If you really need to reassign a variable, always prefer let over var . 如果真的需要對一個變數重新賦值，使用 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) // Outputs 10複製程式碼

let和const定義都變數都可以在塊作用域存取到。

不使用模板字串

手動拼接字串寫起來非常複雜，讀起來很困惑。看例子：

// badfunction printStartAndEndDate({ startDate, endDate }) {  console.log('StartDate:' + startDate + ',EndDate:' + endDate)
}複製程式碼

模板字串提供清晰和易讀的在字串插入變數的方法。

// goodfunction printStartAndEndDate({ startDate, endDate }) {  console.log(`StartDate: ${startDate}, EndDate: ${endDate}`)
}複製程式碼

模板字串提供了也簡單的方法換行，你只需要在鍵盤按下 enter 鍵，像你平時（在系統）使用一樣。

// prints on two linesfunction printStartAndEndDate({ startDate, endDate }) {  console.log(`StartDate: ${startDate}
  EndDate: ${endDate}`)
}複製程式碼

更多相關免費學習推薦：（視訊）