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