ES6之变量的解构赋值-白红宇

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。解构赋值在一些场景下还是很有用的。

数组：

从数组中提取值，按照对应位置，对变量赋值。“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。如果解构不成功，变量的值就等于undefined。不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组。这种情况下，解构依然可以成功。

let [a, [[b], c]] = [1, [[2], 3]];console.log(a); // 1console.log(b); // 2console.log(c); // 3let [ , , d] = [5, 6, 7];console.log(d); // 7let [e, , f] = [8, 9, 10];console.log(e); // 8console.log(f); // 10let [g, ...h] = [1, 2, 3, 4];console.log(g); // 1console.log(h); // [2, 3, 4]let [i, j, ...k] = [5];console.log(i);// 5console.log(j); // undefinedconsole.log(k); // []let [l] = [];let [m, n] = [6];console.log(l);//undefinedconsole.log(m);//6console.log(n);//undefinedlet [x, y] = [1, 2, 3];console.log(x); // 1console.log(y); // 2复制代码

对象：

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。否则undefined。

let {a, b, c} = {a: "aaa", b:"bbb"};console.log(a);//aaaconsole.log(b);//bbbconsole.log(c);//undefined复制代码

对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

let {fa: a, fb: b } = {fa: "aaa",fb: "bbb"};console.log(a);//aaaconsole.log(b);//bbbconsole.log(fa);//Uncaught ReferenceError: fa is not definedconsole.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);//1console.log(b);//2console.log(c);//3console.log(d);//undefinedlet {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);//8console.log(b);//8console.log(c);//2复制代码

对象也一样：

let {a: a, b: b, c: c = 6} = {a: 8, b: 8};console.log(a);//8console.log(b);//8console.log(c);//6复制代码

用途：

一个方法，比较重要的就是用途了。解构赋值在一些场景下非常有用

交换变量：

let [x, y] = [1, 2];[x, y] = [y, x];console.log(x);//2console.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个人笔记公众号