編寫高質量JS變量的優秀做法有哪些

本篇內容主要講解“編寫高質量JS變量的優秀做法有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“編寫高質量JS變量的優秀做法有哪些”吧!

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

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

到此，相信大家對“編寫高質量JS變量的優秀做法有哪些”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！