在 JavaScript 中，使用函数时必须为每个参数明确地传递值，如果某个参数不传值，则它的值会是 undefined。ES6 中提供了默认参数的功能，使函数使用时可以为参数设置默认值，从而减少了一些重复代码的编写。
语法
默认参数使用等号（=）来给参数赋默认值。以下是使用默认参数的语法：
function func(param1 = defaultValue1, param2 = defaultValue2, ..., paramN = defaultValueN) {
// function body
}在这种情况下，如果参数 param1 被省略或传递为 undefined，则使用 defaultValue1。
默认参数的使用场景
默认参数在以下情况下特别有用：
1. 减少重复代码
在实际开发过程中，可能需要为函数添加一些默认参数，这样可以减少冗余的代码，例如：
-- -------------------- ---- ------- -- -------- -------- ------------------ --------- - --------- - --------- --- --------- - ------ - ---------- -------- - -------- --- --------- - ----- - --------- ------ --------- - - - - --------- - -- ------ -------- ----------------- - ------- -------- - ------ - ------ --------- - - - - --------- -
2. 附加默认值
在某些情况下，我们可能需要为默认参数附加一些特定值，例如：
// 为默认参数附加特定值
function getFullName(firstName = 'John', lastName = 'Doe', title = "") {
let fullName = firstName + ' ' + lastName;
if (title) {
fullName = title + ' ' + fullName;
}
return fullName;
}3. 多功能函数
使用默认参数可以使函数具有更多的灵活性和多功能性，例如：
// 使用默认参数实现多功能函数
function getPrice(price, tax = 0.1, discount = 0) {
return (price + price * tax) * (1 - discount);
}
getPrice(100); // 110
getPrice(100, 0.2); // 120
getPrice(100, 0, 0.1) // 99注意事项
以下是一些使用默认参数时需要注意的事项：
1. 默认参数不会影响 arguments 对象
使用默认参数时，arguments 对象的长度不会受到影响，它只包含传递的参数，不包含默认参数。
// arguments 对象不考虑默认参数
function test(a, b = 1) {
console.log(arguments.length);
}
test(10); // 1
test(10, 20); // 2
test(10, undefined);// 22. 默认参数可以引用前面的参数
默认参数可以引用函数前面声明的参数，但是不可以引用后面的参数。
// 默认参数引用前面的参数
function getTotal(price, discount = price * 0.1, tax = 0.1) {
return price - discount + price * tax;
}
getTotal(100); // 101
getTotal(100, 20); // 80
getTotal(100, 20, 0.2); // 963. 默认参数的赋值是惰性的
使用默认参数时，它们是惰性求值的，只有在使用时才会赋值。
-- -------------------- ---- ------- -- ---------- -------- ---------- - ----------- - ------------------- - -------- ---------- - ----------------------- -- --------- ------ --- - ------- -- ---------- -- ------ -- -------- -- -
总结
ES6 的默认参数使函数定义更加灵活和多功能，同时避免了一些重复代码的编写。在编写函数时，根据实际需求来使用默认参数可以让代码更加简洁和易于维护。
示例代码
在以下示例代码中，我们演示了如何使用默认参数。
function sayHi(name = "Guest") {
console.log("Hello, " + name);
}
sayHi(); // Hello, Guest
sayHi("Alice"); // Hello, Alicefunction getPrice(price, tax = 0.1, discount = 0) {
return (price + price * tax) * (1 - discount);
}
console.log(getPrice(100)); // 110
console.log(getPrice(100, 0.2)); // 120
console.log(getPrice(100, 0, 0.1)); // 99function getTotal(price, discount = price * 0.1, tax = 0.1) {
return price - discount + price * tax;
}
console.log(getTotal(100)); // 101
console.log(getTotal(100, 20)); // 80
console.log(getTotal(100, 20, 0.2)); // 96-- -------------------- ---- ------- -------- ---------- - ----------- - ------------------- - -------- ---------- - ----------------------- -- --------- ------ --- - ------- -- ---------- -- ------ -- -------- -- -
以上就是 ES6 中默认参数的详细介绍及使用技巧，希望对你以后的开发工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6460cd85968c7c53b026c0be