小編給大家分享一下JavaScript中正確處理變量的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

公司主營業(yè)務(wù)：網(wǎng)站建設(shè)、網(wǎng)站制作、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊有機(jī)會用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)推出文安免費做網(wǎng)站回饋大家。

變量無處不在。即便我們寫一個小函數(shù)或一個小工具，也要聲明、賦值和讀取變量。增強(qiáng)對變量的重視，可以提高代碼的可讀性和可維護(hù)性。

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

用 const 或 let 聲明自己的 JavaScript 變量。兩者之間的主要區(qū)別是 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 變量的推測比較容易。

聲明變量時優(yōu)先使用 const，然后是 let 。

假設(shè)你正在 review 一個函數(shù)，并看到一個 const result = ... 聲明：

function myBigFunction(param1, param2) {
  /* 一寫代碼... */

  const result = otherFunction(param1);
  /* 一些代碼... */
  return something;
}

雖然不知道  myBigFunction() 中做了些什么，但是我們可以得出結(jié)論，result 變量是只讀的。

在其他情況下，如果必須在代碼執(zhí)行過程中多次重新對變量賦值，那就用 let。

2. 使變量的作用域最小化

變量位于創(chuàng)建它的作用域中。代碼塊和函數(shù)體為 const 和 let 變量創(chuàng)建作用域。

把變量保持在最小作用域中是提高可讀性的一個好習(xí)慣。

例如下面的二分查找算法的實現(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ù)的整個作用域內(nèi)可用。變量 middle 用來保存二叉搜索的中間索引，而變量 middleItem 保存中間的搜索項。

但是 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 只存在于使用變量的作用域內(nèi)。他們的生命周期極短，所以更容易推斷它們的用途。

3. 易于使用

我總是習(xí)慣于在函數(shù)開始的時候去聲明所有變量，尤其是在寫一些比較大的函數(shù)時。但是這樣做會使我在函數(shù)中使用變量的意圖變得非?；靵y。

所以應(yīng)該在變量聲明時應(yīng)該盡可能靠的近使用位置。這樣你就不必去猜：哦，這里聲明了變量，但是…它被用在什么地方呢？

假設(shè)有一個函數(shù)，在函數(shù)有包含很多語句。你可以在函數(shù)的開頭聲明并初始化變量 result，但是只在 return 語句中使用了 result：

function myBigFunction(param1, param2) {
  const result = otherFunction(param1);  
  let something;

  /*
   * 一些代碼...
   */

  return something + result;}

問題在于 result 變量在開頭聲明，卻只在結(jié)尾用到。我們并沒有充分的理由在開始的時后就聲明這個變量。

所以為了更好地理解 result 變量的功能和作用，要始終使變量聲明盡可能的靠近使用它位置。

如果把代碼改成這樣：

function myBigFunction(param1, param2) {
  let something;

  /* 
   * 一些代碼... 
   */

  const result = otherFunction(param1);  
  return something + result;}

現(xiàn)在是不是就清晰多了。

4. 合理的命名

你可能已經(jīng)知道了很多關(guān)于變量命名的知識，所以在這里不會展開說明。不過在眾多的命名規(guī)則中，我總結(jié)出了兩個重要的原則：

第一個很簡單：使用駝峰命名法，并終如一地保持這種風(fēng)格。

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

這個規(guī)則的一個例外是一些特定的值：比如數(shù)字或具有特殊含義的字符串。包特定值的變量通常用大寫加下劃線的形式，與常規(guī)變量區(qū)分開：

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

我認(rèn)為第二條是：變量名稱應(yīng)該清楚無誤地表明是用來保存哪些數(shù)據(jù)的。

下面是一些很好的例子：

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

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

isLoading 也一樣，是一個布爾值，用來指示是否正在進(jìn)行加載。

毫無疑問，count 變量表示一個數(shù)字類型的變量，其中包含一些計數(shù)結(jié)果。

一定要選一個能夠清楚表明其作用的變量名。

看一個例子，假設(shè)你看到了下面這樣的代碼：

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

你能很容易知道函數(shù)的作用嗎？與薪水的計算有關(guān)？非常不幸，我們很難看出 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.采用中間變量

我一般盡可能避免寫注釋，更喜歡寫出能夠自我描述的代碼，通過對變量、屬性、函數(shù)、類等進(jìn)行合理的命名來表達(dá)代碼的意圖。

如果想使代碼本身稱為文檔，一個好習(xí)慣是引入中間變量，這在在處理長表達(dá)式時很好用。

比如下面的表達(dá)式：

const sum = val1 * val2 + val3 / val4;

可以通過引入兩個中間變量來提高長表達(dá)式的可讀性：

const multiplication = val1 * val2;
const pision       = val3 / val4;

const sum = multiplication + pision;

再回顧一下前面的二叉搜索算法實現(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 就是一個中間變量，用于保存中間項。使用中間變量 middleItem 比直接用 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;
}

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

通過使用中間變量用代碼解釋代碼。中間變量可能會增加一些語句，但出于增強(qiáng)代碼可讀性的目的還是非常值得的的。

• 變量無處不在。在 JavaScript 中使用變量時，首選 const，其次是 let。

• 盡可能縮小變量的作用域。同樣，聲明變量時要盡可能靠近其使用位置。

• 合理的命名是非常重要的。要遵循以下規(guī)則：變量名稱應(yīng)該清楚無誤地表明是用來保存哪些數(shù)據(jù)的。不要害怕使用更長的變量名：要追求清晰而不是簡短。

• 最后，最好用代碼自己來解釋代碼。在高度復(fù)雜的地方，我更喜歡引入中間變量。

以上是“JavaScript中正確處理變量的方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！