您好,登錄后才能下訂單哦!
這篇文章主要介紹了JavaScript函數(shù)對象的參數(shù)怎么使用的相關(guān)知識,內(nèi)容詳細易懂,操作簡單快捷,具有一定借鑒價值,相信大家閱讀完這篇JavaScript函數(shù)對象的參數(shù)怎么使用文章都會有所收獲,下面我們一起來看看吧。
如果希望函數(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ù)的命名也是一樣。
普通寫法
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ù)雜的條件判斷,我們可以單獨使用函數(shù)來表示,會讓條件語句更具描述性。
普通寫法
if (score === 100 || remainingPlayers === 1 || remainingPlayers === 0) { quitGame(); }
改寫
const winnerExists = () => { return score === 100 || remainingPlayers === 1 || remainingPlayers === 0 } if (winnerExists()) { quitGame(); }
按原來的寫法,我們有很長的表達式在括號里面,但是不太好看出它在判斷的是什么。改寫之后,我們把它放在一個命名函數(shù)中,根據(jù)名字我們就能大概看出表達的意思。
當你的 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作為鍵。
普通寫法
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 ); // 跳轉(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ù)獨立出來 };
如果一個函數(shù)過長,不得不加上若干注釋才能讓這個函數(shù)顯得易讀一些,那這些函數(shù)就很有必要進行重構(gòu)。
如果在函數(shù)中有一段代碼可以被獨立出來,那我們最好把這些代碼放進另外一個獨立的函數(shù)。
示例
比如在一個負責(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的語句封裝在一個獨立的函數(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 ); };
關(guān)于“JavaScript函數(shù)對象的參數(shù)怎么使用”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對“JavaScript函數(shù)對象的參數(shù)怎么使用”知識都有一定的了解,大家如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。