變量無(wú)處不在。即便我們寫(xiě)一個(gè)小函數(shù)或一個(gè)小工具，也要聲明、賦值和讀取變量。增強(qiáng)對(duì)變量的重視，可以提高代碼的可讀性和可維護(hù)性。
1.建議使用 const，要么使用 let
用 const 或 let 聲明自己的 JavaScript 變量。兩者之間的主要區(qū)別是 const 變量在聲明時(shí)需要初始化，并且一旦初始化就無(wú)法再重新賦值。
|
1
2
3
4
5
|
// const 需要初始化const pi = 3.14;// const 不能被重新賦值pi = 4.89; // throws "TypeError: Assignment to constant variable" |
let 聲明不需要對(duì)值初始化，可以多次重新賦值。
|
1
2
3
4
5
|
// let 要不要初始化隨你let result;// let 可被重新賦值result = 14;result = result * 2; |
const 是一次性分配變量。因?yàn)槟阒?const 變量不會(huì)被修改，所以與 let 相比，對(duì) const 變量的推測(cè)比較容易。
聲明變量時(shí)優(yōu)先使用 const，然后是 let 。
假設(shè)你正在 review 一個(gè)函數(shù)，并看到一個(gè) const result = ... 聲明：
|
1
2
3
4
5
6
7
|
function myBigFunction(param1, param2) { /* 一寫(xiě)代碼... */ const result = otherFunction(param1); /* 一些代碼... */ return something;} |
雖然不知道 myBigFunction() 中做了些什么，但是我們可以得出結(jié)論，result 變量是只讀的。
在其他情況下，如果必須在代碼執(zhí)行過(guò)程中多次重新對(duì)變量賦值，那就用 let。
2. 使變量的作用域最小化
變量位于創(chuàng)建它的作用域中。代碼塊和函數(shù)體為 const 和 let 變量創(chuàng)建作用域。
把變量保持在最小作用域中是提高可讀性的一個(gè)好習(xí)慣。
例如下面的二分查找算法的實(shí)現(xiàn)：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
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); // => truebinarySearch([2, 5, 7, 9], 1); // => false |
變量 middle 和 middleItem 是在函數(shù)的開(kāi)頭聲明的，所以這些變量在 binarySearch() 函數(shù)的整個(gè)作用域內(nèi)可用。變量 middle 用來(lái)保存二叉搜索的中間索引，而變量 middleItem 保存中間的搜索項(xiàng)。
但是 middle 和 middleItem 變量只用在 while 循環(huán)中。那為什么不直接在 while 代碼塊中聲明這些變量呢？
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
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;} |
現(xiàn)在 middle 和 middleItem 只存在于使用變量的作用域內(nèi)。他們的生命周期極短，所以更容易推斷它們的用途。
3. 易于使用
我總是習(xí)慣于在函數(shù)開(kāi)始的時(shí)候去聲明所有變量，尤其是在寫(xiě)一些比較大的函數(shù)時(shí)。但是這樣做會(huì)使我在函數(shù)中使用變量的意圖變得非?；靵y。
所以應(yīng)該在變量聲明時(shí)應(yīng)該盡可能靠的近使用位置。這樣你就不必去猜：哦，這里聲明了變量，但是…它被用在什么地方呢？
假設(shè)有一個(gè)函數(shù)，在函數(shù)有包含很多語(yǔ)句。你可以在函數(shù)的開(kāi)頭聲明并初始化變量 result，但是只在 return 語(yǔ)句中使用了 result：
|
1
2
3
4
5
6
7
8
9
|
function myBigFunction(param1, param2) { const result = otherFunction(param1); let something; /* * 一些代碼... */ return something + result;} |
問(wèn)題在于 result 變量在開(kāi)頭聲明，卻只在結(jié)尾用到。我們并沒(méi)有充分的理由在開(kāi)始的時(shí)后就聲明這個(gè)變量。
所以為了更好地理解 result 變量的功能和作用，要始終使變量聲明盡可能的靠近使用它位置。
如果把代碼改成這樣：
|
1
2
3
4
5
6
7
8
9
|
function myBigFunction(param1, param2) { let something; /* * 一些代碼... */ const result = otherFunction(param1); return something + result;} |
現(xiàn)在是不是就清晰多了。
4. 合理的命名
你可能已經(jīng)知道了很多關(guān)于變量命名的知識(shí)，所以在這里不會(huì)展開(kāi)說(shuō)明。不過(guò)在眾多的命名規(guī)則中，我總結(jié)出了兩個(gè)重要的原則：
第一個(gè)很簡(jiǎn)單：使用駝峰命名法，并終如一地保持這種風(fēng)格。
|
1
2
3
|
const message = 'Hello';const isLoading = true;let count; |
這個(gè)規(guī)則的一個(gè)例外是一些特定的值：比如數(shù)字或具有特殊含義的字符串。包特定值的變量通常用大寫(xiě)加下劃線的形式，與常規(guī)變量區(qū)分開(kāi)：
|
1
2
|
const SECONDS_IN_MINUTE = 60;const GRAPHQL_URI = 'http://site.com/graphql'; |
我認(rèn)為第二條是：變量名稱應(yīng)該清楚無(wú)誤地表明是用來(lái)保存哪些數(shù)據(jù)的。
下面是一些很好的例子：
|
1
2
3
|
let message = 'Hello';let isLoading = true;let count; |
message 名稱表示此變量包含某種消息，很可能是字符串。
isLoading 也一樣，是一個(gè)布爾值，用來(lái)指示是否正在進(jìn)行加載。
毫無(wú)疑問(wèn)，count 變量表示一個(gè)數(shù)字類型的變量，其中包含一些計(jì)數(shù)結(jié)果。
一定要選一個(gè)能夠清楚表明其作用的變量名。
看一個(gè)例子，假設(shè)你看到了下面這樣的代碼：
|
1
2
3
4
5
6
7
|
function salary(ws, r) { let t = 0; for (w of ws) { t += w * r; } return t;} |
你能很容易知道函數(shù)的作用嗎？與薪水的計(jì)算有關(guān)？非常不幸，我們很難看出 ws、 r、 t、 w這些變量名的作用。
但是如果代碼是這樣：
|
1
2
3
4
5
6
7
8
|
function calculateTotalSalary(weeksHours, ratePerHour) { let totalSalary = 0; for (const weekHours of weeksHours) { const weeklySalary = weekHours * ratePerHour; totalSalary += weeklySalary; } return totalSalary;} |
我們就很容易知道它們的作用，這就是合理命名的力量。
5.采用中間變量
我一般盡可能避免寫(xiě)注釋，更喜歡寫(xiě)出能夠自我描述的代碼，通過(guò)對(duì)變量、屬性、函數(shù)、類等進(jìn)行合理的命名來(lái)表達(dá)代碼的意圖。
如果想使代碼本身稱為文檔，一個(gè)好習(xí)慣是引入中間變量，這在在處理長(zhǎng)表達(dá)式時(shí)很好用。
比如下面的表達(dá)式：
|
1
|
const sum = val1 * val2 + val3 / val4; |
可以通過(guò)引入兩個(gè)中間變量來(lái)提高長(zhǎng)表達(dá)式的可讀性：
|
1
2
3
4
|
const multiplication = val1 * val2;const division = val3 / val4;const sum = multiplication + division; |
再回顧一下前面的二叉搜索算法實(shí)現(xiàn)：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
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 就是一個(gè)中間變量，用于保存中間項(xiàng)。使用中間變量 middleItem 比直接用 array[middle] 更容易。
與缺少 middleItem 變量的函數(shù)版本進(jìn)行比較：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
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;} |
沒(méi)有中間變量的解釋，這個(gè)版本稍微不太好理解。
通過(guò)使用中間變量用代碼解釋代碼。中間變量可能會(huì)增加一些語(yǔ)句，但出于增強(qiáng)代碼可讀性的目的還是非常值得的的。
總結(jié)
- 變量無(wú)處不在。在 JavaScript 中使用變量時(shí)，首選 const，其次是 let。
- 盡可能縮小變量的作用域。同樣，聲明變量時(shí)要盡可能靠近其使用位置。
- 合理的命名是非常重要的。要遵循以下規(guī)則：變量名稱應(yīng)該清楚無(wú)誤地表明是用來(lái)保存哪些數(shù)據(jù)的。不要害怕使用更長(zhǎng)的變量名：要追求清晰而不是簡(jiǎn)短。
- 最后，最好用代碼自己來(lái)解釋代碼。在高度復(fù)雜的地方，我更喜歡引入中間變量。
以上就是如何在JavaScript中正確處理變量的詳細(xì)內(nèi)容，更多關(guān)于JavaScript 處理變量的資料請(qǐng)關(guān)注服務(wù)器之家其它相關(guān)文章！
原文鏈接：https://segmentfault.com/a/1190000038583771
