[[373383]]

本文已經(jīng)原作者Shadeed 授權(quán)翻譯。

變量無處不在，即使我們?cè)趯懸粋€(gè)小的函數(shù)，或者一個(gè)應(yīng)用程序:我們總是先聲明，分配和使用變量。編寫好的變量可提高代碼的可讀性和易維護(hù)性。

在本文中，主要介紹 5種有關(guān)在 JavaScript 中聲明和使用變量的最佳做法。

1.首選 const，再 let

我使用const或let聲明變量，兩者之間的主要區(qū)別是const變量需要一個(gè)初始值，并且一旦初始化就無法重新分配其值。

另一方面，let聲明不需要初始值，我們可以多次重新分配其值。

// const 需要初始化 
const pi = 3.14; 
// 不能重新分配const 
pi = 4.89; // throws "TypeError: Assignment to constant variable" 

另一方面，let聲明不需要初始值，我們可以多次重新分配其值。

// let 初始化是可選的 
let result; 
// let can be reassigned 
result = 14; 
result = result * 2; 

選擇變量的聲明類型時(shí)的一個(gè)好習(xí)慣是首選const，否則使用let。

function myBigFunction(param1, param2) { 
  /* lots of stuff... */ 
 
  const result = otherFunction(param1); 
 
  /* lots of stuff... */ 
  return something; 
} 

例如，如果我們正在查看函數(shù)體，并看到const result = ...聲明：

function myBigFunction(param1, param2) { 
  /* lots of stuff... */ 
 
  const result = otherFunction(param1); 
 
  /* lots of stuff... */ 
  return something; 
} 

不知道m(xù)yBigFunction()內(nèi)部會(huì)發(fā)生什么， 我們可以得出結(jié)論，result 變量只分配了一次，聲明之后是只讀的。

在其他情況下，如果必須在執(zhí)行過程中多次重新分配變量，則可以使用let聲明。

2.最小化變量的范圍

變量存在于它們所創(chuàng)建的作用域內(nèi)。代碼塊和函數(shù)體為const和let變量創(chuàng)建一個(gè)作用域。提高變量可讀性的一個(gè)好習(xí)慣是將變量保持在最小作用域內(nèi)。

例如，以下函數(shù)是二進(jìn)制搜索算法的實(shí)現(xiàn)：

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變量在函數(shù)體的開頭聲明。因此，這些變量在binarySearch()函數(shù)體創(chuàng)建的整個(gè)作用域內(nèi)都是可用的。

middle變量保留二進(jìn)制搜索的中間索引，而middleItem變量保留二進(jìn)制搜索的中間索引。

但是，middle和middleItem變量只在while循環(huán)代碼塊中使用。所以為什么不直接在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; 
} 

現(xiàn)在，middle和middleItem變量?jī)H存在于使用變量的作用域。他們的生命周期和生命周期極短，因此更容易推斷其作用。

3.在接近位置聲明變量

我強(qiáng)烈希望在函數(shù)主體的頂部聲明所有變量，尤其是在函數(shù)較大的情況下。不幸的是，這種做法的缺點(diǎn)是使我在函數(shù)中使用的意圖變量變得混亂。

盡量在接近使用位置的地方聲明變量。這樣，我們就不用猜了:嘿，我看到了這里聲明的變量，但是它在哪里被使用了。

假設(shè)我們有一個(gè)函數(shù)，該函數(shù)的主體中包含很多語句。我們可以在函數(shù)的開頭聲明并初始化變量結(jié)果，但是只能在return語句中使用result：

function myBigFunction(param1, param2) { 
  const result = otherFunction(param1); 
  let something; 
 
  /* 
   * calculate something...  
   */ 
 
  return something + result; 
} 

問題在于result 變量在開頭聲明，但僅在結(jié)尾使用，沒有足夠的理由在開始時(shí)聲明該變量。

讓我們通過將result 變量聲明移到return語句之前來改進(jìn)這個(gè)函數(shù)

function myBigFunction(param1, param2) { 
  let something; 
 
  /*  
   * calculate something...  
   */ 
 
  const result = otherFunction(param1); 
  return something + result; 
} 

現(xiàn)在，result變量在函數(shù)中有了它的正確位置。

4.好的命名意味著易于閱讀

從良好的變量命名的眾多規(guī)則中，我區(qū)分出兩個(gè)重要的規(guī)則。

第一個(gè)很簡(jiǎn)單：使用駝峰命名為變量取名，并且在命名所有變量時(shí)保持一致。

const message = 'Hello'; 
const isLoading = true; 
let count 

有特殊含義的數(shù)字或字符串，變量命名通常是大寫的，在單詞之間加下劃線，以區(qū)別于常規(guī)變量

const SECONDS_IN_MINUTE = 60; 
const GRAPHQL_URI = 'http://site.com/graphql'; 

第二條規(guī)則，在變量命名中，我認(rèn)為這是最重要的：變量名稱應(yīng)明確無歧義地指出哪些數(shù)據(jù)保存了該變量。

以下是一些很好的變量命名示例：

let message = 'Hello'; 
let isLoading = true; 
let count; 

message 名稱表示此變量包含某種消息，很可能是字符串。

isLoading相同，布爾值指示加載是否在進(jìn)行中。

count變量表示保存一些計(jì)數(shù)結(jié)果的數(shù)字類型變量。

選擇一個(gè)明確表明其角色的變量名。

舉個(gè)例子，這樣就能看出區(qū)別了。假設(shè)看到了這樣一個(gè)函數(shù):

function salary(ws, r) { 
  let t = 0; 
  for (w of ws) { 
    t += w * r; 
  } 
  return t; 
} 

你能總結(jié)出這個(gè)函數(shù)的作用嗎?像ws、r、t、w這樣的變量名幾乎沒有說明它們的意圖。

相反，相同的函數(shù)，但使用了解釋性變量命名

function calculateTotalSalary(weeksHours, ratePerHour) { 
  let totalSalary = 0; 
  for (const weekHours of weeksHours) { 
    const weeklySalary = weekHours * ratePerHour; 
    totalSalary += weeklySalary; 
  } 
  return totalSalary; 
} 

該代碼清楚地說明了它的作用。這就是良好命名的力量。

5. 引入中間變量

我比較少注釋代碼。我更喜歡編寫代碼即解釋的風(fēng)格，通過對(duì)變量、屬性、函數(shù)和類的良好命名來表達(dá)意圖。

編寫自文檔代碼的一個(gè)好習(xí)慣是引入中間變量。在處理長表達(dá)式時(shí)很有用。

考慮以下表達(dá)式：

const sum = val1 * val2 + val3 / val4; 

我們引入兩個(gè)中間變量，增強(qiáng)長表達(dá)式的可讀性:

const multiplication = val1 * val2; 
const division       = val3 / val4; 
 
const sum = multiplication + division; 

另外，讓我們回顧一下二進(jìn)制搜索實(shí)現(xiàn)算法：

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而不是直接使用項(xiàng)目訪問器array [middle]可讀性更好。

與缺少middleItem解釋變量的函數(shù)版本進(jìn)行比較:

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; 
} 

這個(gè)版本，沒有解釋變量，可讀性就比較差。

6. 總結(jié)

變量無處不在，我們總是先聲明，分配和使用變量。

在 JS 中使用變量時(shí)，第一個(gè)好的做法是使用const，否則使用let

試著保持變量的作用域盡可能小。同樣，將變量聲明往盡可能靠近使用位置。

不要低估好的命名的重要性。始終遵循這樣的規(guī)則:變量名應(yīng)該清晰而明確地表示保存變量的數(shù)據(jù)。不要害怕使用較長的名字:最好是清晰而不是簡(jiǎn)潔。

最后，少使用注釋，多寫寫代碼即的效果 。在高度復(fù)雜的地方，我更喜歡引入中間變量。

作者：Shadeed 譯者：前端小智 來源：dmitripavlutin原文：https://dmitripavlutin.com/javascript-variables-practices/

本文轉(zhuǎn)載自微信公眾號(hào)「大遷世界」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系大遷世界公眾號(hào)。