解构赋值是一个听起来比较高大上的特性，但它就是一种语法糖。它并没有赋予js更强大的能力，只是让赋值操作更加的灵活，效率。
在es6之前，赋值操作需要=左边是一个变量，右边是一个数据或返回数据的函数等。而解构赋值，是将=右边的结构分解(解构)，然后按照格式给=左边进行赋值，主要分为数组的解构赋值和对象的解构赋值。
语法
解构赋值的格式为，=左边为解构赋值的语法，=右边为初始化器，即一个对象或数组。
数组的解构赋值
数组的解构赋值是基于数组位置的，比如：
也可以通过解构改变变量的值。比如：
当=左边与右边不完全匹配时，未能匹配到的变量会被赋值为undefined,比如：
所以可以通过给一些变量指定默认值，以防止这种情况的发生。比如：
注意：只有当在右边找不到对应的值或值为undefined时，才会使用默认值。
有时候，解构赋值中，你可能只关心一部分数据，这时可以通过占位符只给某些值赋值。比如：
在解构赋值中，通过在变量前加…号，表示生成的变量为一个数组。比如：
上面展示的情况都是可以联合使用的,比如：
对象的解构赋值
对象的解构赋值是基于属性的。比如：
与数组的解构赋值一样，对象的解构赋值一样给未能解构的变量赋值undefined，一样可以使用默认值。
当给已存在的变量解构赋值时，注意加()
这是由于如果不加(),js会把左边看成一个代码块，会报错。加了()后，整个变成了一个合法的表达式。
在上面的解构赋值中，变量名和对象中的属性名必须相同，只有这样，才能找到对应的要解构赋值的数据。但如果我们想要给数据赋一个不同的名字呢？ 也是有办法的。
这样相应的名字和年龄就被赋值给myName和myAge了。
也可以同时使用默认值：
以上我们列举的对象的解构赋值的例子都非常的简单，但在实际开发中，JSON数据可能是非常复杂的，这时的解构赋值语法也可能变得复杂。比如：
注意：每当有:出现在解构赋值中时，:左边的标识符表示要检查的位置，右边表示要赋值的目标，如果右边是{}或[]时，表示要赋值的变量在更深层次结构中。
上面的所有实例，如默认值，变量更名等特性都可能存在于一个解构赋值语句中。并且，数组的解构赋值与对象的解构赋值，也可以混合使用。这为我们从复杂的数据结构中提取相应数据提供了极大的便利。
函数参数的解构
函数参数的解构功能对于实现多参的函数是非常有用的。比如
上面的函数是常用的实现多参函数的方式，name,value为必填参数，所有可选参数封装到options中，作为options的属性使用。但上面的函数存在一个问题就是，你只看函数的定义，是无法知道到底可选参数的名称是什么的？你需要阅读函数代码，了解函数才能使用它。
使用函数参数解构则直观很多：
使用同样的使用方式可以调用这个函数。
但是这种写法有种问题是当只传入name和value参数时，会报错。
更好的写法是使用函数的默认参数。
注意事项
- 数组的解构赋值中，使用…rest的变量必须放在最后。
- 与普通的变量的赋值语句一样，解构赋值语句也是有值的，它的值就是=右边的内容。
最佳实践
在es6之前，交换两个变量的值，需要创建一个中间变量，类似这样
现在只需要一行代码：
[a,b]= [b,a]
在实际开发中，数据解构是非常复杂的，使用对象属性去层层调用的语法非常不直观，通过解构赋值，可以让代码更加的直观与简洁。
数组的解构赋值中，有个小技巧。
这样就实现了数组的浅复制，而在以前，数组的复制都是通过concat()方法来完成。
閱讀更多 渡一教育web前端開發 的文章
