在编写 JavaScript 代码时，函数的默认参数是非常常见的需求。然而，在 ES6 及其之前的版本中，函数默认值的处理存在着缺陷，这也给一些开发者带来了困扰。在本文中，我们将讨论 ES12 中的函数默认参数问题，并提供一些解决方法。
ES6 中的函数默认参数问题
在 ES6 中，可以使用默认参数语法为函数的参数提供默认值。例如：
function myFunction(x = 0, y = 0) {
console.log(x, y);
}在调用 myFunction 的时候，如果不传递任何参数，那么 x 和 y 将会被默认赋值为 0。
这似乎是一个非常方便的特性，然而在某些机制下，它会导致错误的行为。考虑以下示例：
function appendToArray(element, arr = []) {
arr.push(element);
return arr;
}
console.log(appendToArray(1)); // [1]
console.log(appendToArray(2)); // [2]我们期望通过两次调用 appendToArray 函数，将元素 1 和 2 追加到一个数组中。然而，由于 arr 是一个默认参数，因此每次调用函数时，它都将使用相同的数组实例，从而导致元素追加到同一个数组中。因此，上述代码输出：
[1] [1, 2]
这显然不是我们希望看到的结果。
ES12 中的解决方法
在 ES12 中，提供了一种解决上述问题的方法，即在函数内部使用 undefined 来判断参数是否为默认值。以下是修改后的示例代码：
function appendToArray(element, arr) {
arr = arr === undefined ? [] : arr;
arr.push(element);
return arr;
}
console.log(appendToArray(1)); // [1]
console.log(appendToArray(2)); // [2]这里的思路是，在函数内部对默认参数进行特判，并手动进行赋值。如果 arr 为 undefined，则将其赋值为一个新的数组实例。
这种方式确保了每次调用函数时都会使用不同的数组实例，避免了上述的错误行为。同时，由于这种方式可以应用于 ES6 之前的版本，因此具有更广泛的兼容性。
总结
在本文中，我们探讨了 ES12 中的函数默认参数问题，以及一种解决方法。尽管 ES6 中的默认参数语法非常方便，但在某些场景下会导致错误的行为，因此需要特别注意。
准确使用函数默认值，可以使我们的代码更加健壮和容错，这对于提高生产力和维护代码非常有帮助。同时，了解和掌握 ES12 中的函数默认参数解决方法有助于我们解决历史代码中的问题，让代码逐步进入更加健康的状态。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650161c295b1f8cacdf1be13