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中的默认参数是一个非常有用的特性。默认参数可以让函数的参数列表更加简洁和灵活，并且可以让代码更加易于维护。可以在声明函数参数时轻松地设置默认值，还可以使用默认参数表达式来动态计算默认值。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/151789.html
微信扫一扫 
支付宝扫一扫 