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

masturbator 发布于2019-08-23 17:59 / 3066人阅读

摘要：函数参数推荐书写方式编程语言函数包括对象的方法参数的取值方式大致可以分为两种按序取值与按名取值。按名取值按照名称取值，可以任意安排各个参数的顺序。

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)

云服务器 GPU云服务器 js 函数参数拼接 js 无参数函数 js函数默认参数 js中函数参数的作用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104485.html

[译] ES6 中 Arguments 和 Parameters 用法解析

摘要：默认参数有了我们不需要再去检测哪些值为并且给它们设定默认值了。我们甚至可以使用函数去找回默认参数的值注意这个函数只有在第二个参数省略时才会被调用。浏览器对默认参数的支持情况桌面浏览器移动端浏览器解构赋值解构赋值是的新特性。原文地址：https://www.smashingmagazine.com/2016/07/how-to-use-arguments-and-parameters...

msup 2019-08-21 10:56 评论0 收藏0
Js apply()使用详解

摘要：方法详解我在一开始看到的函数和时非常的模糊看也看不懂最近在网上看到一些文章对方法和的一些示例总算是看的有点眉目了在这里我做如下笔记希望和大家分享如有什么不对的或者说法不明确的地方希望读者多多提一些意见以便共同提高主要我是要解决一下几个问题和 Js apply方法详解我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply...

iOS122 2019-08-26 10:22 评论0 收藏0
Laravel 获取 Route Parameters (路由参数) 的 5 种方法

摘要：获取路由参数的方式有很多，并且有个小坑，汇总如下。例如结果为结果为以上就是获取路由参数的种方法。所有文章均已收录至项目。 Laravel 获取路由参数的方式有很多，并且有个小坑，汇总如下。假设我们设置了一个路由参数： /** * 定义路由参数名称分别为： param1，param2 */ Route::get(/{param1}/{param2}, TestController@in...

seasonley 2019-06-28 13:53 评论0 收藏0
Javascript定时器那些事儿

摘要：一什么是定时器提供了一些原生方法来实现延时去执行某一段代码，下面来简单介绍一下设置一个定时器，在定时器到期后执行一次函数或代码段定时器延迟后执行的函数延迟后执行的代码字符串，不推荐使用原理类似延迟的时间单位毫秒，默认值为向延迟函数传递而外的一、什么是定时器 JS提供了一些原生方法来实现延时去执行某一段代码，下面来简单介绍一下 setTimeout: 设置一个定时器，在定时器到期后执行...

Riddler 2019-08-21 15:26 评论0 收藏0
js计数器方法setInterval()、clearInterval()、setTimeout()和

摘要：方法描述周期性地调用一个函数或者执行一段代码。方法可取消由方法设置的。语法详解是该延时操作的数字此随后可以用来作为方法的参数。需要注意的是，不支持第一种语法中向延迟函数传递额外参数的功能。该值标识要取消的延迟执行代码块。方法描述 setInterval 周期性地调用一个函数(function)或者执行一段代码。 clearInterval 取消掉用setI...

keithxiaoy 2019-08-21 10:24 评论0 收藏0