這期內容當中小編將會給大家帶來有關JavaScript重構技巧中如何讓函數簡單明了，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創新互聯公司堅持“要么做到，要么別承諾”的工作理念，服務領域包括：成都做網站、成都網站制作、企業官網、英文網站、手機端網站、網站推廣等服務，滿足客戶于互聯網時代的嵐山網站設計、移動媒體設計的需求，幫助企業找到有效的互聯網解決方案。努力成為您成熟可靠的網絡建設合作伙伴！

本文轉載自微信公眾號「大遷世界」，轉載本文請聯系大遷世界公眾號。

JavaScript 是一種易于學習的編程語言，編寫運行并執行某些操作的程序很容易。然而，要編寫一段干凈的JavaScript 代碼是很困難的。

對對象參數使用解構

如果我們希望函數接收很多參數，那么應該使用對象。在此基礎上，我們就可以使用解構語法提取我們需要的參數。

例如，對于對象參數，我們可能會這樣使用：

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

上面的語法，我們可以使用解構方式會更優雅：

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

這樣我們可以少寫很多重復的東西，命名也會更加清晰。

命名回調函數

好的命名會使閱讀代碼更容易，回調函數的命名也是一樣的，例如下面不好的命名方式：

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

我們可以這樣分開命名：

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

現在我們知道我們的回調函數實際上是用來加倍原始數組的每個元素的。

讓條件句具有描述性

通過在自己的函數的條件語句中編寫條件表達式，可以使條件語句更具描述性。

對于復雜的條件判斷， 我們可以單獨使用函數來表示，會讓條件語句更具描述性，例如下面代碼：

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

當條件多時，我們可以用函數來表示：

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

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

在第一個例子中，我們有一個很長的表達式在括號里，大多數人可能不知道它在判斷什么。但在第二個例子中，一旦我們把它放到一個命名函數中，我們就知道它大概在判斷什么了。

在條件語句中擁有一個命名函數比在擁有一堆布爾表達式要清晰得多。

用 Map 或 Object替換 switch 語句

由于  switch語句很長，這樣容易出錯。因此，如果可以的話，我們應該用較短的代碼代替它們。許多switch語句可以用map或object替換。例如，如果我們有下面的switch語句:

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'];

如我們所見，switch 語法很長。我們需要嵌套多個帶有多個return語句的塊，只是為了獲得給定prop值的返回值。

相反使用對象，我們僅僅需要一個對象就可以了：

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

使用對象還有一個好處，就是對于鍵不必是有效的標識符號，這樣這增加了更多的靈活性。

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

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

如我們所見，使用Map時，代碼也短很多。我們通過傳遞一個數組，數組中的每項包含鍵和值。然后，我們僅使用Map實例的get方法從鍵中獲取值。

Map優于對象的一個好處是，我們可以將數字，布爾值或對象等其他值用作鍵。而對象只能將字符串或symbol作為鍵。

使用解構語法可以使對象參數更清楚，更短。這樣，可以選擇性地將屬性作為變量進行訪問。

通過將條件表達式放在它自己的命名函數中，可以使條件表達式更具描述性。同樣，我們應該為回調函數命名，以便更容易地讀取代碼。

最后，應該盡可能用Map和Object替換switch語句。

上述就是小編為大家分享的JavaScript重構技巧中如何讓函數簡單明了了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注創新互聯行業資訊頻道。

網頁名稱：JavaScript重構技巧中如何讓函數簡單明了
文章轉載：http://vcdvsql.cn/article14/gjsige.html

成都網站建設公司_創新互聯，為您提供網站設計公司、虛擬主機、微信小程序、關鍵詞優化、App開發、網站制作

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯