浅析ES6解构赋值

1.解构的概念

解构的英文是Destructuring(De-struct-uring)，struct是结构体，uring是动词后缀，structuring是结构化的意思，de是表否定前缀，所以Destructuring连起来就是去结构化，分解结构的意思。

在ES6中解构赋值是指对数组、对象的结构进行拆分并取值，并将取到的值赋值给变量

2.数组的解构赋值

数组的解构赋值是根据数组的结构有次序的赋值（等号两边的形式一致即可）

//1.一般形式
var [a,b,c]=[1,2,3];    //左右两边形式一致 a=1, b=2, c=3
console.log(a,b,c);     //输出 1 2 3
//2.在项目中我们常常对一个变量(比如说arr)表示的数组进行结构，本质上是一样的
const arr = [1,2,3]
var [a,b,c] = arr       // 等价于[a,b,c] = [1,2,3] 形式是一样的
console.log(a,b,c);     //输出 1 2 3
//3.不需要匹配的位置可以置空
var [a,,c] = [1,2,3]
console.log(a,c)        //输出 1 3
//4.可以使用...扩展运算符匹配余下的所有值
var [a,b,...c]=[1,2,3,4,5,6]
console.log(a,b,c)      //输出 1 2 [3,4,5,6]

3.对象的解构赋值

对象的解构赋值相比于数组其属性是没有次序的，所以变量必须与属性同名，才能取到正确的值。

//1.一般形式
var {a,b}={a:1,b:2};    //属性名相同 
console.log(a,b);       //输出 1 2
//2.常见形式
var obj = {a:1,b:2}
var {a,b} = obj
console.log(a,b);     //输出 1 2
//3.对深层次的对象结构（保证形式一致即可）
var obj= {
   arr: [1,{ a: 2 } ]
 };
var { arr: [x, {a}]}=obj
console.log(x,a);     //输出 1 2
//3.自定义属性名
var {a,b:name} = {a:1,b:2}    //将属性b赋值给name变量
console.log(a,name);    //输出 1 "2"

4.字符串的解构赋值

字符串也可以解构赋值

var [a,b,c,d,e]="hello"
console.log(a,b,c,d,e) //输出 a b c d e