前言
在 ES6 中，函数的参数解构赋值是一个非常实用的语法特性。它可以让我们更加便捷地处理函数的输入参数，使代码更加简洁易读。然而，当我们在函数参数解构赋值中使用默认值时，可能会遇到一些意想不到的问题。在本文中，我们将通过实际案例来解析这些问题，并提供一些指导性的建议。
基础知识
在开始实战分析之前，我们先来回顾一下函数参数解构赋值和默认值的基础知识。
函数参数解构赋值
函数参数解构赋值的语法格式如下：
function foo({a, b}) {
console.log(a, b);
}
foo({a: 1, b: 2}); // 输出 1 2上面的示例中，函数 foo 的参数是一个对象，它的属性名分别为 a 和 b。通过解构赋值的方式，我们可以将参数对象中的 a 和 b 属性分别赋值给函数中的变量 a 和 b。
默认值
函数参数默认值的语法格式如下：
function foo(a = 1, b = 2) {
console.log(a, b);
}
foo(); // 输出 1 2
foo(3); // 输出 3 2
foo(undefined, 4); // 输出 1 4上面的示例中，函数 foo 的参数 a 和 b 都有默认值。当函数调用时，如果没有传入对应的参数值，则会使用默认值。如果传入了参数值，则会覆盖默认值。
实战分析
在实际开发中，我们常常需要在函数参数解构赋值中使用默认值，以便更好地处理函数输入参数。然而，在使用默认值时，我们可能会遇到一些问题。下面我们将通过实际案例来逐一分析这些问题，并提供相应的解决方案。
问题一：默认值不生效
在某些情况下，我们可能会在函数参数解构赋值中同时使用默认值和解构赋值。例如：
function foo({a = 1, b = 2}) {
console.log(a, b);
}
foo({a: 3}); // 输出 3 2上面的示例中，函数 foo 的参数是一个对象，它的属性名分别为 a 和 b。我们在解构赋值的同时，为 a 和 b 设置了默认值。然而，当我们只传入 a 的值时，发现 b 的默认值并没有生效。
这是因为，在使用解构赋值时，只有当对象属性值为 undefined 时，才会触发默认值的生效。而在上面的示例中，虽然我们只传入了 a 的值，但是 b 的属性并不存在，因此默认值并没有生效。
解决方案是，在使用解构赋值时，确保对象属性值为 undefined。例如：
function foo({a = 1, b = 2} = {}) {
console.log(a, b);
}
foo({a: 3}); // 输出 3 2上面的示例中，我们在函数参数中设置了默认值 {}，这样就可以确保在解构赋值时，对象属性值为 undefined，从而触发默认值的生效。
问题二：默认值引用类型共享
在某些情况下，我们可能会在函数参数解构赋值中使用默认值，并且默认值是一个引用类型。例如：
function foo({a = [], b = {}}) {
a.push(1);
b.c = 2;
console.log(a, b);
}
foo(); // 输出 [1] {c: 2}
foo(); // 输出 [1, 1] {c: 2, d: 3}上面的示例中，函数 foo 的参数是一个对象，它的属性名分别为 a 和 b。我们在解构赋值的同时，为 a 和 b 设置了默认值，分别为一个空数组和一个空对象。在函数体中，我们对 a 和 b 进行了修改。
然而，当我们连续多次调用函数时，发现每次输出的结果都会受到前一次调用的影响。这是因为在使用默认值时，如果默认值是一个引用类型，那么每次调用函数时，该引用类型会被共享，从而导致每次修改都会影响到前一次调用的结果。
解决方案是，在使用默认值时，将默认值设置为一个函数，并在函数体中返回一个新的引用类型。例如：
function foo({a = [], b = {}} = {}) {
a.push(1);
b.c = 2;
console.log(a, b);
}
foo(); // 输出 [1] {c: 2}
foo(); // 输出 [1] {c: 2}上面的示例中，我们在函数参数中设置了默认值 {}，并将其赋值为一个函数。在函数体中，我们返回了一个新的空数组和一个新的空对象，从而避免了引用类型的共享问题。
总结
函数参数解构赋值和默认值是 ES6 中非常实用的语法特性。在使用时，我们需要注意一些细节问题，以避免出现意想不到的错误。本文通过实际案例分析了两个常见的问题，并提供了相应的解决方案。希望本文对大家能够有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650977c095b1f8cacd4308e7