默认参数：简化函数调用 (ES6+)
引言
大家好，欢迎来到今天的讲座！今天我们要聊的是 JavaScript 中的一个非常实用的功能——默认参数（Default Parameters）。这个功能是在 ES6（ECMAScript 2015）中引入的，它让我们的代码更加简洁、易读，同时也减少了不必要的错误。那么，什么是默认参数呢？为什么它这么重要？让我们一起来看看吧！
什么是默认参数？
在 ES6 之前，如果你想要给函数的参数设置一个默认值，通常需要在函数体内进行手动检查和赋值。比如：
function greet(name) {
if (name === undefined) {
name = 'Guest';
}
console.log(`Hello, ${name}!`);
}
greet(); // Hello, Guest!
greet('Alice'); // Hello, Alice!这种方式虽然可以实现，但显得有些繁琐，尤其是在参数较多的情况下。ES6 引入了默认参数，允许我们在定义函数时直接为参数指定默认值，省去了手动检查的步骤。上面的例子可以简化为：
function greet(name = 'Guest') {
console.log(`Hello, ${name}!`);
}
greet(); // Hello, Guest!
greet('Alice'); // Hello, Alice!是不是看起来清爽多了？这就是默认参数的魅力所在。
默认参数的基本用法
单个参数的默认值
最简单的用法就是为单个参数设置默认值。当我们调用函数时不传递该参数时，JavaScript 会自动使用我们设定的默认值。
function add(a = 1, b = 2) {
return a + b;
}
console.log(add()); // 3
console.log(add(3)); // 5
console.log(add(3, 4)); // 7多个参数的默认值
你也可以为多个参数设置默认值。注意，默认值的顺序是从左到右，后面的参数可以引用前面已经定义的参数。
function multiply(a = 1, b = a * 2) {
return a * b;
}
console.log(multiply()); // 2 (a=1, b=2)
console.log(multiply(3)); // 18 (a=3, b=6)
console.log(multiply(3, 4)); // 12 (a=3, b=4)使用表达式作为默认值
默认值不仅可以是常量，还可以是表达式，甚至是其他函数的返回值。这为我们提供了更大的灵活性。
function getGreeting() {
return 'Hello';
}
function greet(name = getGreeting()) {
console.log(`${name}, world!`);
}
greet(); // Hello, world!
greet('Hi'); // Hi, world!默认值与 undefined
需要注意的是，只有当参数的值为 undefined 时，才会使用默认值。如果传递了 null 或其他值（如 0、'' 等），默认值将不会生效。
function test(value = 'default') {
console.log(value);
}
test(); // default
test(undefined); // default
test(null); // null
test(0); // 0
test(''); // ''默认参数的高级用法
默认参数与解构赋值结合
ES6 还引入了对象和数组的解构赋值，我们可以将它们与默认参数结合起来使用，进一步简化代码。
function printUser({ name = 'Guest', age = 18 } = {}) {
console.log(`Name: ${name}, Age: ${age}`);
}
printUser(); // Name: Guest, Age: 18
printUser({}); // Name: Guest, Age: 18
printUser({ name: 'Alice' }); // Name: Alice, Age: 18
printUser({ name: 'Bob', age: 25 }); // Name: Bob, Age: 25在这个例子中，我们不仅为 name 和 age 设置了默认值，还为整个对象参数设置了默认值 {}，以防止传入 undefined 时导致错误。
默认参数与箭头函数
箭头函数（Arrow Functions）是 ES6 的另一个重要特性，默认参数同样适用于箭头函数。
const add = (a = 1, b = 2) => a + b;
console.log(add()); // 3
console.log(add(3)); // 5
console.log(add(3, 4)); // 7默认参数与剩余参数（Rest Parameters）
默认参数还可以与剩余参数（Rest Parameters）一起使用。剩余参数允许我们将不定数量的参数收集到一个数组中，而默认参数则可以为这些参数提供默认值。
function sum(...numbers) {
return numbers.reduce((acc, num) => acc + (num || 0), 0);
}
console.log(sum(1, 2, 3)); // 6
console.log(sum(1, undefined, 3)); // 4
console.log(sum()); // 0在这个例子中，num || 0 确保了即使传入 undefined，也不会影响求和的结果。
默认参数的注意事项
虽然默认参数给我们带来了很大的便利，但在使用时也有一些需要注意的地方：
-
默认值的计算时机：默认值是在每次调用函数时计算的，而不是在定义函数时计算的。这意味着如果你使用了一个复杂的表达式作为默认值，它会在每次调用时重新执行。
let counter = 0; function logMessage(message = `Default message ${++counter}`) { console.log(message); } logMessage(); // Default message 1 logMessage(); // Default message 2 -
避免使用可变对象作为默认值：如果你使用一个可变对象（如数组或对象）作为默认值，可能会导致意外的行为，因为所有调用都会共享同一个对象。
function addObject(prop = { key: 'value' }) { prop.key += '!'; console.log(prop); } addObject(); // { key: 'value!' } addObject(); // { key: 'value!!' }为了避免这种情况，建议在函数内部创建一个新的对象或数组。
-
默认参数的优先级：如果一个参数有默认值，并且它的值依赖于前面的参数，那么前面的参数必须已经定义。否则，JavaScript 会抛出错误。
function foo(a = 1, b = a + 1) { console.log(a, b); } foo(); // 1, 2 foo(2); // 2, 3 foo(2, undefined); // 2, 3 foo(undefined, 3); // 抛出错误：Cannot read property 'a' of undefined
总结
通过今天的讲座，我们了解了默认参数的基本用法及其在实际开发中的应用。默认参数不仅让我们的代码更加简洁，还减少了手动检查参数的麻烦。同时，我们还学习了如何将默认参数与其他 ES6 特性（如解构赋值、箭头函数、剩余参数等）结合使用，进一步提升代码的可读性和灵活性。
当然，任何强大的工具都有其适用场景和局限性。在使用默认参数时，我们也要注意一些潜在的问题，确保代码的健壮性和性能。
希望今天的分享对大家有所帮助！如果有任何问题，欢迎随时提问。谢谢大家！
