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

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

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环境下处理函数默认参数的实现方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

(0)

相关推荐

  • 深入浅出ES6新特性之函数默认参数和箭头函数

    1.函数参数的默认值 ES5中不能直接为函数的参数指定默认值,只能通过以下的变通方式: 从上面的代码可以看出存在一个问题,当传入的参数为0或者false时,会直接取到后面的值,而不是传入的这个参数值. 那怎么解决呢?对于上图的代码,可以通过判断是否传入了num参数,没有就用默认值: 这种做法还是很麻烦的,而ES6则直接在参数定义里面设置函数参数的默认值,而且不用担心传入参数是0或者false会出错了: 2.箭头函数 箭头函数用 => 符号来定义. 箭头函数相当于匿名函数,所以采用函数表达式的写法

  • ES6知识点整理之函数对象参数默认值及其解构应用示例

    本文实例讲述了ES6知识点整理之函数对象参数默认值及其解构应用.分享给大家供大家参考,具体如下: 同函数数组参数一样,函数的对象参数的默认值和解构过程整理 函数对象参数的默认值与解构的形式 此处使用箭头函数来处理 : (({x,y})=>{ console.log(x, y); // // undefined undefined })({}); (({x=1,y=2})=>{ console.log(x,y); // 1 2 })({}); (({x=3, y=4}={})=>{ con

  • ES6新特性之函数的扩展实例详解

    本文实例讲述了ES6新特性之函数的扩展.分享给大家供大家参考,具体如下: 一.函数参数默认值 1. ES6允许为函数的参数设置默认值,即直接写在参数定义的后面. function log(x, y = 'World') { console.log(x, y); } log('Hello') // Hello World log('Hello', 'China') // Hello China log('Hello', '') // Hello 这种写法有两个好处:首先,阅读代码的人,可以立刻意识

  • javascript ES6中箭头函数注意细节小结

    前言 ES6标准新增了一种新的函数:Arrow Function(箭头函数). 为什么叫Arrow Function?因为它的定义用的就是一个箭头: x => x * x 上面的箭头函数相当于: function (x) { return x * x; } 但箭头函数带来了些许问题,下面来一起看看吧. 关于{} 第一个问题是关于箭头函数与{}. 箭头函数,乍一看,用法似乎很简单,比如像下面这样用来给数组每一项乘以2: const numbers = [1, 2, 3]; const result

  • ES6中Array.includes()函数的用法

    在ES5,Array已经提供了indexOf用来查找某个元素的位置,如果不存在就返回-1,但是这个函数在判断数组是否包含某个元素时有两个小不足,第一个是它会返回-1和元素的位置来表示是否包含,在定位方面是没问题,就是不够语义化.另一个问题是不能判断是否有NaN的元素. const arr1 = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', NaN] console.log('%s', arr1.indexOf(NaN)) 结果:

  • ES6中箭头函数的定义与调用方式详解

    本文主要介绍的是关于ES6箭头函数的定义与调用方式的相关内容,分享出来供大家参考学习,下面来看看详细的介绍: 基本用法: ES6中允许使用"箭头"(=>)定义函数 var f = v => v; 上面代码相当于: var f = function( v ) { return v; } 根据箭头函数有参数和无参数来区分 1.无参数的箭头函数 var f = () => 5; 等同于 var f = function() { return 5}; 2.有参数的箭头函数 v

  • 关于ES6箭头函数中的this问题

    简要介绍:箭头函数中的this,指向与一般function定义的函数不同,箭头函数this的定义:箭头函数中的this是在定义函数的时候绑定,而不是在执行函数的时候绑定. (1)一般函数this指向在执行是绑定  当运行obj.say()时候,this指向的是obj这个对象. var x=11; var obj={ x:22, say:function(){ console.log(this.x) } } obj.say(); //console.log输出的是22 (2)所谓的定义时候绑定,就

  • ES6实现的遍历目录函数示例

    本文实例讲述了ES6实现的遍历目录函数.分享给大家供大家参考,具体如下: // npm init // npm install koa --save-dev // node --harmony app.js const fs = require('fs'); var eachDir = (() => { let queue = []; var eachFiles = (options) => { if (queue.length) { let path = queue.shift(); fs.

  • ES6记录异步函数的执行时间详解

    calc calc 是一个我们想要做剖析(性能分析)的异步函数.按照惯例,它的最后一个参数是一个callback.我们像这样使用 calc: calc(arg, (err, res) => console.log(err || res)) 或许,最简单的对 calc 这样的函数来剖析性能的方法是,增加一个计时逻辑到我们需要分析的地方: const t0 = Date.now() calc(arg, (err, res) => { const t1 = Date.now() console.lo

  • ES6知识点整理之函数数组参数的默认值及其解构应用示例

    本文实例讲述了ES6知识点整理之函数数组参数的默认值及其解构应用.分享给大家供大家参考,具体如下: 在ES6中, 函数的参数也可以使用解构赋值和默认值的设置,下面我们来看下 在ES6之前设置函数默认值的写法 function test(x,y) { x = x || 12; y = y || 22; console.log(x,y); } test(); // 12 22 test(1,2) // 1 2 在ES6中给函数参数赋默认值 function test(x=12, y=22) { co

  • ES6中的箭头函数实例详解

    本文实例讲述了ES6中的箭头函数.分享给大家供大家参考,具体如下: 语法 我们先来看看箭头函数的语法: ([param] [, param]) => { statements } param => expression param 是参数,根据参数个数不同,分这几种情况: () => { - } // 零个参数用 () 表示: x => { - } // 一个参数可以省略 (): (x, y) => { - } // 多参数不能省略 (): 示例 我们再来看看一些示例,看看在

随机推荐

其他