快捷導(dǎo)航

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

更新時間：2021年07月01日 10:05:02 作者：Axjy

在Js世界中有些操作會讓你無法理解，但是卻無比優(yōu)雅,下面這篇文章主要給大家介紹了關(guān)于如何讓你的JavaScript函數(shù)更加優(yōu)雅的相關(guān)資料,需要的朋友可以參考下

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

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

普通寫法

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

改寫

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

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

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

好的命名會使閱讀代碼更容易，回調(diào)函數(shù)的命名也是一樣。

普通寫法

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

改寫

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

分開命名,可以更好的一眼看出代碼的含義，如上：根據(jù)名字很明顯可以看出回調(diào)函數(shù)作用是用來加倍原始數(shù)組的每個元素的。

讓條件句具有描述性

對于復(fù)雜的條件判斷，我們可以單獨(dú)使用函數(shù)來表示，會讓條件語句更具描述性。

普通寫法

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

改寫

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

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

用 Map 或 Object替換 switch 語句

當(dāng)你的 switch語句很長時，就說明你應(yīng)該簡化你的代碼了

普通寫法

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

Object改寫

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

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

Map改寫

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

使用Map時，代碼也短很多。我們通過傳遞一個數(shù)組，數(shù)組中的每項包含鍵和值。然后，我們僅使用Map實例的get方法從鍵中獲取值。Map優(yōu)于對象的一個好處是，我們可以將數(shù)字，布爾值或?qū)ο蟮绕渌涤米麈I。而對象只能將字符串或symbol作為鍵。

使用 Object.assign 設(shè)置默認(rèn)屬性

普通寫法

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

改寫

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

刪除重復(fù)代碼，合并相似函數(shù)；刪除棄用代碼

不好的寫法

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

改寫

var paging = function( currPage ){
    if ( currPage <= 0 ){
        currPage = 0;
    }else if ( currPage >= totalPage ){
        currPage = totalPage;
    }
    jump( currPage );    // 把jump函數(shù)獨(dú)立出來
};

提煉函數(shù)

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

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

示例

比如在一個負(fù)責(zé)取得用戶信息的函數(shù)里面，我們還需要打印跟用戶信息有關(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 );
    });
};

改寫

我們可以把打印log的語句封裝在一個獨(dú)立的函數(shù)里。

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 Refactoring Tips — Making Functions Clearer and Cleaner《JavaScript設(shè)計模式與開發(fā)實踐》

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

Javascript中暫停功能的實現(xiàn)代碼
Javascript中暫停功能的實現(xiàn)代碼...
2007-03-03
全面解析JS字符串和正則表達(dá)式中的match、replace、exec等函數(shù)
這篇文章主要介紹了全面解析JS字符串和正則表達(dá)式中的match、replace、exec等函數(shù)的相關(guān)資料,需要的朋友可以參考下
2016-07-07
淺談JavaScript字符串與數(shù)組
本文給大家簡單介紹了下javascript中的字符串和數(shù)組，都是些十分基礎(chǔ)的知識，小伙伴們要學(xué)好javascript，一定要把這2點理解清楚。
2015-06-06
echarts自定義legend樣式的詳細(xì)圖文教程
在默認(rèn)的餅狀圖里面,圖例legend顏色是黑色的,有時候根據(jù)ui需要,根據(jù)不同的背景色,下面這篇文章主要給大家介紹了關(guān)于echarts自定義legend樣式的相關(guān)資料,需要的朋友可以參考下
2022-10-10
JavaScript空數(shù)組的every()方法實踐
every()方法用于檢測數(shù)組中的所有元素是否都滿足指定條件, 本文主要介紹了JavaScript空數(shù)組的every()方法實踐,具有一定的參考價值,感興趣的可以了解一下
2024-03-03
詳解如何在JavaScript中自定義事件
在 JavaScript 中,事件是非常核心的概念,它們使得我們可以設(shè)計交互性強(qiáng)的網(wǎng)頁應(yīng)用,本文主要和來大家聊聊如何在JavaScript中自定義事件,感興趣的可以了解下
2024-04-04
layui使用form表單實現(xiàn)post請求頁面跳轉(zhuǎn)的方法
今天小編就為大家分享一篇layui使用form表單實現(xiàn)post請求頁面跳轉(zhuǎn)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
這篇文章主要介紹了原生js和jquery分別實現(xiàn)橫向?qū)Ш讲藛涡Ч南嚓P(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-05-05