JS中的解构

友情链接：GitHub知识全解仓库

1. 数组解构

在js中数组的结构是相当的灵活，但是有一个原则是不能打破的，结构时中括号不能省略，不能像python中那样直接进行不带中括号的结构，这是因为js中的逗号运算符的原因。

1. 变量个数和数组元素个数相同的解构：

var arr = ['tom', 'jeery', 'jacky', 'doinb', 'clearlove8'];
let [a, b, c, d, e] = arr;
console.log(a, b, c, d, e);
输出结果：tom jeery jacky doinb clearlove8

变量和数组元素一一对应很好理解。

2. 变量个数比数组元素个数少的解构：

var arr = ['tom', 'jeery', 'jacky', 'doinb', 'clearlove8'];
let [a, b] = arr;
console.log(a, b);
输出结果：tom jeery

变量个数比数组元素个数少一样不会出错，只会拿到前两个变量，而在python中这样是会报错的。

3. 变量个数比数组元素个数多的解构：

var arr = ['tom', 'jeery', 'jacky', 'doinb', 'clearlove8'];
let [a, b, c, d, e, f, g, h, i] = arr;
console.log(a, b, c, d, e, f, g, h, i);
输出结果：tom jeery jacky doinb clearlove8 undefined undefined undefined undefined

变量个数比数组元素个数多的解构依旧不会报错，只是多出的变量没有拿到值而已。

4. 使用丢弃变量进行解构：

var arr = ['tom', 'jeery', 'jacky', 'doinb', 'clearlove8'];
let [a, , , d] = arr;
console.log(a, d);
输出结果：tom doinb

我们可以看到，在解构的时候使用,,进行占位，用标识符接收我们真正需要的元素。

5. 使用可变变量进行解构：

var arr = ['tom', 'jeery', 'jacky', 'doinb', 'clearlove8'];
let [a, b, ...c] = arr;
console.log(a, b);
console.log(c);
输出结果：tom jeery
		[ 'jacky', 'doinb', 'clearlove8' ]

可以看到，我们使用一个可变变量...c进行接收后面的剩余元素，只需要拿到我们想要的a、b或者想要的c数组。

5. 使用缺省值进行解构：

var arr = ['tom', 'jeery', 'jacky', 'doinb', 'clearlove8'];
let [a, b, c=100, d, e=200, f=300] = arr;
console.log(a, b, c, d, e, f);
输出结果：tom jeery jacky doinb clearlove8 300

a, b, c, d, e虽然有的有缺省值，但是因为能够解构得到值，它们的值都被更新为解构得到的值了，而f变量没有解构得到值，只能使用自身的缺省值。

6. 总结：解构的时候，变量从左到右和元素对齐，可变参数放到最右边。能对应到数据就返回数据，对应不到数据的返回默认值，如果没有默认值返回undefined，把前面5中方法结合使用，我们发现js中的数组解构是相当的灵活。

2. 对象解构

同样，像数组解构那样，对象的解构也需要相同类型的括号，对象结构使用大括号{}。

1. 简单对象解构：

const obj = {
		a:100,
		b:200,
		c:300
		}

var {x, y, z} = obj;
console.log(x, y, z);
输出结果：undefined undefined undefined

var {a, b, c} = obj;
console.log(a, b, c);
输出结果：100 200 300

从这个例子可以看出，对象的解构所用的变量要和对象的属性名一样才能拿到相应的值。

2. 对象解构同时重命名：

const obj = {
		a:100,
		b:200,
		c:300
		}

var {a:x, b:y, c:z} = obj;
console.log(x, y, z);
输出结果：100 200 300

console.log(a, b, c);  // 报错  a is not defined

从这个例子可以看出，对象解构虽然要使用相应的名称才可以拿到值，但是我们可以为其进行重命名，从例子上分析出，js会使用a, b, c到对象上取值，取到值之后赋值给x, y, z，这样通过x, y, z进行使用相应的值，a, b, c则未定义。

3. 复杂解构：

var data = {
		a:100,
		b:[
		{
			c:200,
			d:[],
			a:300
		},
		{
			c:1200,
			d:[1],
			a:300
		},
	],
	c:500
}

var {a:m, b:[{a:n}, {a:n1}]} = data;
console.log(m, n, n1);

这个复杂例子一般我们是用不到的，但是可以帮助我们理解解构。