ES6--详解函数参数（解构赋值与默认值相结合）

对于ES6函数的参数解构赋值与默认值相结合，初学很容易迷糊，在网上翻阅一番，并没有详细的讲解，
在此拿一个最普及的例子来详解其中的原理，两种写法都是使用了双重默认值：

// 写法一function m1({x = 0, y = 0} = {}) {

  return [x, y];}

// 写法二function m2({x, y} ={ x: 0, y: 0 }) {

  return [x, y];}

1、// 函数没有参数的情况,参数严格为undefined，参数默认值生效

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

写法一：使用默认的参数“空对象{}”进行解构,实际执行的解构是{x = 0, y = 0}={},由于右边x、y严格等于undefined,所以使用解构默认值为x = 0, y = 0；

写法二：使用默认的参数“{ x: 0, y: 0 }”进行解构，实际执行的解构是{x, y} ={ x: 0, y: 0 }，解构成功，解构所得值为x = 0, y = 0；

 

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

详解：写法一、写法二相同：由于参数不为空，参数默认值无效，所以执行的解构为{x = 0, y = 0} = {x: 3, y: 8}，解构成功，解构所得值为x = 0, y = 0；

 

3、// x 有值，y 无值的情况，所传参数不严格为undefined，参数默认值无效；

m1({x: 3}) // [3, 0]
m2({x: 3}) // [3, undefined]
详解：写法一：实际执行的解构为{x = 0, y = 0} = {x: 3}，x值为3；解构右侧y值严格为undefined，所以y使用解构默认值0；

写法二：实际执行的解构为{x, y} = {x: 3}，x值为3；解构右侧y值严格为undefined，所以y解构时也为undefined；

 

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

详解：

写法一：实际执行的解构为{x = 0, y = 0} = {}，x值为0；y值也为0；
写法二：实际执行的解构为{x, y} ={}，由于解构时，右侧x，y完全为undefined，且没有默认值，所以x、y都为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；

转载于:https://www.cnblogs.com/DesignerFly/p/10599130.html