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