js 函数参数推荐书写方式 ({ param1, param2, ... })

发表于 | 更新于: | 分类于 |
字数统计: 649 | 阅读时长 ≈ 2

编程语言函数（包括对象的方法）参数的取值方式大致可以分为两种：按序取值与按名取值。

一般编程语言都是按序取值，比如 C、Java、JavaScript 等，少数语言支持按名取值，比如 Groovy。

1. 按序取值

按照顺序，挨个取值，每个参数的顺序是固定的。

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

func(1, 2, ...)

2. 按名取值

按照名称取值，可以任意安排各个参数的顺序。

以下语法并不存在，只是作为讲解生造的

1
2
3
4
const func = (param1: value1, param2: value2, ...) => { ... }

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

3. js 的按名取值

JavaScript 语言本身并不支持按名取值，但结合 ES6 的解构赋值，可以模拟函数参数的按名取值。

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

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

但这种方式如果不传参数调用 func() 就会报错，需要 func({}) 这样调用才表示什么参数都不传。

为了兼容这种方式，可以这样做：

1
2
3
4
const func = ({ param1, param2, ... } = {}) => { ... }

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

4. 为什么推荐使用按名取值的方式

按名取值最大的好处是可以随意安排参数的顺序，有利于扩展，特别是对 API 接口来说。

比如：

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

比如上面的函数中，大部分情况下我只用 content, confirmCallback，那么我就需要这样做：

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

如果我需要扩展一个参数 icon， 那么为了兼容以前的版本，我只能加在最后面：

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

现在，大部分情况下我只用 content, confirmCallback, icon，那么我就需要这样做：

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

如此，便很麻烦，不利于扩展。

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

1
2
3
4
export const dialog = ({title, content, confirmCallback, cancelCallback} = {}) => { ... }

// 扩展 icon
export const dialog = ({title, content, icon, confirmCallback, cancelCallback} = {}) => { ... }
1
2
3
dialog({content: 'content', confirmCallback: () => { ... }});

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

5. 大家可能的反驳

有人可能会说，可以这样做：

1
2
3
4
5
6
7
8
9
export const dialog = (title, content, confirmCallback, cancelCallback) => {
  if (typeof content === 'function') {
    cancelCallback = confirmCallback;
    confirmCallback = content;
    content = title;
  }

  ...
}

对于这种方式，我只想说：兄弟，简洁一点不好吗？