解决使用 ES8 对象函数参数默认值产生的变量共享问题
在 ES8 中，提供了一种方便的方式来设置函数参数的默认值。使用默认参数可以简化代码并提高代码的可读性。但是，在使用 ES8 对象函数参数默认值时，可能会遇到一个问题，那就是变量共享。
在使用默认参数时，如果默认值是一个对象或数组，当多次调用函数并不传递该参数时，会共享该对象或数组，导致之前调用函数时对该对象或数组做的修改会影响到后续调用时。
让我们来看一个示例：
-- -------------------- ---- ------- -------- ------ ----- - -- ---- - -- - - --- - ------------------- ----------------- ------------------ - ------- -- -- --- ------- -- -- --- -- ------- -- -- --- -- --
在这个示例中，我们定义了一个 test 函数，该函数接受一个包含两个属性的对象作为参数，属性分别为 count 和 list。在参数对象中，我们使用了默认值 { count = 0, list = [] } = {}。在函数内部，我们先打印 count，然后将 count 添加到 list 数组中，并再次打印 list。
在第一次调用 test 函数时，我们并没有传递任何参数，因此使用了默认值 { count = 0, list = [] } = {}。打印输出为 0，表示 count 的默认值被正确设置为 0。然后我们将 count 添加到 list 数组中，list 数组变成了 [0]。
在第二次调用 test 函数时，因为我们没有传递参数，所以参数对象仍然使用了默认值 { count = 0, list = [] } = {}。在打印输出中，我们发现 count 的值仍然是 0，而 list 数组变成了 [0, 0]。这说明我们之前调用函数时对 list 数组的修改对当前函数调用产生了影响。
在第三次调用 test 函数时，同样使用了默认参数 { count = 0, list = [] } = {}。在打印输出中，我们发现 count 的值仍然是 0，而 list 数组变成了 [0, 0, 0]。这也说明了之前调用函数时对 list 数组的修改对当前函数调用产生了影响。
为了解决这个问题，我们可以使用 ES6 中的解构语法来避免参数共享的问题。让我们修改一下示例代码：
-- -------------------- ---- ------- -------- ------ ----- - -- ---- - -- - - --- - ------------------- ---- - --------- ------- ------------------ - ------- -- -- --- ------- -- -- --- ------- -- -- ---
在这个示例中，我们使用了解构语法来获取参数对象中的 count 和 list 属性。需要注意的是，在函数内部，我们重新初始化了 list 数组，而不是对原有的 list 数组进行修改。
现在，我们再次运行这个示例，可以看到每次函数调用时，count 的默认值都是 0，而 list 数组始终只包含当前调用时添加的值。
总结：
使用 ES8 对象函数参数默认值可以大大简化代码，但是在使用默认参数时，需要注意如果默认值是一个对象或数组，会产生变量共享的问题。为了避免这个问题，我们可以使用解构语法来重新初始化参数对象中的数组或对象属性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646e0656968c7c53b0c9fc91