如何讓你的JavaScript函數更加優(yōu)雅詳解

目錄

準備寫(xiě)一個(gè)js技巧系列，主要就是總結js各種實(shí)用的小竅門(mén)、小妙招。本文主要是研究如何讓我們的函數更清晰明了。

對象參數使用解構

如果希望函數接收很多參數（如果超過(guò)兩個(gè)），那么就應該使用對象。在此基礎上，可以使用解構語(yǔ)法提取需要的參數。

普通寫(xiě)法

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

改寫(xiě)

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

使用解構方式會(huì )更優(yōu)雅,并且我們還可以少寫(xiě)很多重復的東西，命名也會(huì )更加清晰。

命名回調函數

好的命名會(huì )使閱讀代碼更容易，回調函數的命名也是一樣。

普通寫(xiě)法

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

改寫(xiě)

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

分開(kāi)命名,可以更好的一眼看出代碼的含義，如上：根據名字很明顯可以看出回調函數作用是用來(lái)加倍原始數組的每個(gè)元素的。

讓條件句具有描述性

對于復雜的條件判斷，我們可以單獨使用函數來(lái)表示，會(huì )讓條件語(yǔ)句更具描述性。

普通寫(xiě)法

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

改寫(xiě)

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

按原來(lái)的寫(xiě)法，我們有很長(cháng)的表達式在括號里面，但是不太好看出它在判斷的是什么。改寫(xiě)之后，我們把它放在一個(gè)命名函數中，根據名字我們就能大概看出表達的意思。

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

當你的 switch語(yǔ)句很長(cháng)時(shí)，就說(shuō)明你應該簡(jiǎn)化你的代碼了

普通寫(xiě)法

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

Object改寫(xiě)

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

我們使用switch嵌套多個(gè)帶有多個(gè)return語(yǔ)句的塊，只是為了獲得給定prop值的返回值時(shí)，我們僅僅使用一個(gè)對象也可以實(shí)現同樣的效果。

Map改寫(xiě)

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

使用Map時(shí)，代碼也短很多。我們通過(guò)傳遞一個(gè)數組，數組中的每項包含鍵和值。然后，我們僅使用Map實(shí)例的get方法從鍵中獲取值。Map優(yōu)于對象的一個(gè)好處是，我們可以將數字，布爾值或對象等其他值用作鍵。而對象只能將字符串或symbol作為鍵。

使用 Object.assign 設置默認屬性

普通寫(xiě)法

const menuConfig = {
  title: null,
  body: 'Bar'
};
function createMenu(config) {
  config.title = config.title || 'Foo';
  config.body = config.body || 'Bar';
}
createMenu(menuConfig);

改寫(xiě)

const menuConfig = {
  title: 'Order',
  body: 'Send'
};
function createMenu(config) {
  config = Object.assign({
    title: 'Foo',
    body: 'Bar'
  }, config);
  // config : {title: "Order", body: "Bar"}
  // ...
}
createMenu(menuConfig);

刪除重復代碼，合并相似函數；刪除棄用代碼

不好的寫(xiě)法

var paging = function( currPage ){
    if ( currPage <= 0 ){
        currPage = 0;
        jump( currPage );    // 跳轉
    }else if ( currPage >= totalPage ){
        currPage = totalPage;
        jump( currPage );    // 跳轉
    }else{
        jump( currPage );    // 跳轉
    }
};

改寫(xiě)

var paging = function( currPage ){
    if ( currPage <= 0 ){
        currPage = 0;
    }else if ( currPage >= totalPage ){
        currPage = totalPage;
    }
    jump( currPage );    // 把jump函數獨立出來(lái)
};

提煉函數

如果一個(gè)函數過(guò)長(cháng)，不得不加上若干注釋才能讓這個(gè)函數顯得易讀一些，那這些函數就很有必要進(jìn)行重構。

如果在函數中有一段代碼可以被獨立出來(lái)，那我們最好把這些代碼放進(jìn)另外一個(gè)獨立的函數。

示例

比如在一個(gè)負責取得用戶(hù)信息的函數里面，我們還需要打印跟用戶(hù)信息有關(guān)的log

var getUserInfo = function(){
    ajax( 'http:// xxx.com/userInfo', function( data ){
        console.log( 'userId: ' + data.userId );
        console.log( 'userName: ' + data.userName );
        console.log( 'nickName: ' + data.nickName );
    });
};

改寫(xiě)

我們可以把打印log的語(yǔ)句封裝在一個(gè)獨立的函數里。

var getUserInfo = function(){
    ajax( 'http:// xxx.com/userInfo', function( data ){
        printDetails( data );
    });
};

var printDetails = function( data ){
    console.log( 'userId: ' + data.userId );
    console.log( 'userName: ' + data.userName );
    console.log( 'nickName: ' + data.nickName );
};

引用參考：《JavaScript設計模式與開(kāi)發(fā)實(shí)踐》

總結

到此這篇關(guān)于如何讓你的JavaScript函數更加優(yōu)雅的文章就介紹到這了,更多相關(guān)JavaScript函數優(yōu)雅內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！