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}`) }复制代码
更多相關免費學習推薦:javascript(影片)
以上是杜絕這五個 Javascript 錯誤啦的詳細內容。更多資訊請關注PHP中文網其他相關文章!