网站导航:首页-WEB前端/后端-利用解构赋值给函数传参时的默认值问题

利用解构赋值给函数传参时的默认值问题

最近更新:2020-02-05

解构赋值与函数在JS代码中非常常用,有时需要设置一个默认值,但解构赋值与函数参数设置默认值的方法不同,本文将说明在将解构赋值与函数传参相结合时如何设置默认值。

解构赋值中的默认值

在ES6中新增了一种非常方便的赋值方式,只要结构一致,就可以直接赋值,例如:let [a, b] = [3, 4];就相当于let a = 3, b = 4;。在解构赋值时,可以给给变量设置一个默认值,当没有给这个参数赋值时就直接赋予默认值,例如:let [a, b = 10] = [5],由于变量b没有给传值,所以直接使用默认值10(即使传undefined也直接使用默认值)。

还有一种解构赋值的方式是通过对象的形式,例如:let {x: name, y: age} = {x: 'jerry', y: 18};就相当于let name = 'jerry', age = 18};。可以通过如下方式给变量设置默认值let {x: name, y: age = 18} = {x: 'jerry'};,由于对象没有属性y,所以age取默认值18(即使传undefined也直接使用默认值)。

函数传参的默认值

在ES5中无法直接给函数的参数设置默认值,只能通过如下方案来替代:

function fn(a) {
    a = a || '默认值';
    console.log(a);
}
fn();

但是在ES6中就有了新方案,可以通过如下方案来为参数设置默认值:

function fn(a = '默认值') {
    console.log(a);
}
fn();

当调用函数时,如果没有传递参数a则直接使用默认值。

解构赋值与函数传参相结合时的默认值

当解构赋值与函数传参相结合的时候,可以给解构赋值设置默认值,也可以给函数的参数设置默认值,也可以都设置默认值,下面将进行分别说明:

给解构赋值设置默认值

function fn([a = 10, b = 20]) {
    console.log(a, b);
}

如果直接调用上述代码时不传参(即fn();),由于实参没有结构与参数[a = 10, b = 20]相对应,而函数也没有参数的默认值,所以运行程序时会报错。如果调用上述代码时传空数组(即fn([]);),则空数组与参数[a = 10, b = 20]相对应,参数a与参数b分别对应空数组的第0位与第1位,由于空数组的第0位与第1位都没有值,所以参数a与参数b会分别取默认值10和20。

给函数传参设置默认值

function fn([a, b] = [10, 20]) {
    console.log(a, b);
}

如果直接调用上述代码时不传参(即fn();),虽然实参没有结构与参数[a, b]相对应,但是函数有[10, 20]的默认值,所以参数a与参数b分别会取10和20。如果调用上述代码时传空数组(即fn([]);),则空数组与参数[a = 10, b = 20]相对应,参数a与参数b分别对应空数组的第0位与第1位,由于空数组的第0位与第1位都没有值,所以参数a与参数b都会取undefined。

结构赋值与函数传参都设置默认值

function fn([a = 10, b = 20] = [30, 40]) {
    console.log(a, b);
}

如果直接调用上述代码时不传参(即fn();),由于实参没有结构与参数[a = 10, b = 20]相对应,但是函数有[30, 40]的默认值,所以参数a与参数b分别会取30和40。如果调用上述代码时传空数组(即fn([]);),则空数组与参数[a = 10, b = 20]相对应,参数a与参数b分别对应空数组的第0位与第1位,由于空数组的第0位与第1位都没有值,所以参数a与参数b会分别取默认值10和20。

(正文完)

如果您对本文由任何意见或建议,或者想留言或评论,请随时提交工单进行反馈。

到底线啦,请:返回目录页|返回首页