深入了解JavaScript中的默认参数

JavaScript中的默认参数可以帮助我们更优雅地编写代码。ES6中引入了默认参数语法，允许在函数参数中指定默认值。

一、基本用法

基本的默认参数语法如下：

function foo(a = 'Hello', b = 'World') {
  console.log(a + ' ' + b);
}

foo(); // 输出：Hello World
foo('Hi'); // 输出：Hi World
foo(undefined, 'Universe'); // 输出：Hello Universe

以上代码中，函数foo的第一个参数a有一个默认值'Hello'，第二个参数b有一个默认值'World'。如果调用foo函数时只传递了a，而没有传递b，则b参数的默认值'World'会被使用。

二、默认参数表达式

默认参数表达式允许我们使用实际参数计算默认值：

let x = 99; // 声明一个变量x

function bar(a = x + 1) { // 在函数参数中使用x+1进行默认值计算
  console.log(a);
}

bar(); // 输出：100

x = 100; // 修改x的值

bar(); // 输出：101

在以上代码中，bar函数的默认参数表达式为x + 1，因此如果没有传递实际参数，a参数的默认值就是x + 1的计算结果。可以看到，在第二次调用bar函数时，a的值变成了101，因为当x的值被改变为100时，参数的默认值也跟着改变了。

三、默认参数和undefined

当一个参数的默认值设置为undefined时，可以调用函数时不传递对应的实际参数，那么这个参数的值就变成了undefined：

function baz(a = 'Hello', b = undefined) {
  console.log(a, b); 
}

baz(); // 输出：Hello undefined

在以上代码中，baz函数中参数b的默认值设定为undefined。因此即使在函数调用时不传递参数b，这个参数的结果是undefined。

四、剩余参数和默认参数一起使用

在ECMAScript 6之前，使用不定数量的参数需要使用arguments对象，如下所示：

function qux() {
  console.log(arguments[0]); 
}

qux('Hello'); // 输出：Hello
qux(); // 输出：undefined

在以上的代码片段中，qux函数可以处理任意数量的参数，但是需要使用arguments，这使得代码难以理解。

ES6中可以使用剩余参数和默认参数来提供更简洁的语法：

function quux(a = 'Hello', ...others) {
  console.log(a, others); 
}

quux(); // 输出：Hello []
quux('Hello', 'World', 'Universe'); // 输出：Hello ["World", "Universe"]

在以上代码中，quux函数的第一个参数a有一个默认值'Hello'，其他的参数则通过剩余参数语法...others来捕获。

五、默认参数的兼容性

默认参数在ES6中被引入，因此不是所有的浏览器都支持它们。如果你的代码需要在ES6之前的环境中运行，那么你需要很小心地处理默认参数：

function beep(a, b) {
  a = typeof a !== 'undefined' ? a : 'Hello';
  b = typeof b !== 'undefined' ? b : 'World';
  console.log(a, b);
}

beep(); // 输出：Hello World
beep('Hi', 'Universe'); // 输出：Hi Universe

这种方法需要手动检查每个参数是否被传递，并使用三元运算符来为它们设置默认值。虽然这个方法非常繁琐，但这是古老的JavaScript版本中最常用的方式。

六、结论

JavaScript中的默认参数是一个非常有用的特性。默认参数可以让函数的参数列表更加简洁和灵活，并且可以让代码更加易于维护。可以在声明函数参数时轻松地设置默认值，还可以使用默认参数表达式来动态计算默认值。