js中函数的默认参数用法和解析

1、带默认值的参数

函数中的参数可以传入默认值，当有实参传入的时候就赋值实参，当没有传递实参的时候或者指定传递的参数为undefined时，形参就会使用默认值。如：

function getNum(num1, num2 = 5) {
return num1 + num2;
}
console.log(getNum(1)); // 6
console.log(getNum(1, 1)); // 2
console.log(getNum(1, undefined)); // 6

2、参数默认值表达式

函数参数的默认值不光可以是一个普通类型的值。也可以是一个函数表达式来获取值如：

let value = 1;
function getValue() {
    return value++;
}
function add(sum1, sum2 = getValue()) {
    return sum1 + sum2;
}
console.log(add(1, 1)); // 2
console.log(add(1)); // 2
console.log(add(1)); // 3

上述代码中，当调用add（）函数没有第二个值传入的时候就会调用getValue()方法获取默认值，并且因为getValue()获取的是动态的值，所以每调用一次sum2就会赋值不同的值来进行计算。

3、参数默认值的暂时性死区

函数的参数还可以将前面参数的值，作为后面参数的默认值。如：

function add(sum1, sum2 = sum1){
    return sum1 + sum2;
}
console.log(add(1)); // 2

上面的代码将sum1传入的值当作了sum2参数的默认值，也就是调用add()方法只需要传递一个参数就可以了。但是反过来将后面的参数作为前面参数的默认值就不行。如：

function add(sum1 = sum2, sum2){
    return sum1 + sum2;
}
console.log(add(undefined, 1)); // 报错

上面代码将sum2参数的值作为sum1的默认参数就会报错，是因为出发了暂时性死区，当sum2赋值给sum1的时候，sum2还没有进行定义，所以报错。

4、剩余参数

设计剩余参数是为了替代 ES 中的 arguments。它是由（…）name 三个点和参数名所组成的，会将函数传入的参数按照传入顺序收集成一个数组。如：

function add(sum1, ...sum){
    return sum;
}
console.log(add(...[1,2,4,5])); //  [2, 4, 5]

上面代码会将第一个参数赋值给sum1，其他剩余的参数全部赋值给sum收集起来组成一个数组。（注意：在调用函数时使用…是展开运算符，将数组中的参数展开后传入。）

剩余参数会有两个限制：

1、 函数只能有一个剩余参数，并且它必须被放在最后。
2、 不能在对象字面量的 setter 属性中使用（因为对象字面量的 setter 被限定只能使用单个参数）。
例：

function add(...sum, sum1){
    return sum;
}
console.log(add(1,2,4,5)); //  语法错误

let obj = {
    set name(...value) { // 语法错误
        console.log(value);
    }
};