編寫高質量 JS 變量的5種最佳作法

做者：Shadeed
譯者：前端小智
來源：dmitripavlutin

點贊再看，微信搜索 【大遷世界】關注這個沒有大廠背景，但有着一股向上積極心態人。本文 GitHub https://github.com/qq44924588... 上已經收錄，文章的已分類，也整理了不少個人文檔，和教程資料。

最近開源了一個 Vue 組件，還不夠完善，歡迎你們來一塊兒完善它，也但願你們能給個 star 支持一下，謝謝各位了。

github 地址：https://github.com/qq44924588...

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

在本文中，主要介紹 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

試着保持變量的做用域儘量小。一樣，將變量聲明往儘量靠近使用位置。

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

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

---

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文：https://dmitripavlutin.com/ja...

交流

文章每週持續更新，能夠微信搜索「 大遷世界 」第一時間閱讀和催更（比博客早一到兩篇喲），本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，整理了不少個人文檔，歡迎Star和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。