js中的解构

所谓解构，就是按照一定模式，从数组和对象中提取值，对变量进行赋值。

1.数组中的解构

以前的赋值

let a = 1;
let b = 2;
let c = 3;

使用解构就可以这样赋值

let [a, b, c] = [1,2,3] 

[1,2,3] 数组中的值会依次的赋值给a,b,c。

如果变量的个数小于数组的元素的个数，无影响。

let [a, b] = [1,2,3]
//a 1 
//b 2 

如果变量的个数大于数组的元素的个数

let [a, b, c, d] = [1,2,3]
//a 1 
//b 2 
//c 3 
//d undefined 

那么没有匹配到元素的变量就没有值，也就是undefined

当然在解构中也可以使用默认值

let [a, b, c = 33, d = 44] = [1,2,3]
//a 1 
//b 2 
//c 3 
//d 44

如果说需要取数组的一部分元素,在解构的时候使用,进行占位，用标识符接收我们真正需要的元素。

let [, b] = [1,2,3]
//b  2
let [a,...b] = [1,2,3,4]
//a 1
//b [2, 3, 4]

这里需要注意的是：拓展运算符（也就是…）只能出现在解构语法中的最后。

以下的写法就是错误的

let [a,...b, c] = [1,2,3,4]
//error

2.对象中的解构

对象中的解构需要注意两点：
1.对象的解构所用的变量要和对象的属性名一样才能拿到相应的值。
2.没有顺序要求

let obj = {a: 1, b: 2};
let {x, y} = obj;
//x undefined
//y undefined
let {a, b} = obj;
//a 1
//b 2
let {b, a} = obj;
//b 2
//a 1

在对象的解构中，还能为变量重命名

let obj = {a: 1, b: 2};
let {a: x, b: y} = obj;
//a 报错
//b 报错
//x 1
//y 2

也可以用来获取对象中的部分属性

let obj = {a: 1, b: 2, c: 3};
let {a, ...b} = obj;
//a 1
//b {b: 2, c: 3}

使用已有的变量进行解构

let x, y;
({a: x, b: y} = {a: 1, b: 2, c: 3});
//x 1
//y 2

这里需要注意一个小细节，就是需要用（）将代码块包裹住，要不然这里就会报错。因为在js中{ }中的内容被看成一个代码块。

对象的解构同样能够使用默认值

let x, y;
({a: x, b: y, d: z = {num: 1}} = {a: 1, b: 2, c: 3});
//x 1
//y 2
//z {num: 1}