在 ES7 中，JavaScript 引入了一些新的语法特性，其中包括函数默认值和可选参数。这些特性可以帮助开发人员更方便地编写代码，同时也可以减少一些常见的错误和问题。本文将介绍这些特性的使用方法，并讨论可能遇到的问题和错误。
函数默认值
在 ES6 中，我们可以使用参数默认值来为函数的参数指定默认值。例如：
function greet(name = 'World') {
console.log(`Hello, ${name}!`);
}
greet(); // output: Hello, World!
greet('John'); // output: Hello, John!在上面的例子中，如果调用 greet() 函数时没有传入参数，那么参数 name 将会使用默认值 'World'。如果传入了参数，那么参数 name 将会使用传入的值。
在 ES7 中，我们可以使用更复杂的表达式来指定参数的默认值。例如：
function greet(name = getName()) {
console.log(`Hello, ${name}!`);
}
function getName() {
return 'World';
}
greet(); // output: Hello, World!
greet('John'); // output: Hello, John!在上面的例子中，参数 name 的默认值是调用 getName() 函数的结果。这种方式可以让我们更灵活地指定参数的默认值。
可选参数
在 JavaScript 中，函数的参数是可选的。这意味着我们可以在调用函数时省略某些参数。例如：
-- -------------------- ---- -------
-------- ----------- -
-- ------ -
------------------- -----------
- ---- -
------------------- ---------
-
-
-------- -- ------- ------ ------
-------------- -- ------- ------ -----在上面的例子中，如果调用 greet() 函数时没有传入参数，那么参数 name 将会是 undefined，我们可以使用条件语句来处理这种情况。
在 ES7 中，我们可以使用问号 ? 来指定可选参数。例如：
-- -------------------- ---- -------
-------- ------------ -
-- ------ -
------------------- -----------
- ---- -
------------------- ---------
-
-
-------- -- ------- ------ ------
-------------- -- ------- ------ -----在上面的例子中，参数 name 带有问号 ?，表示它是可选的。这样，我们就可以更方便地处理可选参数的情况。
可能遇到的问题和错误
在使用函数默认值和可选参数时，可能会遇到一些问题和错误。下面是一些常见的问题和错误：
问题 1：默认值可能会影响函数的行为
如果函数的参数带有默认值，并且调用函数时省略了该参数，那么该参数将会使用默认值。这可能会导致函数的行为与预期不符。例如：
function greet(name = 'World') {
console.log(`Hello, ${name}!`);
}
greet(undefined); // output: Hello, World!在上面的例子中，我们调用 greet() 函数时传入了 undefined，这会导致参数 name 使用默认值 'World'。这可能会导致函数的行为与预期不符。
问题 2：可选参数可能会导致参数顺序混乱
如果函数的参数中包含可选参数，那么这些参数可能会导致参数顺序混乱。例如：
function greet(name?, age?) {
console.log(`Hello, ${name}! You are ${age} years old.`);
}
greet(30, 'John'); // output: Hello, 30! You are John years old.在上面的例子中，我们调用 greet() 函数时交换了参数顺序，导致输出结果不符合预期。
错误 1：默认值表达式可能会执行多次
如果函数的参数带有默认值，并且该默认值是一个表达式，那么该表达式可能会执行多次。例如：
function greet(name = getName()) {
console.log(`Hello, ${name}!`);
}
function getName() {
console.log('Getting name...');
return 'World';
}
greet(); // output: Getting name... Hello, World!在上面的例子中，我们调用 greet() 函数时，表达式 getName() 被执行了两次，这可能会导致性能问题。
错误 2：可选参数不能放在必选参数前面
如果函数的参数中包含可选参数，那么这些参数必须放在必选参数的后面。例如：
function greet(name?, age) {
console.log(`Hello, ${name}! You are ${age} years old.`);
}
greet(30, 'John'); // Error: Cannot assign to 'name' because it is a constant or a read-only property.在上面的例子中，我们把可选参数 name 放在了必选参数 age 的前面，这会导致语法错误。
总结
在 ES7 中，我们可以使用函数默认值和可选参数来编写更简洁、更灵活的函数。但是，在使用这些特性时，我们需要注意可能遇到的问题和错误，以确保代码的正确性和性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65d9ef301886fbafa474c586