在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入门教程(5) js Screen屏幕对象
Jan 31 Javascript
jQuery中append()方法用法实例
Dec 25 Javascript
利用jQuery中的ajax分页实现代码
Feb 25 Javascript
javascript中利用柯里化函数实现bind方法
Apr 29 Javascript
JavaScript代码实现图片循环滚动效果
Mar 19 Javascript
不间断循环滚动效果的实例代码(必看篇)
Oct 08 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
Nov 07 Javascript
基于jQuery实现表格的排序
Dec 02 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
Aug 30 Javascript
JS判断数组那点事
Oct 10 Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
Nov 17 Javascript
实战node静态文件服务器的示例代码
Mar 08 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
古巴咖啡 Cubita琥爵咖啡 独特的加勒比海风味咖啡
2021/03/06 新手入门
PHP网页游戏学习之Xnova(ogame)源码解读(十三)
2014/06/26 PHP
php eval函数一句话木马代码
2015/05/21 PHP
php DES加密算法实例分析
2019/09/18 PHP
Ctrl+Enter提交内容信息
2006/06/26 Javascript
jquery ready()的几种实现方法小结
2010/06/18 Javascript
jquery实现textarea 高度自适应
2015/03/11 Javascript
微信小程序 特效菜单抽屉效果实例代码
2017/01/11 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
2017/03/14 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
2017/09/18 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
2017/09/22 jQuery
详解cordova打包成webapp的方法
2017/10/18 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
2017/11/06 Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
2019/10/11 Javascript
p5.js临摹动态图形的方法
2019/10/23 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
2020/01/07 Javascript
Javascript Worker子线程代码实例
2020/02/20 Javascript
Vue 组件注册全解析
2020/12/17 Vue.js
[02:25]DOTA2英雄基础教程 熊战士
2014/01/03 DOTA
python中利用await关键字如何等待Future对象完成详解
2017/09/07 Python
Python如何实现MySQL实例初始化详解
2017/11/06 Python
Python爬虫——爬取豆瓣电影Top250代码实例
2019/04/17 Python
Django实现分页显示效果
2019/10/31 Python
tensorflow实现测试时读取任意指定的check point的网络参数
2020/01/21 Python
Python sys模块常用方法解析
2020/02/20 Python
Python利用pip安装tar.gz格式的离线资源包
2020/09/14 Python
迪卡侬英国官网:Decathlon英国
2017/04/08 全球购物
澳大利亚排名第一的狂热牛仔品牌:ONETEASPOON
2018/11/20 全球购物
Surfdome西班牙:世界上最受欢迎的生活方式品牌
2019/02/13 全球购物
钳工实习自我鉴定
2013/09/19 职场文书
硕士研究生求职自荐信范文
2014/03/11 职场文书
十佳青年事迹材料
2014/08/21 职场文书
医院护士见习期自我鉴定
2014/09/15 职场文书
Python基础之常用库常用方法整理
2021/04/30 Python
如何使用PostgreSQL进行中文全文检索
2021/05/27 PostgreSQL
小程序实现文字循环滚动动画
2021/06/14 Javascript