函數參數解構 · Javascript基礎篇

[TOC] >[success] # 函數參數解構寫之前先把參考鏈接附上[每日 30 秒 ? 函數參數騷操作](https://juejin.im/post/5c9a9170e51d456b6147ebb2) >[success] ## 正常函數參數寫法正常的傳參形式使用時候需要按照順序來傳參 ~~~ function area (width, height) { return width * height; } ~~~ 一般情況一兩個參數還好記住是干嘛的，如果想下面這樣怎么辦？ ~~~ function infomation ( name, sex, height, birthday, color, likes, follow, age ) { // ... } ~~~ >[success] ## 傳遞對象而不是參數列表多個參數記不住怎么辦，這時候傳遞對象就可以了，對象的優勢是，不用按照參數的順序來傳參，相對于參數列表傳遞對象屬性更好記也沒有強制的順序，如果命名足夠清晰在后期維護代碼的時候甚至只要看`屬性名`就可以馬上理解過來。如果其他同學開發新的功能也不會怕他順序亂調了，但是最好要對新加的參數做出兼容，不然還是會讓依賴的其他函數一路飄紅。 ~~~ function infomation (user) { // user.name } infomation({ name: 'xiaoer', age: 18 }) ~~~ >[success] ## 使用解構賦值參數列表被對象替換解決了參數列表順序的問題，可是每次調用的時候都需要從`對象中取值`使得函數每次都要訪問對象，帶來了變量長度變長和很多無意義的`賦值`。再者如果調用者不小心`多傳遞了參數`，再不巧函數中遍歷了對象這可能會產生BUG，可以利用解構賦值來解決： ~~~ function infomation ({ name, age, height }) { console.log(name) // 藥水哥 console.log(age) // 18 console.log(height) // 173cm } infomation ({name: ' 藥水哥 '，age: ' 18 ', height: ' 173cm '}) ~~~ >[success] ## 使用默認值產品上線后總會出現各種奇奇怪怪的錯誤，用戶總是不按照預期進行操作產品，不斷的 BUG 傳來實在讓人難受。其實在調用函數時我們也是一個用戶，有的參數不能為空但是我們卻給出了空值，導致函數不能按預期執行。在書寫函數時應該做好別人調用函數時不按套路出牌的情況，例如給出默認值和對數據進行轉化： ~~~ function infomation ({ name = 'anonymous', age = 0, height = 160 }) { console.log(name) // 藥水哥 console.log(age) // 0 console.log(height) // 160 } infomation ({ name: ' 藥水哥 '}) function move({x = 0, y = 0} = {}) { return [x, y]; } move({x: 3, y: 8}); // [3, 8] move({x: 3}); // [3, 0] move({}); // [0, 0] move(); // [0, 0] ~~~ >[success] ## 參數變為可選參數 ( 傳不傳都行，不傳就給默認值 ) 上面例子中的函數在 infomation({ age: 16 }) 這樣調用的情況下，可以按照預期的默認值執行。但是想讓這個對象也可選的時候 infomation() 將會報錯，因為沒有對象讓其解構，可以利用 {} 來使得對象也可選： ~~~ function infomation ({ name = 'anonymous', age = 0, height = 160 } = {}) { console.log(name) // anonymous console.log(age) // 0 console.log(height) // 160 } infomation () ~~~ >[success] ## 參數重命名有時候需要對參數進行重命名，但是已經很多地方都使用了這個參數時。可以在函數執行最開始的時候進行重命名，但是這樣顯然不夠 geek（主要是不夠偷懶）依舊利用`解構賦值`來實現重命名： ~~~ function infomation ({ name:username = 'anonymous', age = 0, height = 160 } = {}) { console.log(name) // undefined console.log(age) // 0 console.log(height) // 160 console.log(username) // anonymous } infomation() ~~~ 注意一下：如果參數使用了重命名原來的名字就會不生效，打印結果為 undefined >[success] ## 強制傳遞參數除了使用參數默認值，也可以對函數參數進行強制傳遞參數： ~~~ // 幫助函數 const err = ( message ) => { throw new Error( message ); } // 函數 const sum = function ( num = err('first param is not defined'), otherNum = err('second param is not defined') ) { return num + otherNum; } ~~~ ~~~ // 測試函數 // 輸出: 3 console.log(sum(1, 2)); // 測試第一個參數不傳遞 // Uncaught Error: first param is not defined sum( undefined, 10 ); // 測試第二個參數不傳遞 // Uncaught Error: second param is not defined sum( 10 ); ~~~