每日 30 秒 ⏱ 函式引數騷操作

zhangxiangliang發表於2019-03-26
函式

前言

函式、引數、解構、優雅、可讀性、技巧

不管是呼叫第三方庫或者是專案自身的函式，開發過程中總少不了函式。可以說函式是解放程式碼的第一生產力，有的同學會說了那你把類放在那裡了。其實用函式和資料一樣可以模擬出來類，類更多的是對函式的歸集和複用進行擴充升級。

在呼叫函式時不得不提的就是 引數 了，很多小夥伴寫函式很容易就寫成了：

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 } = {}) {
    // ...
}
複製程式碼

當然 解構賦值 也可以在平常開發中使用，方便我們寫出 規範 的 奇淫技巧，帶來偷懶摸魚同時也帶來優雅。

強制傳遞引數

除了使用引數預設值，也可以對函式引數進行強制傳遞引數：

指令碼
// 幫助函式
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 );
複製程式碼

一起成長

在困惑的城市裡總少不了並肩同行的 夥伴 讓我們一起成長。

  • 如果您想讓更多人看到文章可以點個 點贊。
  • 如果您想激勵小二可以到 Github 給個 小星星。
  • 如果您想與小二更多交流新增微信 m353839115。

微信公眾號

本文原稿來自 PushMeTop

相關文章