如何在ES5与ES6环境下处理函数默认参数
2018-06-24 02:04:25来源：未知 阅读 ()
函数默认值是一个很提高鲁棒性的东西（就是让程序更健壮）
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
参考资料
- MDN
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
- 详解Webstorm 新建.vue文件支持高亮vue语法和es6语法 2020-02-07
- 浏览器上实现右键菜单的方法 2019-10-25
- es6学习笔记（二） 2019-08-14
- Es6常用方法filter 2019-08-14
- es6学习笔记(一) 2019-08-14
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
