在 ES6 中，我们引入了解构赋值和默认值的语法，使得我们可以更加方便地处理函数的参数。然而，在使用箭头函数时，我们可能会遇到一个奇怪的 BUG：解构参数默认值不生效。本文将介绍这个问题的原因，并提供解决方案。
问题描述
假设我们有一个函数，它接受一个对象参数，并使用解构赋值和默认值来处理参数：
function foo({ x = 0, y = 0 } = {}) { console.log(x, y); }
现在我们想将这个函数改为箭头函数：
const foo = ({ x = 0, y = 0 } = {}) => { console.log(x, y); }
然而，当我们调用这个箭头函数时，传入空对象作为参数时，我们会发现默认值没有生效：
foo({}); // 无输出
这是一个非常奇怪的 BUG，让我们看看它的原因是什么。
原因分析
这个 BUG 的原因是箭头函数的参数列表有一个特殊的行为：如果参数列表为空，则表示函数没有参数。因此，当我们传入空对象时，它会被视为没有参数，而不是一个带有空对象参数的函数调用。因此，当我们使用默认值时，它不会生效。
这个问题可以通过一个简单的例子来说明：
const foo = (x = 0) => { console.log(x); } foo(); // 0 foo(undefined); // 0 foo({}); // {}
我们可以看到，当我们传入 undefined 时，参数 x 使用了默认值。但是，当我们传入空对象时，参数 x 变成了空对象。这是因为空对象被视为一个参数，而不是 undefined。
解决方案
为了解决这个问题，我们需要使用一个技巧：将参数列表改为一个数组，然后使用解构赋值来获取参数。这样，当我们传入空对象时，它被视为一个带有一个空数组参数的函数调用。因此，我们的默认值可以正常工作。
-- -------------------- ---- ------- ----- --- - --- - - -- - - - - - --- - --- -- - -------------- --- - ------ -- - - --------------- -- - - ---------- -- - - ------ -- - ---- -- - - ------ -- - ---- -- - -展开代码
我们可以看到，现在我们的默认值可以正常工作了。此外，我们还可以传入一个包含一个空对象的数组，以便传递空对象作为参数。
总结
在使用箭头函数时，我们可能会遇到一个奇怪的 BUG：解构参数默认值不生效。这是因为箭头函数的参数列表有一个特殊的行为：如果参数列表为空，则表示函数没有参数。为了解决这个问题，我们可以使用一个技巧：将参数列表改为一个数组，然后使用解构赋值来获取参数。这样，我们的默认值可以正常工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65bf450aadd4f0e0ff8ce24e
