JavaScript 默认参数|极客笔记

JavaScript 默认参数

在JavaScript中，我们经常会定义函数，函数的参数可能是必传的，也可能是可选的。为了确保函数在调用时无需传入所有参数，我们可以为函数参数设置默认值。这种默认参数的特性可以帮助我们简化代码编写，提高代码的可读性。本文将详细介绍JavaScript中默认参数的使用方法和注意事项。

什么是默认参数

默认参数是指在定义函数时给参数设置一个默认值，如果在调用函数时未传入该参数的值，则会使用默认值作为参数的值。在ES6中，可以使用简洁的语法直接在函数参数列表中设置默认参数值。

例如，以下是一个简单的函数，其中的参数x和y都有默认值：

function multiply(x = 1, y = 1) {
  return x * y;
}

console.log(multiply(5, 3)); // 输出15
console.log(multiply(5)); // 输出5，y使用默认值1
console.log(multiply()); // 输出1，x和y都使用默认值1

在这个示例中，函数multiply接收两个参数x和y，并给它们都设置了默认值为1。在调用函数时，如果传入了参数值，则使用传入的值，否则使用默认值。

默认参数的注意事项

默认参数赋值

当某个参数的默认值是一个变量时，这个变量只在函数被调用时赋值一次，后续调用时不会再重新赋值。这可能会导致一些意外的行为。

let count = 0;

function increment(value = count) {
  return value;
}

console.log(increment()); // 输出0

count = 10;

console.log(increment()); // 输出0，count并未被重新赋值

在上面的示例中，increment函数的默认参数value使用了变量count作为默认值，但是count只在第一次调用时赋值为0，后续调用不会再更新。因此，第二次调用increment时，返回的值仍然是0。

默认参数的作用域

默认参数的作用域与函数体内的普通变量是相同的，遵循词法作用域规则。也就是说，默认参数的作用域是函数体内的作用域，不会受到外部作用域的影响。

let x = 10;

function multiplyByX(y = x) {
  return y * x;
}

console.log(multiplyByX()); // 输出100

x = 5;

console.log(multiplyByX()); // 输出50，x并未被重新赋值

在这个示例中，multiplyByX函数的默认参数y使用了外部作用域的变量x作为默认值。即使在函数调用时，外部变量x的值发生了变化，函数内部仍然使用最初的默认值。

延展操作符与默认参数

在ES6中，还可以使用延展操作符...结合默认参数，使得函数在接收可变数量的参数时更加灵活。延展操作符可以将多余的参数打包成一个数组，方便对参数进行操作。

function sum(prefix, ...numbers) {
  return ` ${prefix}:$ {numbers.reduce((acc, cur) => acc + cur, 0)}`;
}

console.log(sum("Total", 1, 2, 3)); // 输出Total: 6
console.log(sum("Sum")); // 输出Sum: 0

在这个示例中，函数sum接收一个前缀字符串prefix和多个数字作为参数。通过延展操作符...numbers，可以将多余的参数打包成一个数组numbers，然后使用reduce方法计算数组中所有数字的总和。