如何讓你的JavaScript函式更加優雅詳解
目錄
- 物件引數使用解構
- 命名回撥函式
- 讓條件句具有描述性
- 用 Map 或 Object替換 switch 語句
- 使用 Object.assign 設定預設屬性
- 刪除重複程式碼，合併相似函式；刪除棄用程式碼
- 提煉函式
- 總結
準備寫一個技巧系列，主要就是總結js各種實用的小竅門、小妙招。本文主要是研究如何讓我們的函式更清晰明瞭。
物件引數使用解構
如果希望函式接收很多引數（如果超過兩個），那麼就應該使用物件。在此基礎上，可以使用解構語法提取需要的引數。
普通寫法
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; const arr = [1,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) => {
switchwww.cppcns.com (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值的返回值時，我們僅僅使用一個物件也可以實現同樣的效果。
Map改寫
const map = new Map([['a',1],['b',2],['c',3]])
const val = map.get('a')
使用Map時，程式碼也短很多。我們通過傳遞一個數組，陣列中的每項包含鍵和值。然後，我們僅使用Map例項的get方法從鍵中獲取值。Map優於物件的一個好處是，我們可以將數字，布林值或物件等其他值用作鍵。而物件只能將字串或symbol作為鍵。
使用 Object.assign 設定預設屬性
普通寫法
const menuConfig = {
title: null,body: 'Bar'
};
function createMenu(config) {
config.title = config.title || 'VVMWeGVFoo';
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 ){
currPahttp://www.cppcns.comge = 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 )http://www.cppcns.com{
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 );
};
引用參考： Refactoring Tips — Making Functions Clearer and Cleaner《Script設計模式與開發實踐》
總結
到此這篇關於如何讓你的JavaScript函式更加優雅的文章就介紹到這了,更多相關JavaScript函式優雅內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！