資訊專欄INFORMATION COLUMN
前言
函數、參數、解構、優雅、可讀性、技巧
不管是調用第三方庫或者是項目自身的函數，開發過程中總少不了函數。可以說函數是解放代碼的第一生產力，有的同學會說了那你把類放在那里了。其實用函數和數據一樣可以模擬出來類，類更多的是對函數的歸集和復用進行擴充升級。
在調用函數時不得不提的就是 參數 了，很多小伙伴寫函數很容易就寫成了：
function area (width, height) {
return width * height;
}
兩個參數還好腦子記得住，但是下面這種情況乍辦：
function infomation (
name, sex, height, birthday,
color, likes, follow, age
) {
// ...
}
這么多參數每次開發調用時有使用 ide 會自動提示還好，如果沒有則有可能需要翻文檔或者跳轉到定義處查看，除了比較麻煩點外還行。
程序員何必為難程序員。
不知道大家有沒有和別人對接過開發，有的同學開發有時候不會考慮別人是否對他的代碼有依賴，直接腦袋一拍就給你的參數順序對調了，結果代碼提交后全軍崩潰各種報錯飄紅。
傳遞對象而不是參數列表可以利用 JavaScript 的對象來傳遞參數：
function infomation (user) {
// user.name
}
infomation({ name: "xiaoer", age: 18 })
相對于參數列表傳遞對象屬性更好記也沒有強制的順序，如果命名足夠清晰在后期維護代碼的時候甚至只要看屬性名就可以馬上理解過來。如果其他同學開發新的功能也不會怕他順序亂調了，但是最好要對新加的參數做出兼容，不然還是會讓依賴的其他函數一路飄紅。
使用解構賦值參數列表被對象替換解決了參數列表順序的問題，可是每次調用的時候都需要從對象中取值使得函數每次都要訪問對象，帶來了變量長度變長和很多無意義的賦值。再者如果調用者不小心多傳遞了參數，再不巧函數中遍歷了對象這可能會產生BUG，可以利用解構賦值來解決：
function infomation ({ name, age, height }) {
}
這樣既對傳遞的參數做出了防御又可以方便的使用參數。
使用默認值你永遠不知道用戶會怎么使用產品。
產品上線后總會出現各種奇奇怪怪的錯誤，用戶總是不按照預期進行操作產品，不斷的 BUG 傳來實在讓人難受。
程序員何必為難程序員。
其實在調用函數時我們也是一個用戶，有的參數不能為空但是我們卻給出了空值，導致函數不能按預期執行。在書寫函數時應該做好別人調用函數時不按套路出牌的情況，例如給出默認值和對數據進行轉化：
function infomation ({ name = "anonymous", age = 0, height = 160 }) {
// ...
}
當然你也可以使用 TypeScript 等工具來提升編程的安全性，但 巧婦難為無米之炊 在有的時候不是你想用就能用的，需要整個公司一起進行技術的升級。
參數變為可選參數上面例子中的函數在 infomation({ age: 16 }) 這樣調用的情況下，可以按照預期的默認值執行。但是想讓這個對象也可選的時候 infomation() 將會報錯，因為沒有對象讓其解構。可以利用 {} 來使得對象也可選：
function infomation ({ name = "anonymous", age = 0, height = 160 } = {}) {
// ...
}
重命名
有時候需要對參數進行重命名，但是已經很多地方都使用了這個參數時。可以在函數執行最開始的時候進行重命名，但是這樣顯然不夠 geek（主要是不夠偷懶）依舊利用 解構賦值 來實現重命名：
function infomation ({ name:username = "anonymous", age = 0, height = 160 } = {}) {
// ...
}
當然 解構賦值 也可以在平常開發中使用，方便我們寫出 規范 的 奇淫技巧，帶來偷懶摸魚同時也帶來優雅。
一起成長在困惑的城市里總少不了并肩同行的 伙伴 讓我們一起成長。
如果您想讓更多人看到文章可以點個 點贊。
如果您想激勵小二可以到 Github 給個 小星星。
如果您想與小二更多交流添加微信 m353839115。
本文原稿來自 PushMeTop
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/103048.html
showImg(https://segmentfault.com/img/remote/1460000018709378?w=900&h=500); 簡介 短路運算、逗號運算、簡化條件語句、初始化小技巧 昨天一個同學在 URL 大爆炸 問了我一個問題：這是什么寫法 (data[key] = value, data) 。平時在寫文章的時候會把這些技巧稍微提示一下，認為大家都知道這些技巧，引起了小二的...
showImg(https://segmentfault.com/img/remote/1460000018734296?w=900&h=500); 簡介 可讀性、性能、Spread、Reduce 在 優雅三連擊 中有同學提到了 可讀性 這個關鍵詞，就小二個人的觀點 在某個范圍內使用比較常用到的小技巧，可以提升一定的可讀性，文中提到的短路運算在初始化變量是提升可讀性的，并且在很多提倡優化if 語句...
showImg(https://segmentfault.com/img/remote/1460000018771037?w=900&h=500); 簡介 benchmark、基準測試、jsPerf 在 優雅插入數組 一文中大家最多的評論就是 能不能加個基準測試。小二不是不喜歡加基準測試而是現在硬件設備的性能越來越快了，有時候一些操作不是性能問題的主要原因，當然這不是我們不寫出好代碼的理由。 書寫...
showImg(https://raw.githubusercontent.com/pushmetop/resource/master/30-seconds-for-everyday/chunk/poster.png); 簡介 數據分割、分頁、異步操作、DOM優化 把數組按指定大小進行分組，可以用于分頁、數據切割、異步操作數據。 // 該源碼來自于 https://30secondsofcode....
showImg(https://raw.githubusercontent.com/pushmetop/resource/master/30-seconds-for-everyday/simple-http/poster.png); 簡介 XMLHttpRequest、HTTP 工具原理、XHR jQuery.ajax、axios 和 新的 Web API fetch 在瀏覽器不支持的兼容代碼都是...
閱讀 2544·2021-11-24 10:20
閱讀 2392·2021-09-10 10:51
閱讀 3381·2021-09-06 15:02
閱讀 3114·2019-08-30 15:55
閱讀 2841·2019-08-29 18:34
閱讀 3080·2019-08-29 12:14
閱讀 1218·2019-08-26 13:53
閱讀 2931·2019-08-26 13:43
