一句话理解ES6的解构赋值

前端发展到今天，我们对ES6系列的语法糖已经有了比较熟悉的了解。其中解构赋值在取值赋值这一块给出了极大的便利。

一般解构的是对象和数组或者是Set集合。

结构赋值也分为：数组的解构赋值，对象的解构赋值。

首先抛出如何一句话理解解构赋值，然后我们再来进行结构赋值的具体分析；

重点来了，取值操作的数据结构与赋值操作的数据结构一致

其本质就是 左边数据结构 = 右边数据结构，就可以实现解构赋值。

数组的解构，首先要明确解构的数据源必须是数组，同样的还要确定是否定义了需要赋值的变量。这样才能较为完整的理解清除整个数组的解构赋值过程。

输出的结果为：

很显然的看出把arr数据源中的值都提取出来了。

现在是把数据源中数据完全取出来，如果是只取出数据源中的部分数据，我们该怎么办呢？还是一句话：左边数据结构 = 右边数据结构 既可以实现数据的部分提取。

数据的解构赋值，是以数组的索引来与接收变量进行对应的。一个索引对用一个变量。

我们直接上代码分析：

从上面代码不难发现，在 let [year, blessing] = arr 这句话是在执行解构赋值。其year对应的是arr[0]中的值，blessing对应的是arr[1]中的值。左边是通过一个 [ ] 来与右边 arr 数据结构进行对应

结合扩展运算符（...）我们可以实现一个变量接收多个索引的值（一个解构赋值中只能使用一次扩展运算符），它会把其他的数组索引的值封装成一个数组。但本质没有变。那就是解构赋值左右两边的数据结构没有变。

查看blessing的输出结果为：

从上面的代码不难发现，数据结构层次没有任何变化。

与数据的解构赋值同样的理解。其 左边数据结构 = 右边数据结构 就可以实现对象的解构赋值。

对象解构赋值，是以对象中的属性名与接收变量名来一一进行对应的

直接开始撸上代码，这样通透明了。

在上面代码中， let {year, blessing } = obj 从数据解构层次上看，左边的数据结构与右边的数据解构完全一致，都是对象类型的。所以结果为：

当然这里又会重新提到扩展运算符（...）对此的实现（一个解构赋值中只能使用一次扩展运算符）。它会把其他属性的值封装成一个对象。直接献上代码已经结果：

输出结果为：

对于上面来说，这些数据解构都显得过于简单了。可以试试复杂的数据和对象，是否适应我所说的 左边数据结构 = 右边数据结构 的解构处理。

定义一个复杂的数组数据源。

对于这个复杂的数组，我梦如何去取出其skill里面的eat这个值呢？其实很简单，依然遵循等式两边的数据解构一致。

这样我们就可以取到值了。当然有人会奇怪为什么会在表达式的左边多一个逗号，那是因为数组的取值是按照索引来进行的。

接下来我们定义一个复杂的对象数据源

、

对于这个复杂的对象数据源，我们如何取出在skill数组中对象中的skill的值？

直接献上解构代码。不难发现，skill: test 是一个什么鬼？与上面的数据解构怎么不一样了？其实本质还是一样的。skill: test是使用的一个对象解构赋值的别名。方便区分在一个对象中不同数据层级的具有相同属性名的区分。但数据解构层次的还是没有任何变化。

总结：在解构赋值过程中，理解好这句话：取值操作的数据结构与赋值操作的数据结构一致，再难的解构也能够写出来。

原创文章转载请注明出处：https://www.jianshu.com/p/4a8998340d78