如何讓你的JavaScript函數更加優(yōu)雅詳解
準備寫一個js技巧系列，主要就是總結js各種實用的小竅門、小妙招。本文主要是研究如何讓我們的函數更清晰明了。
對象參數使用解構
如果希望函數接收很多參數（如果超過兩個），那么就應該使用對象。在此基礎上，可以使用解構語法提取需要的參數。
普通寫法
const greet = (obj) => {
return `${obj.greeting}, ${obj.firstName}${obj.lastName}`;
}
改寫
const greet = ({
greeting,
firstName,
lastName
}) => {
return `${greeting}, ${firstName}${lastName}`;
}
使用解構方式會更優(yōu)雅,并且我們還可以少寫很多重復的東西，命名也會更加清晰。
命名回調函數
好的命名會使閱讀代碼更容易，回調函數的命名也是一樣。
普通寫法
const arr = [1, 2, 3].map(a => a * 2);
改寫
const double = a => a * 2; 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語句很長時，就說明你應該簡化你的代碼了
普通寫法
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時，代碼也短很多。我們通過傳遞一個數組，數組中的每項包含鍵和值。然后，我們僅使用Map實例的get方法從鍵中獲取值。Map優(yōu)于對象的一個好處是，我們可以將數字，布爾值或對象等其他值用作鍵。而對象只能將字符串或symbol作為鍵。
使用 Object.assign 設置默認屬性
普通寫法
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);
刪除重復代碼，合并相似函數；刪除棄用代碼
不好的寫法
var paging = function( currPage ){
if ( currPage <= 0 ){
currPage = 0;
jump( currPage ); // 跳轉
}else if ( currPage >= totalPage ){
currPage = totalPage;
jump( currPage ); // 跳轉
}else{
jump( currPage ); // 跳轉
}
};
改寫
var paging = function( currPage ){
if ( currPage <= 0 ){
currPage = 0;
}else if ( currPage >= totalPage ){
currPage = totalPage;
}
jump( currPage ); // 把jump函數獨立出來
};
提煉函數
如果一個函數過長，不得不加上若干注釋才能讓這個函數顯得易讀一些，那這些函數就很有必要進行重構。
如果在函數中有一段代碼可以被獨立出來，那我們最好把這些代碼放進另外一個獨立的函數。
示例
比如在一個負責取得用戶信息的函數里面，我們還需要打印跟用戶信息有關的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的語句封裝在一個獨立的函數里。
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設計模式與開發(fā)實踐》
總結
到此這篇關于如何讓你的JavaScript函數更加優(yōu)雅的文章就介紹到這了,更多相關JavaScript函數優(yōu)雅內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了Vuex模塊化應用實踐示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-02-02![有關JS中的0,null,undefined,[],{},'''''''''''''''',false之間的關系](http://img.jbzj.com/images/xgimg/bcimg1.png)
有關JS中的0,null,undefined,[],{},'''''''''''''''',false之間的關系
這篇文章主要介紹了有關JS中的0,null,undefined,[],{},'',false之間的關系,需要的朋友可以參考下2017-02-02
這篇文章介紹了JS在Canvas元素內繪制鐘表的方法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-01-01
這篇文章主要給大家介紹了關于如何使用原生javascript開發(fā)計算器的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-02-02
這篇文章主要介紹了微信小程序利用for循環(huán)解決內容變更問題 ，本文分步驟通過實例代碼詳解給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-03
這篇文章主要介紹了JS利用prototype給類添加方法操作,結合實例形式分析了javascript使用prototype實現(xiàn)給類添加方法的相關操作技巧,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了在JS中如何解析HTML字符串,需要的朋友可以參考下2014-04-04
這篇文章主要介紹了javascript笛卡爾積算法實現(xiàn)方法,實例分析了笛卡爾積算法的javascript實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-04-04
這篇文章主要為大家詳細介紹了javascript實現(xiàn)隨機抽獎功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要介紹了JavaScript實現(xiàn)同時調用多個函數的方法,以一個簡單實例分析了JavaScript同時調用兩個函數的實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11