函数参数的默认值与解构赋值的默认值

参数默认值可以与解构赋值的默认值，结合起来使用。

function foo({x, y = 5}) { //这里定义了一个函数，参数为一个{}对象，没有默认值，只有解构赋值参数的默认值
  console.log(x, y);
}

foo({}) // undefined 5
foo({x: 1}) // 1 5
foo({x: 1, y: 2}) // 1 2
foo() // TypeError: Cannot read property 'x' of undefined

上面代码只使用了对象的解构赋值默认值，没有使用函数参数的默认值。只有当函数foo的参数是一个对象时，变量x和y才会通过解构赋值生成。如果函数foo调用时没提供参数，变量x和y就不会生成，从而报错。因此定义函数时，当与解构赋值结合使用时，参数默认值可以不设置，但是这时候调用函数时就必须要传值，否则会报错，因此只有进行了结构赋值这一步才会去定义x和y

通过提供函数参数的默认值，就可以避免这种情况，如下：

function foo({x, y = 5}={}) {
  console.log(x, y);
}

上面这个函数的情况是：

1 如果调用foo时没传参数，则默认是{}，将{}值对左边进行解构赋值，因为y有默认值，则结果为x:undefined,y:5

2 比如传了值为{x:10,y:20}，那么就使用这个对象对左边进行解构赋值，匹配到了x和y，所以最终结果x=10,y=20;