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许可证）