這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)JavaScript重構(gòu)技巧中如何讓函數(shù)簡(jiǎn)單明了，文章內(nèi)容豐富且以專(zhuān)業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都做網(wǎng)站、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿(mǎn)足客戶(hù)于互聯(lián)網(wǎng)時(shí)代的嵐山網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

本文轉(zhuǎn)載自微信公眾號(hào)「大遷世界」，轉(zhuǎn)載本文請(qǐng)聯(lián)系大遷世界公眾號(hào)。

JavaScript 是一種易于學(xué)習(xí)的編程語(yǔ)言，編寫(xiě)運(yùn)行并執(zhí)行某些操作的程序很容易。然而，要編寫(xiě)一段干凈的JavaScript 代碼是很困難的。

對(duì)對(duì)象參數(shù)使用解構(gòu)

如果我們希望函數(shù)接收很多參數(shù)，那么應(yīng)該使用對(duì)象。在此基礎(chǔ)上，我們就可以使用解構(gòu)語(yǔ)法提取我們需要的參數(shù)。

例如，對(duì)于對(duì)象參數(shù)，我們可能會(huì)這樣使用：

const greet = (obj) => {   return `${obj.greeting}, ${obj.firstName}${obj.lastName}`; }

上面的語(yǔ)法，我們可以使用解構(gòu)方式會(huì)更優(yōu)雅：

const greet = ({   greeting,   firstName,   lastName }) => {   return `${greeting}, ${firstName}${lastName}`; }

這樣我們可以少寫(xiě)很多重復(fù)的東西，命名也會(huì)更加清晰。

命名回調(diào)函數(shù)

好的命名會(huì)使閱讀代碼更容易，回調(diào)函數(shù)的命名也是一樣的，例如下面不好的命名方式：

const arr = [1, 2, 3].map(a => a * 2);

我們可以這樣分開(kāi)命名：

const double = a => a * 2; if (score === 100 ||   remainingPlayers === 1 ||   remainingPlayers === 0) {   quitGame(); } const arr = [1, 2, 3].map(double);

現(xiàn)在我們知道我們的回調(diào)函數(shù)實(shí)際上是用來(lái)加倍原始數(shù)組的每個(gè)元素的。

讓條件句具有描述性

通過(guò)在自己的函數(shù)的條件語(yǔ)句中編寫(xiě)條件表達(dá)式，可以使條件語(yǔ)句更具描述性。

對(duì)于復(fù)雜的條件判斷， 我們可以單獨(dú)使用函數(shù)來(lái)表示，會(huì)讓條件語(yǔ)句更具描述性，例如下面代碼：

if (score === 100 ||   remainingPlayers === 1 ||   remainingPlayers === 0) {   quitGame(); }

當(dāng)條件多時(shí)，我們可以用函數(shù)來(lái)表示：

const winnerExists = () => {   return score === 100 ||     remainingPlayers === 1 ||     remainingPlayers === 0 } if (winnerExists()) {   quitGame(); }

這樣，我們就知道這些條件是檢查游戲代碼中是否存在贏家的條件。

在第一個(gè)例子中，我們有一個(gè)很長(zhǎng)的表達(dá)式在括號(hào)里，大多數(shù)人可能不知道它在判斷什么。但在第二個(gè)例子中，一旦我們把它放到一個(gè)命名函數(shù)中，我們就知道它大概在判斷什么了。

在條件語(yǔ)句中擁有一個(gè)命名函數(shù)比在擁有一堆布爾表達(dá)式要清晰得多。

用 Map 或 Object替換 switch 語(yǔ)句

由于  switch語(yǔ)句很長(zhǎng)，這樣容易出錯(cuò)。因此，如果可以的話(huà)，我們應(yīng)該用較短的代碼代替它們。許多switch語(yǔ)句可以用map或object替換。例如，如果我們有下面的switch語(yǔ)句:

const getValue = (prop) => {   switch (prop) {     case 'a': {       return 1;     }     case 'b': {       return 2;     }     case 'c': {       return 3;     }   } } const val = getValue('a');

我們可以將其替換為object或map，如下所示：

const obj = {   a: 1,   b: 2,   c: 3 } const val = obj['a'];

如我們所見(jiàn)，switch 語(yǔ)法很長(zhǎng)。我們需要嵌套多個(gè)帶有多個(gè)return語(yǔ)句的塊，只是為了獲得給定prop值的返回值。

相反使用對(duì)象，我們僅僅需要一個(gè)對(duì)象就可以了：

const obj = {   a: 1,   b: 2,   c: 3 }

使用對(duì)象還有一個(gè)好處，就是對(duì)于鍵不必是有效的標(biāo)識(shí)符號(hào)，這樣這增加了更多的靈活性。

我們還可以使用map替換對(duì)象，如下所示：

const map = new Map([['a', 1], ['b', 2], ['c', 3]]) const val = map.get('a')

如我們所見(jiàn)，使用Map時(shí)，代碼也短很多。我們通過(guò)傳遞一個(gè)數(shù)組，數(shù)組中的每項(xiàng)包含鍵和值。然后，我們僅使用Map實(shí)例的get方法從鍵中獲取值。

Map優(yōu)于對(duì)象的一個(gè)好處是，我們可以將數(shù)字，布爾值或?qū)ο蟮绕渌涤米麈I。而對(duì)象只能將字符串或symbol作為鍵。

使用解構(gòu)語(yǔ)法可以使對(duì)象參數(shù)更清楚，更短。這樣，可以選擇性地將屬性作為變量進(jìn)行訪(fǎng)問(wèn)。

通過(guò)將條件表達(dá)式放在它自己的命名函數(shù)中，可以使條件表達(dá)式更具描述性。同樣，我們應(yīng)該為回調(diào)函數(shù)命名，以便更容易地讀取代碼。

最后，應(yīng)該盡可能用Map和Object替換switch語(yǔ)句。

上述就是小編為大家分享的JavaScript重構(gòu)技巧中如何讓函數(shù)簡(jiǎn)單明了了，如果剛好有類(lèi)似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。