js-函数参数推荐书写方式-param1-param2

jiezi

5 年前

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

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

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

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

func(1, 2, ...)

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

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

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

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

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

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

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

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

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

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

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

按名取值最大的好处是可以随意安排参数的顺序，有利于扩展，特别是对 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: () => {...}});

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

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

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

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

作者：深予之 (@senntyou)

js-函数参数推荐书写方式-param1-param2

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

1. 按序取值

2. 按名取值

3. js 的按名取值

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

5. 大家可能的反驳

后续