[[373383]]

本文已經原作者Shadeed 授權翻譯。

變量無處不在，即使我們在寫一個小的函數，或者一個應用程序:我們總是先聲明，分配和使用變量。編寫好的變量可提高代碼的可讀性和易維護性。

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

1.首選 const，再 let

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

另一方面，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; 

選擇變量的聲明類型時的一個好習慣是首選const，否則使用let。

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

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

function myBigFunction(param1, param2) { 
  /* lots of stuff... */ 
 
  const result = otherFunction(param1); 
 
  /* lots of stuff... */ 
  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.在接近位置聲明變量

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

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

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

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

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

讓我們通過將result 變量聲明移到return語句之前來改進這個函數

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

現在，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 division       = val3 / val4; 
 
const sum = multiplication + division; 

另外，讓我們回顧一下二進制搜索實現算法：

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

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

6. 總結

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

在 JS 中使用變量時，第一個好的做法是使用const，否則使用let

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

不要低估好的命名的重要性。始終遵循這樣的規則:變量名應該清晰而明確地表示保存變量的數據。不要害怕使用較長的名字:最好是清晰而不是簡潔。

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

 

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

本文轉載自微信公眾號「大遷世界」，可以通過以下二維碼關注。轉載本文請聯系大遷世界公眾號。