有关函数传参的结构赋值的理解

结构赋值是es6 中增加的非常实用的新功能，能提高我们的编码效率。但是，有时候在函数参数中用时，常常会出错，例如下面

eg1:

function foo({x = 0, y = 0} = {}) {
           return [x, y];
       }
       console.log(foo({x: 6, y: 8}));// [6, 8]
       console.log(foo({x: 6}));// [6, 0]
       console.log(foo({}));// [0, 0]
       console.log(foo());// [0, 0]

如果我们把上述例子改成下面

eg2:

function foo({x, y} = { x: 0, y: 0 }) {
     return [x, y];
 }
 
 console.log(foo({x: 6, y: 8})); // [6, 8]
 console.log(foo({x: 6})); // [6, undefined]
 console.log(foo({})); // [undefined, undefined]
 console.log(foo()); // [0, 0]

结果是不是超出你的想象！

查阅资料后才发现，其实是这样的：

eg1 是给变量x,y指定默认值，eg2 是给函数的参数指定默认值。

首先，简单说明一下基本的对象解构赋值操作中解构赋值默认值的使用：

let { x = 0, y = 0 } = { x: 6, y: 9 };
console.log(x);//6
console.log(y);//9

　　在简单的解构赋值操作中，等号左边的对象是变量组成的，我在这里称它左变量（为了后文方便理解，姑且这样定义）即：x,y，等号右边的部分是真正的值，这里称它为右真值；而左变量中x，y等号右边的部分分别为变量x和变量y的默认值。它们之间的关系是：当右侧x，y没有指定值的时候（也就是x===undefined和y===undefined的时候），变量的默认值会生效，而当x,y指定了值的时候，变量的默认值不会生效。那么什么是衡量x，y是否===undefined的标准呢？可以是以下几种情况：

1.右侧没有对应的属性
let { x = 0, y = 0 } = { y: 9 };//这种情况下属性x就是undefined，那么此时变量的默认值生效，所以输出：x为0，y为9
2.右侧属性值就是undefined
let { x = 0, y = 0 } = { x:undefined,y: 9 };

　　值得特别说明的是：这里判断默认值是否生效的是右真值是否===undefined，而不是==undefined，两者有什么区别呢？在js中undefined==null是成立的，而undefined===null是不成立的。关于这一点可以通过在浏览器中输入下面的代码验证：

console.log(undefined===null);//false
console.log(undefined==null);//true

　　所以，这里得到这样的结论：

let { x = 0, y = 0 } = { x:null,y: 9 };
console.log(x);//null
console.log(y);//9

也就是说，undefined===null是false，所以默认值不能生效，所以最终结果是null。

现在，再说明一下函数参数默认值，如下：

function fun（a = 0）{
　　...
}
 
fun（）；//这里函数调用时，没有传实参，所以默认值0生效；
fun（6）；//这里传递了实参，所以实参是6；

所以，函数参数默认值生效的标准是函数调用时没有传递实参；

那么我们再来分析一下上面的两个例子：

eg1:

function foo({x = 0, y = 0} = {}) {
    return [x, y];
}
console.log(foo({x: 6, y: 8}));// [6, 8] 

//说明：传递了实参，所以函数默认值{}不生效，对实参{x: 6, y: 8}解构赋值，对应的属性都有值，所以解构赋值的默认值不生效，所以x = 6，y = 8；

console.log(foo({x: 6}));// [6, 0]

//说明：传递了实参，所以函数默认值{}不生效，对实参{x: 3}解构赋值，对应的属性x有值，y没有值，所以解构赋值的默认值y生效,x不生效，所以x = 6，y = 0；

console.log(foo({}));// [0, 0]

//说明：传递了实参{}，所以函数默认值{}不生效，对实参{}解构赋值，对应的属性都没有值，所以解构赋值的默认值生效，所以x = 0，y = 0；

console.log(foo());// [0, 0]

//说明：没有传递实参，所以函数默认值{}生效，对实参{}解构赋值，对应的属性都没有值，所以解构赋值的默认值生效，所以x = 0，y = 0；

eg2:

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

    return [x, y];
}

console.log(foo({x: 6, y: 8})); // [6, 8]

//说明：传递了实参，所以函数默认值{x: 0, y: 0}不生效，对实参{x: 6, y: 8}解构赋值，对应的属性都有值，所以解构赋值的默认值不生效，所以x = 6，y = 8；

console.log(foo({x: 6})); // [6, undefined]

//说明：传递了实参，所以函数默认值{x: 0, y: 0}不生效，对实参{x: 6}解构赋值，对应的属性x有值，y没有值，所以x=6,因为本例没有解构赋值的默认值，所以y就是undefined；

console.log(foo({})); // [undefined, undefined]

//说明：传递了实参{}，所以函数默认值{x: 0, y: 0}不生效，对实参{}解构赋值，对应的属性没有值，所以x,y就是undefined；

console.log(foo()); // [0, 0]

//说明：没有传递实参，所以函数默认值{x: 0, y: 0}生效，对实参{x: 0, y: 0}解构赋值，对应的属性有值，所以x,y就是0；

这样分析下来是不是就容易理解多了，以上是查阅资料后的个人拙见，如有不妥处，请指正，谢谢！