在 JavaScript 中正確處理變量

時間 2020-12-25

標籤 javascript 前端 java 程序員面試算法 segmentfault 服務器微信多線程欄目 JavaScript 简体版

原文原文鏈接

變量無處不在。即使咱們寫一個小函數或一個小工具，也要聲明、賦值和讀取變量。加強對變量的重視，能夠提升代碼的可讀性和可維護性。javascript

1.建議使用 const，要麼使用 let

用 const 或 let 聲明本身的 JavaScript 變量。二者之間的主要區別是 const 變量在聲明時須要初始化，而且一旦初始化就沒法再從新賦值。前端

// const 須要初始化
const pi = 3.14;
// const 不能被從新賦值
pi = 4.89; 
// throws "TypeError: Assignment to constant variable"

let 聲明不須要對值初始化，能夠屢次從新賦值。java

// 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 變量是隻讀的。segmentfault

在其餘狀況下，若是必須在代碼執行過程當中屢次從新對變量賦值，那就用 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 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;
}

沒有中間變量的解釋，這個版本稍微不太好理解。

經過使用中間變量用代碼解釋代碼。中間變量可能會增長一些語句，但出於加強代碼可讀性的目的仍是很是值得的的。