ES6数组的解构赋值（ 下）

Posted 2020-10-01

对象的解构赋值 

对象的解构赋值跟数组的解构赋值很类似，我们来看一段小代码：

 var { a,b,c} = {"a":1,"b":2,"c":3};
    console.log(a);//结果：a的值为1    
    console.log(b);//结果：b的值为2
    console.log(c);//结果：c的值为3

     这段例子的代码是不是跟数组的解构赋值很相似，只不过是数组换成了对象。但是两者有一个不同的地方，我们对上面的代码稍做修改：

   var { a,b,c } = {"a":1,"c":3,"b":2};
    console.log(a);//结果：a的值为1
    console.log(b);//结果：b的值为2
    console.log(c);//结果：c的值为3

　　

我把右侧的对象属性b和属性c的位置进行了调换，但这并不会影响赋值的结果，变量b和变量c的值不会改变，依然是b为2，c为3。这就告诉我们对象的解构赋值不会受到属性的排列次序影响（数组则会受影响），它是跟属性名关联起来的，变量名要和属性名一致，才会成功赋值。

  如果变量找不到与其名字相同的属性，就会赋值不成功，如下面的例子：

    var { a } = {"b":2};
    console.log(a);//结果：a的值为undefined

 变量a在右侧找不到与之名字匹配的属性a，所以变量a赋值不成功，a的值为undefined。

 但也不是完全没有办法补救的，如果你想给一个变量名与属性名不一样的变量解构赋值，可以这样写：

    var { b:a,} = {"b":2};
    console.log(a);//结果：a的值为2