ES6（ECMAScript 2015）引入了许多新特性，其中包含了默认参数值和解构赋值。这两种特性可以单独使用，也可以联合使用。但是，在使用它们的时候，可能会遇到一些问题。
本篇文章将会介绍默认参数值和解构赋值的特性，以及当它们联合使用时可能出现的问题，以及如何解决这些问题。
默认参数值
在 ES6 中，我们可以为函数的参数设置默认值。例如：
function foo(a=1, b=2) {
console.log(a, b);
}当这个函数被调用时，如果没有传入参数，则 a 和 b 的默认值是分别是 1 和 2。如果传入参数，则会覆盖默认值。
foo(); // 输出 1 2 foo(3); // 输出 3 2 foo(undefined, 4); // 输出 1 4
需要注意的是，只有在函数内部参数是 undefined 时，才会使用默认值。如果传入的是 null 或者没有传入参数，则不会使用默认值。
解构赋值
解构赋值是 ES6 中另一个非常实用的新特性。它可以让我们通过一种简洁的语法，从数组或对象中提取值，并赋值给变量。
let array = [1, 2, 3];
let obj = {a: 1, b: 2, c: 3};
let [x, y, z] = array;
let {a, b, c} = obj;
console.log(x, y, z); // 输出 1 2 3
console.log(a, b, c); // 输出 1 2 3联合使用
在某些情况下，我们需要将默认参数值和解构赋值一起使用。例如，我们可以这样定义一个函数：
function bar({a=1, b=2} = {}) {
console.log(a, b);
}这个函数接受一个对象作为参数，如果没有传入参数，则使用默认值。而这个对象中有两个值，分别赋值给变量 a 和 b。
当我们调用这个函数时，可以传入一个对象作为参数，也可以不传入参数。例如：
bar(); // 输出 1 2
bar({}); // 输出 1 2
bar({a: 3}); // 输出 3 2
bar({a: 3, b: 4}); // 输出 3 4可以看到，这段代码运行正常，符合我们的预期。但是，如果我们像下面这样调用这个函数：
bar(undefined);
我们会发现，函数的输出是 1 2，而不是 undefined undefined。这是因为在解构赋值中，只有当变量未定义时才会使用默认值。而 undefined 并不等于未定义。
为了解决这个问题，我们可以做如下修改：
function bar({a=1, b=2} = {}) {
a = (a === undefined ? 1 : a);
b = (b === undefined ? 2 : b);
console.log(a, b);
}这样，在函数内部，我们先判断变量是否是 undefined，如果是，则使用默认值。
总结
ES6 的默认参数值和解构赋值是非常实用的语法特性。当它们联合使用时，可能会出现一些问题，但是通过一些小技巧，可以轻易地解决这些问题。希望本篇文章能够帮助你理解这些语法特性的使用方法，让你在编写 JavaScript 代码时更加得心应手。
示例代码
-- -------------------- ---- ------- -------- --------- ---- - --- - - - -- --- --------- - - - --- - - -- --- --------- - - - --- -------------- --- - ------ -- -- - - -------- -- -- - - ------- ---- -- -- - - ------- -- -- ---- -- -- - - --------------- -- -- - -
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f37bf1f6b2d6eab3cdd307