对ES6的解构赋值理解

解构赋值：在ES6中允许按照一定的模式从数组和对象中提取值，对变量进行赋值的过程

先从第一个结构数组说：

//创建数组变量

const NAMES = ["家驹", "国荣", "德华", "霆锋"];

//解构赋值

let [huang, zhang, liu, xie] = NAMES;

console.log(huang);  //得到的结果为家驹

console.log(zhang);  //得到的结果为国荣

console.log(liu);        //得到的结果为德华

console.log(xie);       //得到的结果为霆锋

现在就来详细说一下为什么会有这样的结果

我主要是通过地址来讲解，就是为了大家更清晰。

定义变量，变量名NAMES就是数组的地址，跟宿舍是一个道理，NAMES就是宿舍号，内容就是宿舍成员，可以根据宿舍号找到家驹这个人。

 let [huang, zhang, liu, xie] = NAMES;我对这行代码的理解不是很深，我就利用我自己的C语言知识来讲解。

我的理解就是定义了一个数组，但是这个数组没有变量名，任何将NAMES数组的地址赋值给该新创建的数组。

 

我将上面的数组NAMES和新创建的一起做对比，其实NAMES这个变量名就是指向的数组都是同一个，所以你可以根据NAMES[0]得到的是家驹也可以得到的是huang，其实两者就是一样的对象，也就是huang = "家驹";，其他的变量亦是如此，所以解构赋值的作用就跟定义变量并赋值时一样的

 

接下来讲解对象结构的解构赋值

 //创建对象

  const ZHOU = {

            name: "周润发",

            age: "不详",

            address: "香港",

            movie: function(){

                console.log("英雄本色");

            }

     };

//解构赋值

 let {name, age, address, movie} = ZHOU;

 console.log(name);        //得到的是周润发

 console.log(age == ZHOU.age);         //得到的是true

 console.log(address == ZHOU.address);        //得到的是true

  movie();        //调用对象中的函数

同样通过地址来讲解：

创建对象：

  let {name, age, address, movie} = ZHOU;我个人对这行代码的理解：同数组时一样的原理，变量名PLAYER都是指向同一个对象

 两者的对比

对象访问属性的方式为：PLAYER.name 得到的结果就是周润发。

那么对右边的结构来说，访问得到的是属性，也就是PALAYER.name得到的就是周润发

即所以两者表示的是同一个东西，也就是PLAYER.name = "周润发";

或许有很多朋友会有这样的疑惑，右边的变量名可不可以不和对象的属性名一样呢，答案是可以的，但是得到的是undefined。为什么

因为如果你定义的变量名和对象属性名不一样，比如我在右边还定义了一个gender变量，明显PLAYER.gender是对象没有定义的属性，这就好等于给原来对象添加新的属性一样。

好了，这就是我对解构赋值的理解了，希望可以帮到你