推薦(免費):(視訊)
變數無處不在。即便我們寫一個小函數或一個小工具,也要宣告、賦值和讀取變數。增強對變數的重視,可以提高程式碼的可讀性和可維護性。
1.建議使用 const,要麼使用 let
用 const
或 let
宣告自己的 JavaScript 變數。兩者之間的主要區別是 const
變數在宣告時需要初始化,並且一旦初始化就無法再重新賦值。
// const 需要初始化 const pi = 3.14; // const 不能被重新賦值 pi = 4.89; // throws "TypeError: Assignment to constant variable"
let
宣告不需要對值初始化,可以多次重新賦值。
// let 要不要初始化隨你 let result; // let 可被重新賦值 result = 14; result = result * 2;
const
是一次性分配變數。因為你知道 const
變數不會被修改,所以與 let
相比,對 const
變數的推測比較容易。
宣告變數時優先使用 const
,然後是 let
。
假設你正在 review 一個函數,並看到一個 const result = ...
宣告:
function myBigFunction(param1, param2) { /* 一寫程式碼... */ const result = otherFunction(param1); /* 一些程式碼... */ return something; }
雖然不知道 myBigFunction()
中做了些什麼,但是我們可以得出結論,result
變數是唯讀的。
在其他情況下,如果必須在程式碼執行過程中多次重新對變數賦值,那就用 let
。
2. 使變數的作用域最小化
變數位於建立它的作用域中。程式碼塊和函數體為 const
和 let
變數建立作用域。
把變數保持在最小作用域中是提高可讀性的一個好習慣。
例如下面的二分查詢演演算法的實現:
function binarySearch(array, search) { let middle; let middleItem; let left = 0; let right = array.length - 1; while(left <= right) { middle = Math.floor((left + right) / 2); middleItem = array[middle]; if (middleItem === search) { return true; } if (middleItem < search) { left = middle + 1; } else { right = middle - 1; } } return false; } binarySearch([2, 5, 7, 9], 7); // => true binarySearch([2, 5, 7, 9], 1); // => false
變數 middle
和 middleItem
是在函數的開頭宣告的,所以這些變數在 binarySearch()
函數的整個作用域內可用。變數 middle
用來儲存二叉搜尋的中間索引,而變數 middleItem
儲存中間的搜尋項。
但是 middle
和 middleItem
變數只用在 while
迴圈中。那為什麼不直接在 while
程式碼塊中宣告這些變數呢?
function binarySearch(array, search) { let left = 0; let right = array.length - 1; while(left <= right) { const middle = Math.floor((left + right) / 2); const middleItem = array[middle]; if (middleItem === search) { return true; } if (middleItem < search) { left = middle + 1; } else { right = middle - 1; } } return false; }
現在 middle
和 middleItem
只存在於使用變數的作用域內。他們的生命週期極短,所以更容易推斷它們的用途。
3. 易於使用
我總是習慣於在函數開始的時候去宣告所有變數,尤其是在寫一些比較大的函數時。但是這樣做會使我在函數中使用變數的意圖變得非常混亂。
所以應該在變數宣告時應該儘可能靠的近使用位置。這樣你就不必去猜:哦,這裡宣告了變數,但是…它被用在什麼地方呢?
假設有一個函數,在函數有包含很多語句。你可以在函數的開頭宣告並初始化變數 result
,但是隻在 return
語句中使用了 result
:
function myBigFunction(param1, param2) { const result = otherFunction(param1); let something; /* * 一些程式碼... */ return something + result;}
問題在於 result
變數在開頭宣告,卻只在結尾用到。我們並沒有充分的理由在開始的時後就宣告這個變數。
所以為了更好地理解 result
變數的功能和作用,要始終使變數宣告儘可能的靠近使用它位置。
如果把程式碼改成這樣:
function myBigFunction(param1, param2) { let something; /* * 一些程式碼... */ const result = otherFunction(param1); return something + result;}
現在是不是就清晰多了。
4. 合理的命名
你可能已經知道了很多關於變數命名的知識,所以在這裡不會展開說明。不過在眾多的命名規則中,我總結出了兩個重要的原則:
第一個很簡單:使用駝峰命名法,並終如一地保持這種風格。
const message = 'Hello'; const isLoading = true; let count;
這個規則的一個例外是一些特定的值:比如數位或具有特殊含義的字串。包特定值的變數通常用大寫加下劃線的形式,與常規變數區分開:
const SECONDS_IN_MINUTE = 60; const GRAPHQL_URI = 'http://site.com/graphql';
我認為第二條是:變數名稱應該清楚無誤地表明是用來儲存哪些資料的。
下面是一些很好的例子:
let message = 'Hello'; let isLoading = true; let count;
message
名稱表示此變數包含某種訊息,很可能是字串。
isLoading
也一樣,是一個布林值,用來指示是否正在進行載入。
毫無疑問,count
變數表示一個數位型別的變數,其中包含一些計數結果。
一定要選一個能夠清楚表明其作用的變數名。
看一個例子,假設你看到了下面這樣的程式碼:
function salary(ws, r) { let t = 0; for (w of ws) { t += w * r; } return t; }
你能很容易知道函數的作用嗎?與薪水的計算有關?非常不幸,我們很難看出 ws
、 r
、 t
、 w
這些變數名的作用。
但是如果程式碼是這樣:
function calculateTotalSalary(weeksHours, ratePerHour) { let totalSalary = 0; for (const weekHours of weeksHours) { const weeklySalary = weekHours * ratePerHour; totalSalary += weeklySalary; } return totalSalary; }
我們就很容易知道它們的作用,這就是合理命名的力量。
5.採用中間變數
我一般儘可能避免寫註釋,更喜歡寫出能夠自我描述的程式碼,通過對變數、屬性、函數、類等進行合理的命名來表達程式碼的意圖。
如果想使程式碼本身稱為檔案,一個好習慣是引入中間變數,這在在處理長表示式時很好用。
比如下面的表示式:
const sum = val1 * val2 + val3 / val4;
可以通過引入兩個中間變數來提高長表示式的可讀性:
const multiplication = val1 * val2; const pision = val3 / val4; const sum = multiplication + pision;
再回顧一下前面的二叉搜尋演演算法實現:
function binarySearch(array, search) { let left = 0; let right = array.length - 1; while(left <= right) { const middle = Math.floor((left + right) / 2); const middleItem = array[middle]; if (middleItem === search) { return true; } if (middleItem < search) { left = middle + 1; } else { right = middle - 1; } } return false; }
裡面的 middleItem
就是一箇中間變數,用於儲存中間項。使用中間變數 middleItem
比直接用 array[middle]
更容易。
與缺少 middleItem
變數的函數版本進行比較:
function binarySearch(array, search) { let left = 0; let right = array.length - 1; while(left <= right) { const middle = Math.floor((left + right) / 2); if (array[middle] === search) { return true; } if (array[middle] < search) { left = middle + 1; } else { right = middle - 1; } } return false; }
沒有中間變數的解釋,這個版本稍微不太好理解。
通過使用中間變數用程式碼解釋程式碼。中間變數可能會增加一些語句,但出於增強程式碼可讀性的目的還是非常值得的的。
總結
const
,其次是 let
。以上就是學習在 JavaScript 中正確處理變數的詳細內容,更多請關注TW511.COM其它相關文章!