js 函數參數推薦書寫方式 ({ param1, param2, ... })

js 函數參數推薦書寫方式 ({ param1, param2, ... })

編程語言函數（包括對象的方法）參數的取值方式大體能夠分爲兩種：按序取值與按名取值。

通常編程語言都是按序取值，好比 C、Java、JavaScript 等，少數語言支持按名取值，好比 Groovy。

1. 按序取值

按照順序，挨個取值，每一個參數的順序是固定的。

const func = (param1, param2, ...) => { ... }

func(1, 2, ...)

2. 按名取值

按照名稱取值，能夠任意安排各個參數的順序。

如下語法並不存在，只是做爲講解生造的

const func = (param1: value1, param2: value2, ...) => { ... }

func(param1: 1, param2: 2); // ok 
func(param2: 2, param1: 1); // ok again

3. js 的按名取值

JavaScript 語言自己並不支持按名取值，但結合 ES6 的解構賦值，能夠模擬函數參數的按名取值。

const func = ({ param1, param2, ... }) => { ... }

func({ param1: 1, param2: 2, ... });

但這種方式若是不傳參數調用 func() 就會報錯，須要 func({}) 這樣調用才表示什麼參數都不傳。

爲了兼容這種方式，能夠這樣作：

const func = ({ param1, param2, ... } = {}) => { ... }

func();   // ok
func({}); // ok again

4. 爲何推薦使用按名取值的方式

按名取值最大的好處是能夠隨意安排參數的順序，有利於擴展，特別是對 API 接口來講。

好比：

export const dialog = (title, content, confirmCallback, cancelCallback) => { ... }

好比上面的函數中，大部分狀況下我只用 content, confirmCallback，那麼我就須要這樣作：

dialog(null, 'content', () => { ... });

若是我須要擴展一個參數 icon， 那麼爲了兼容之前的版本，我只能加在最後面：

export const dialog = (title, content, confirmCallback, cancelCallback, icon) => { ... }

如今，大部分狀況下我只用 content, confirmCallback, icon，那麼我就須要這樣作：

dialog(null, 'content', () => { ... }, null, 'icon');

如此，便很麻煩，不利於擴展。

若是使用按名取值的方式，便迎刃而解：

export const dialog = ({title, content, confirmCallback, cancelCallback} = {}) => { ... }

// 擴展 icon
export const dialog = ({title, content, icon, confirmCallback, cancelCallback} = {}) => { ... }

dialog({content: 'content', confirmCallback: () => { ... }});

dialog({content: 'content', icon: 'icon', confirmCallback: () => { ... }});

5. 你們可能的反駁

有人可能會說，能夠這樣作：

export const dialog = (title, content, confirmCallback, cancelCallback) => { 
  if (typeof content === 'function') {
    cancelCallback = confirmCallback;
    confirmCallback = content;
    content = title;
  }
  
  ...
}

對於這種方式，我只想說：兄弟，簡潔一點很差嗎？

後續

更多博客，查看 https://github.com/senntyou/blogs

做者：深予之 (@senntyou)

版權聲明：自由轉載-非商用-非衍生-保持署名（創意共享3.0許可證）