編寫高質(zhì)量JS變量的優(yōu)秀做法有哪些

本篇內(nèi)容主要講解“編寫高質(zhì)量JS變量的優(yōu)秀做法有哪些”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“編寫高質(zhì)量JS變量的優(yōu)秀做法有哪些”吧!

1.首選 const，再  let

我使用const或let聲明變量，兩者之間的主要區(qū)別是const變量需要一個(gè)初始值，并且一旦初始化就無(wú)法重新分配其值。

另一方面，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;

選擇變量的聲明類型時(shí)的一個(gè)好習(xí)慣是首選const，否則使用let。

function myBigFunction(param1, param2) {   /* lots of stuff... */    const result = otherFunction(param1);    /* lots of stuff... */   return something; }

例如，如果我們正在查看函數(shù)體，并看到const result = ...聲明：

function myBigFunction(param1, param2) {   /* lots of stuff... */    const result = otherFunction(param1);    /* lots of stuff... */   return something; }

不知道m(xù)yBigFunction()內(nèi)部會(huì)發(fā)生什么， 我們可以得出結(jié)論，result 變量只分配了一次，聲明之后是只讀的。

在其他情況下，如果必須在執(zhí)行過(guò)程中多次重新分配變量，則可以使用let聲明。

2.最小化變量的范圍

變量存在于它們所創(chuàng)建的作用域內(nèi)。代碼塊和函數(shù)體為const和let變量創(chuàng)建一個(gè)作用域。提高變量可讀性的一個(gè)好習(xí)慣是將變量保持在最小作用域內(nèi)。

例如，以下函數(shù)是二進(jìn)制搜索算法的實(shí)現(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ù)體的開(kāi)頭聲明。因此，這些變量在binarySearch()函數(shù)體創(chuàng)建的整個(gè)作用域內(nèi)都是可用的。

middle變量保留二進(jìn)制搜索的中間索引，而middleItem變量保留二進(jìn)制搜索的中間索引。

但是，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變量?jī)H存在于使用變量的作用域。他們的生命周期和生命周期極短，因此更容易推斷其作用。

3.在接近位置聲明變量

我強(qiáng)烈希望在函數(shù)主體的頂部聲明所有變量，尤其是在函數(shù)較大的情況下。不幸的是，這種做法的缺點(diǎn)是使我在函數(shù)中使用的意圖變量變得混亂。

盡量在接近使用位置的地方聲明變量。這樣，我們就不用猜了:嘿，我看到了這里聲明的變量，但是它在哪里被使用了。

假設(shè)我們有一個(gè)函數(shù)，該函數(shù)的主體中包含很多語(yǔ)句。我們可以在函數(shù)的開(kāi)頭聲明并初始化變量結(jié)果，但是只能在return語(yǔ)句中使用result：

function myBigFunction(param1, param2) {   const result = otherFunction(param1);   let something;    /*    * calculate something...     */    return something + result; }

問(wèn)題在于result 變量在開(kāi)頭聲明，但僅在結(jié)尾使用，沒(méi)有足夠的理由在開(kāi)始時(shí)聲明該變量。

讓我們通過(guò)將result 變量聲明移到return語(yǔ)句之前來(lái)改進(jìn)這個(gè)函數(shù)

function myBigFunction(param1, param2) {   let something;    /*     * calculate something...     */    const result = otherFunction(param1);   return something + result; }

現(xiàn)在，result變量在函數(shù)中有了它的正確位置。

4.好的命名意味著易于閱讀

從良好的變量命名的眾多規(guī)則中，我區(qū)分出兩個(gè)重要的規(guī)則。

第一個(gè)很簡(jiǎn)單：使用駝峰命名為變量取名，并且在命名所有變量時(shí)保持一致。

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

有特殊含義的數(shù)字或字符串，變量命名通常是大寫的，在單詞之間加下劃線，以區(qū)別于常規(guī)變量

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

第二條規(guī)則，在變量命名中，我認(rèn)為這是最重要的：變量名稱應(yīng)明確無(wú)歧義地指出哪些數(shù)據(jù)保存了該變量。

以下是一些很好的變量命名示例：

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

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

isLoading相同，布爾值指示加載是否在進(jìn)行中。

count變量表示保存一些計(jì)數(shù)結(jié)果的數(shù)字類型變量。

選擇一個(gè)明確表明其角色的變量名。

舉個(gè)例子，這樣就能看出區(qū)別了。假設(shè)看到了這樣一個(gè)函數(shù):

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

你能總結(jié)出這個(gè)函數(shù)的作用嗎?像ws、r、t、w這樣的變量名幾乎沒(méi)有說(shuō)明它們的意圖。

相反，相同的函數(shù)，但使用了解釋性變量命名

function calculateTotalSalary(weeksHours, ratePerHour) {   let totalSalary = 0;   for (const weekHours of weeksHours) {     const weeklySalary = weekHours * ratePerHour;     totalSalary += weeklySalary;   }   return totalSalary; }

該代碼清楚地說(shuō)明了它的作用。這就是良好命名的力量。

5. 引入中間變量

我比較少注釋代碼。我更喜歡編寫代碼即解釋的風(fēng)格，通過(guò)對(duì)變量、屬性、函數(shù)和類的良好命名來(lái)表達(dá)意圖。

編寫自文檔代碼的一個(gè)好習(xí)慣是引入中間變量。在處理長(zhǎng)表達(dá)式時(shí)很有用。

考慮以下表達(dá)式：

const sum = val1 * val2 + val3 / val4;

我們引入兩個(gè)中間變量，增強(qiáng)長(zhǎng)表達(dá)式的可讀性:

const multiplication = val1 * val2; const division       = val3 / val4;  const sum = multiplication + division;

另外，讓我們回顧一下二進(jìn)制搜索實(shí)現(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是一個(gè)保存中間項(xiàng)目的中間變量。使用中間變量MiddleItem而不是直接使用項(xiàng)目訪問(wèn)器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; }

這個(gè)版本，沒(méi)有解釋變量，可讀性就比較差。

到此，相信大家對(duì)“編寫高質(zhì)量JS變量的優(yōu)秀做法有哪些”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！