ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。解构赋值在一些场景下还是很有用的。
数组：
从数组中提取值，按照对应位置，对变量赋值。“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。如果解构不成功，变量的值就等于undefined。不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组。这种情况下，解构依然可以成功。
let [a, [[b], c]] = [1, [[2], 3]];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
let [ , , d] = [5, 6, 7];
console.log(d); // 7
let [e, , f] = [8, 9, 10];
console.log(e); // 8
console.log(f); // 10
let [g, ...h] = [1, 2, 3, 4];
console.log(g); // 1
console.log(h); // [2, 3, 4]
let [i, j, ...k] = [5];
console.log(i);// 5
console.log(j); // undefined
console.log(k); // []
let [l] = [];
let [m, n] = [6];
console.log(l);//undefined
console.log(m);//6
console.log(n);//undefined
let [x, y] = [1, 2, 3];
console.log(x); // 1
console.log(y); // 2
对象：
对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。否则undefined。
let {a, b, c} = {a: "aaa", b:"bbb"};
console.log(a);//aaa
console.log(b);//bbb
console.log(c);//undefined
对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。
let {fa: a, fb: b } = {fa: "aaa",fb: "bbb"};
console.log(a);//aaa
console.log(b);//bbb
console.log(fa);//Uncaught ReferenceError: fa is not defined
console.log(fb);//Uncaught ReferenceError: fb is not defined
也就是说通过fa、fb找到对应的的同名属性，然后把值赋给变量a、b，这是需要特别注意的点。如果是{a,b}等同于{a: a, b: b}
同样的，可以嵌套解构：
let {
a: [e], a: [{
b: {
c:[d]
}
}]
} = {
a: [{
b: {
c: [0]
}
}]
};
console.log(d);//0
嵌套解构在实际中一般不会使用，所以我们只要记住，左右两边解构一致，就可以解构赋值。
字符串：
字符串会被解析成数组去解构：
let [a, b, c, d] = '123';
console.log(a);//1
console.log(b);//2
console.log(c);//3
console.log(d);//undefined
let {length: len} = 'hello';
console.log(len); // 5
特别注意，字符串能获得字符串长度解构。
数值、布尔值、undefined、null也能够解构，但是不推荐使用，这边就不说了。
函数参数也支持解构：
function add([x, y]){
return x + y;
}
console.log(add([1, 2]));; // 3
默认值：
解构赋值允许设定默认值，也就是说右边没有对应上的时候，会取左边设定的默认值。
let [a = 0, b = 1, c = 2] = [8, 8];
console.log(a);//8
console.log(b);//8
console.log(c);//2
对象也一样：
let {a: a, b: b, c: c = 6} = {a: 8, b: 8};
console.log(a);//8
console.log(b);//8
console.log(c);//6
用途：
一个方法，比较重要的就是用途了。解构赋值在一些场景下非常有用
交换变量：
let [x, y] = [1, 2];
[x, y] = [y, x];
console.log(x);//2
console.log(y);//1
函数返回值，也就是return、函数参数可以很方便的把数据对应起来，还可以设置默认值。
提取JSON：
比如我们调用接口返回了很多数据，我们需要一个一个赋值
let data = {
have: 'new',
old: 'old',
free: [0, 1, 2, 3],
}
let have = data.new;
let old = data.old;
let free = data.free;
使用解构的话：
let {free, old, have} = data;
其实我们一直使用的import {}使用的也是解构。
欢迎关注Coding个人笔记 公众号
网友评论