在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 相关文章推荐
ext实现完整的登录代码
Aug 08 Javascript
Firefox div高度自适应
Apr 28 Javascript
jQuery实现表头固定效果的实例代码
May 24 Javascript
javascript 按键事件(兼容各浏览器)
Dec 20 Javascript
用javascript替换URL中的参数值示例代码
Jan 27 Javascript
jQuery控制网页打印指定区域的方法
Apr 07 Javascript
属于你的jQuery提示框(Tip)插件
Jan 20 Javascript
Bootstrap CSS组件之按钮组(btn-group)
Dec 17 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
May 24 Javascript
bootstrap datepicker插件默认英文修改为中文
Jul 28 Javascript
浅探express路由和中间件的实现
Sep 30 Javascript
JavaScript之Blob对象类型的具体使用方法
Nov 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
九个你必须知道而且又很好用的php函数和特点
2013/08/08 PHP
php递归实现无限分类的方法
2015/07/28 PHP
jQuery中ajax的使用与缓存问题的解决方法
2013/12/19 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
2016/01/23 Javascript
JS正则表达式比较常见用法
2016/01/26 Javascript
javaScript数组迭代方法详解
2016/04/14 Javascript
使用 stylelint检查CSS_StyleLint
2016/04/28 Javascript
最全的Javascript编码规范(推荐)
2016/06/22 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
2016/11/16 Javascript
基于JavaScript实现本地图片预览
2017/02/08 Javascript
分享Bootstrap简单表格、表单、登录页面
2017/08/04 Javascript
jQuery菜单实例(全选,反选,取消)
2017/08/28 jQuery
Vue.js 2.5新特性介绍(推荐)
2017/10/24 Javascript
初识 Vue.js 中的 *.Vue文件
2017/11/22 Javascript
vue 做移动端微信公众号采坑经验记录
2018/04/26 Javascript
在微信小程序中渲染HTML内容的方法示例
2018/09/28 Javascript
AngularJS上传文件的示例代码
2018/11/10 Javascript
ios中视频的最后一桢问题解决
2019/05/14 Javascript
浅谈layui 表单元素的选中问题
2019/10/25 Javascript
如何使用Javascript中的this关键字
2020/05/28 Javascript
[01:55]2014DOTA2国际邀请赛快报:国土生病 紧急去医院治疗
2014/07/10 DOTA
pytyon 带有重复的全排列
2013/08/13 Python
Python2.7简单连接与操作MySQL的方法
2016/04/27 Python
Python如何import文件夹下的文件(实现方法)
2017/01/24 Python
基于python3 的百度图片下载器的实现代码
2019/11/05 Python
Python列表list操作相关知识小结
2020/01/29 Python
如何通过python检查文件是否被占用
2020/12/18 Python
Python数据模型与Python对象模型的相关总结
2021/01/26 Python
吃透移动端 1px的具体用法
2019/12/16 HTML / CSS
澳大利亚冒险体验:Adrenaline(跳伞、V8赛车、热气球等)
2017/09/18 全球购物
介绍一下OSI七层模型
2012/07/03 面试题
维德科技C#面试题笔试题
2015/12/09 面试题
库房主管岗位职责
2013/12/31 职场文书
幼儿园教师国培感言
2014/02/02 职场文书
2015小学毕业班工作总结
2015/07/21 职场文书
实习报告范文之电话客服岗位
2019/07/26 职场文书