學習在 JavaScript 中正確處理變數

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 宣告不需要對值初始化，可以多次重新賦值。

// 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 變數是唯讀的。

在其他情況下，如果必須在程式碼執行過程中多次重新對變數賦值，那就用 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 pision       = val3 / val4;

const sum = multiplication + pision;

再回顾一下前面的二叉搜索算法实现：

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

没有中间变量的解释，这个版本稍微不太好理解。

通过使用中间变量用代码解释代码。中间变量可能会增加一些语句，但出于增强代码可读性的目的还是非常值得的的。

总结

• 变量无处不在。在 JavaScript 中使用变量时，首选 const，其次是 let。
• 尽可能缩小变量的作用域。同样，声明变量时要尽可能靠近其使用位置。
• 合理的命名是非常重要的。要遵循以下规则：变量名称应该清楚无误地表明是用来保存哪些数据的。不要害怕使用更长的变量名：要追求清晰而不是简短。
• 最后，最好用代码自己来解释代码。在高度复杂的地方，我更喜欢引入中间变量。

以上是學習在 JavaScript 中正確處理變數的詳細內容。更多資訊請關注PHP中文網其他相關文章！