在ES5与ES6环境下处理函数默认参数的实现方法


Posted in Javascript onMay 13, 2018

函数默认值是一个很提高鲁棒性的东西(就是让程序更健壮)

MDN关于函数默认参数的描述:函数默认参数允许在没有值或undefined被传入时使用默认形参。

ES5

使用逻辑或||来实现

众所周知,在ES5版本中,并没有提供的直接方法供我们我们处理函数默认值
所以只能够自己去增强函数的功能,一般会这么来做:

function doSomething (name, age) {
 name = name || 'default name'
 age = age || 18
 console.log(name, age)
}

我们将函数的两个参数name与age进行默认值的处理,如果没有则使用默认值。

在执行一下函数后,好像并没有什么不对:

doSomething()    // default name, 18
doSomething('Niko') // Niko    , 18
doSomething(, 12)  // default name, 12

然而当我们执行这样的代码时,就会获得一些超出预期的结果:

doSomething('Niko', 0) // Niko, 18

能够发现,对于参数0,我们上边的默认参数实现方法是有问题的

就像下边的四个表达式,都会输出wrong,这很显然不能够满足上边MDN关于函数默认参数的定义:

console.log(0     || 'wrong')
console.log(''    || 'wrong')
console.log(null   || 'wrong')
console.log(false   || 'wrong')

正确的姿势

所以,在ES5中正确的默认值处理应该是这样:

function doSomething (name, age) {
 if (name === undefined) {
  name = 'default name'
 }
 if (age === undefined) {
  age = 18
 }
 console.log(name, age)
}

使用三元运算符简化操作

或者我们简写成三元运算符形式的:

function doSomething (name, age) {
 name = name === undefined ? 'default name' : name
 age = age === undefined ? 18       : age
 console.log(name, age)
}

使用函数进行封装

但是如果我们每写一个函数,都要重复的去做这些操作
未免太麻烦了,所以,我们对这个逻辑进行一个简单的封装:

function defaultValue (val, defaultVal) {
 return val === undefined ? defaultVal : val
}
function doSomething (name, age) {
 name = defaultValue(name, 'default name')
 age = defaultValue(age , 18)
 console.log(name, age)
}

这样就很简洁的在ES5实现了函数默认参数的逻辑

one momre things

关于上边的defaultValue函数实现方法,我们在合理的使用弱类型语言的优势后
可以使用这种方式来省去三元运算符的操作:

function defaultValue () {
 return arguments[+(arguments[0] === undefined)]
}

我们知道,arguments表示函数所有的实参

我们使用arguments[0]获取第一个实参,然后与undefined进行全等比较

在外层将表达式的结果转换为Number,然后将这个值作为下标获取arguments中对应的参数。

因为是由Boolean值转变而来,所以只会存在0、1两种选项。

也就实现了上边三元运算符的功能。

ES6

ES6版本的函数默认值基本上就是我们上边实现的那种套路了

但是因为是原生的,所以会有相应的新语法,能够更简洁的使用:

function doSomething (name = 'default name', age = 18) {
 console.log(name, age)
}

ES6中提供了新的语法,可以让我们在函数声明参数后边直接写= [defaultValue]的这种形式来设置某个参数的默认值。
直接使用这种方式,省去了在函数内部进行默认值的检查,能够让函数专注的做它应该做的事情。

如何针对某些必填参数抛出异常

ES6这种新语法能够让我们很好的针对某个必填参数进行错误提醒:

function requireParams () {
 throw new Error('required params')
}
function doSomething (name = requireParams(), age = 18) {
 // do something
}

如果name参数为undefined,就会触发默认值规则

然后调用requireParams函数,而我们在函数中直接throw了一个Error

复杂结构参数的默认值处理

上边的处理都是针对简单的基本类型数据进行处理的,但如果我们有如下的一个函数:

function init ({id, value}) {}
init({
 id: 'tagId',
 value: 1
})

如果在ES5环境下,针对这种参数的默认值处理将会变得无比复杂

首先要判断这一个参数是否存在,然后在判断参数中的所有key是否存在

而在ES6中,可以这样来做:

function init ({
 id  = 'defaultId',
 value = 1
} = {}) {
 console.log(id, value)
}
init()

首先在解构函数的后边添加默认值= {},然后针对每一项参数添加默认值,很简洁的就实现了我们的需求。

ES5版本的polyfill代码在仓库中的位置:defaultValue

参考资料

1.MDN

总结

以上所述是小编给大家介绍的在ES5与ES6环境下处理函数默认参数的实现方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
JavaScript实现Java中StringBuffer的方法
Feb 09 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
May 13 Javascript
JavaScript实现的多个图片广告交替显示效果代码
Sep 04 Javascript
javascript实现禁止复制网页内容汇总
Dec 30 Javascript
JS中生成随机数的用法及相关函数
Jan 09 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
Sep 20 Javascript
Vue.js在数组中插入重复数据的实现代码
Nov 17 Javascript
postman+json+springmvc测试批量添加实例
Mar 31 Javascript
详解Node.js读写中文内容文件操作
Oct 10 Javascript
layer iframe 设置关闭按钮的方法
Sep 12 Javascript
微信小程序实现拨打电话功能的示例代码
Jun 28 Javascript
VUE实时监听元素距离顶部高度的操作
Jul 29 Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
May 13 #Javascript
node 命令方式启动修改端口的方法
May 12 #Javascript
安装Node.js并启动本地服务的操作教程
May 12 #Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
May 12 #Javascript
Vue拖拽组件开发实例详解
May 11 #Javascript
node前端模板引擎Jade之标签的基本写法
May 11 #Javascript
JS实现的简单下拉框联动功能示例
May 11 #Javascript
You might like
APMServ使用说明
2006/10/23 PHP
PHP的范围解析操作符(::)的含义分析说明
2011/07/03 PHP
php中计算中文字符串长度、截取中文字符串的函数代码
2011/08/09 PHP
Php无限级栏目分类读取的实现代码
2014/02/19 PHP
php实现监控varnish缓存服务器的状态
2014/12/30 PHP
人脸识别测颜值、测脸龄、测相似度微信接口
2016/04/07 PHP
php使用pear_smtp发送邮件
2016/04/15 PHP
php封装的单文件(图片)上传类完整实例
2016/10/18 PHP
浅谈PHP命令执行php文件需要注意的问题
2016/12/16 PHP
PHP实现简易用户登录系统
2020/07/10 PHP
从新浪弄下来的全屏广告代码 与使用说明
2007/03/15 Javascript
List Information About the Binary Files Used by an Application
2007/06/18 Javascript
javascript 二维数组的实现与应用
2010/03/16 Javascript
JQuery 选项卡效果(JS与HTML的分离)
2010/04/01 Javascript
微博@符号的用户名提示效果。(想@到谁?)
2010/11/05 Javascript
offsetHeight在OnLoad中获取为0的现象
2013/07/22 Javascript
JQuery实现鼠标移动到图片上显示边框效果
2014/01/09 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
2014/11/26 Javascript
vue实现可增删查改的成绩单
2016/10/27 Javascript
Node.js测试中的Mock文件系统详解
2016/11/21 Javascript
jQuery实现动态给table赋值的方法示例
2017/07/04 jQuery
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
2019/01/18 Javascript
基于VUE的v-charts的曲线显示功能
2019/10/01 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
2020/06/15 Javascript
vue data有值,但是页面{{}} 取不到值的解决
2020/11/09 Javascript
Python 查看文件的读写权限方法
2018/01/23 Python
Python实现的多进程和多线程功能示例
2018/05/29 Python
python+pandas+时间、日期以及时间序列处理方法
2018/07/10 Python
解决python Markdown模块乱码的问题
2019/02/14 Python
Python3通过chmod修改目录或文件权限的方法示例
2020/06/08 Python
Django启动时找不到mysqlclient问题解决方案
2020/11/11 Python
应聘自荐书
2013/10/08 职场文书
饮料业务员岗位职责
2013/12/15 职场文书
自动一体化专业求职信
2014/03/15 职场文书
党员四风问题对照检查材料思想汇报
2014/09/16 职场文书
话题作文之呼唤
2019/12/18 职场文书