es6中函数参数默认值的使用与解构赋值默认值结合使用

两种写法

写法一：函数参数的默认值是空的，但设置了对象解构赋值的默认值

写法二：函数参数的默认值是一个有具体属性的函数，但没有设置对象解构赋值的默认值

写法一：函数参数的默认值是空的，但设置了对象解构赋值的默认值

  function m1({x = 0, y = 0} = {}) {

     return [x, y];
     }

1.函数定义：定义了一个函数m1，它接受一个参数，参数是一个对象
2.参数解构赋值：{x = 0, y = 0}，使用解构语法，从传入的对象中提取x，y属性，并为它们设置默认值，如果传入的对象中没有对应的属性，或传入的是一个空对象，那么使用默认值x=0,y=0。
3.参数默认值：= {}设置了函数参数的默认值为一个空对象{}。如果没有传入参数或者传入一个空对象，函数将使用这个空对象作为参数。

写法二：函数参数的默认值是一个有具体属性的函数，但没有设置对象解构赋值的默认值

function m2({x, y} ={ x: 0, y: 0 }) {

    return [x, y];
}

1.函数定义：定义了一个函数m2
2.参数解构赋值：({x, y} ={ x: 0, y: 0 })，是函数参数的一部分。函数期望接受到一个对象，并从中提取出来x，y。如果没有传入参数，或者传入的参数中没有包括x，y，那么将使用默认值{ x: 0, y: 0 }。
3.参数默认值：= { x: 0, y: 0 }设置了函数参数的默认值。如果调用 m2() 时没有传入任何参数，解构赋值将会使用这个默认对象。如果没有提供 x 和 y，它们将分别被赋值为 0
1、/函数没有参数的情况

m1() // [0, 0]
m2() // [0, 0]
详解:

写法一：
没有传入参数，所以使用默认值{}，实际上进行的解构为{x=0,y=0}={},由于右边x，y严格等于undefined，所以使用解构的默认值[0,0]

写法二：
没有传入参数，使用默认参数{x,y}={x:0,y:0},结果为[0,0]
如果没有传入参数，x 和 y 默认都是 0

2、x 和 y 都有值的情况
m1({x: 2, y: 4}) // [2, 4]
m2({x: 2, y: 4}) // [2, 4]

3、 x 有值，y 无值的情况

m1({x: 2}) // [2, 0]
m2({x: 2}) // [2, undefined]
详解：
写法一：实际上进行的解构为 {x=0,y=0}={x:2}因为右边y严格等于undefined，所以y使用默认值0
写法二：当你调用 m2({x: 2}) 时，传入的对象只有 x 属性，y 属性没有定义。
在解构赋值中，x 将被赋值为 2，而 y 将是 undefined（因为没有传入 y）。
如果只传入部分属性（如 {x: 2}），未传入的属性（如 y）将会是 undefined
—
为什么 y 不使用默认值
默认值 {x: 0, y: 0} 只在整个参数未被传入时生效。
在 m2({x: 2}) 的情况下，虽然 y 没有被传入，但因为传入了一个对象，解构赋值会优先考虑传入的对象的属性。
由于 y 在传入的对象中不存在，因此它的值为 undefined，而不是使用默认值 0。

4、 x 和 y 都无值的情况
m1({}) // [0, 0];
m2({}) // [undefined, undefined]

5、传入不包含x，y的对象
m1({z: 3}) // [0, 0]

m2({z: 3}) // [undefined, undefined]
详解：写法一：实际执行的解构为{x = 0, y = 0} = {z:3}，解构失败，使用x、y的默认值,x-0,y=0；

写法二：实际执行的解构为{x, y} ={z:3}，由于解构失败，右侧x，y完全为undefined，所以x、y都为undefined；

总结：
m2 和 m1 都使用了参数解构和默认值的特性。
m2 在解构时，如果没有提供 y，则返回 undefined。
m1 则在没有提供 x 和 y 时，使用默认值 0。