前端进阶攻略之ES6中的参数默认值

ES6中的参数默认值

一.基本用法

我们都清楚在调用函数的过程中，定义的参数缺失，此参数变量的值则会是undefined。怎么给缺失的参数赋值默认值，在ES6之前，并没有太简洁的方法，如下段代码所示：

function myFunction(x, y, z) {
    x = x === undefined ? 1 : x;
    y = y === undefined ? 2 : y;
    z = z === undefined ? 3 : z;
    console.log(x, y, z); // "6 7 3"
}
myFunction(6, 7);

这种写法是不是比较麻烦？默认值的设置是不是不够直观？

在ES6中，我们可以用更简洁的语法进行实现，通过本篇文章你将学习到以下内容：

1.使用ES6语法声明参数默认值

function myFunction(x = 1, y = 2, z = 3) {
    console.log(x, y, z);
}
myFunction(6,7); //6 7 3

在上述代码示例中，我们在调用此函数中传递了前两个参数，因此参数的默认值(即x=1和y=2)将会被覆盖(即x=6和y=7)。由于第三个参数缺省，因此z使用默认值，将会是3。

2.使用undefined传参

unction myFunction(x = 1, y = 2, z = 3) {
    console.log(x, y, z); //1 7 9"
}
myFunction(undefined,7,9);

在ES6语法中如果想使用到参数默认值，还可以通过传入undefined，来完成参数默认值，来是不是很简单，只需要使用undefined，我们就可以指定具体某个参数使用默认值。

如果在特定的场景下，第一个参数需要要到参数默认值，我们就可以使用undefined，非常的简单方便。

3.参数运算

function myFunction(x = 1, y = 2, z = x + y) {
    console.log(x, y, z); // "6 7 13"
}
myFunction(6,7);

在上述代码中，我们只传入了前两个参数，第三个参数缺省，第三个参数的默认值是则会是前两个参数之和。