大家好，我是进阶学习者。
前言
解构赋值：是一种特殊的语法，它使可以将数组或对象“拆包”为到一系列变量中，因为有时候使用变量更加方便。解构操作对那些具有很多参数和默认值等的函数也很奏效。
一、数组解构
下面是一个将数组解构到变量中的。
例：
1<script> 2 // 有一个存放了名字和姓氏的数组 3 let arr = ["Ilya", "Kantor"] 4 // 解构赋值 5 // sets firstName = arr[0] 6 // and surname = arr[1] 7 let [firstName, surname] = arr; 8 alert(firstName); // Ilya 9 alert(surname); // Kantor 10</script>
现在就可以针对这些变量进行操作，而不是针对原来的数组元素。
当与 split 函数（或其他返回值是数组的函数）结合使用时，看起来就更优雅了：
let [firstName, surname] = "Ilya Kantor".split(' ');
1. “解构”并不意味着“破坏”
这种语法叫做“解构赋值”，因为它通过将结构中的各元素复制到变量中来达到“解构”的目的。但数组本身是没有被修改的。
2. 剩余的 ‘…’
如果不只是要获得第一个值，还要将后续的所有元素都收集起来 — 可以使用三个点 "..." 来再加一个参数来接收“剩余的”元素：
1 2let [name1, name2, ...rest] = ["Julius", "Caesar", "Consul", "of the Roman Republic"]; 3alert(name1); // Julius 4alert(name2); // Caesar 5// 请注意，`rest` 的类型是数组 6alert(rest[0]); // Consul 7alert(rest[1]); // of the Roman Republic 8alert(rest.length); // 2
rest 的值就是数组中剩下的元素组成的数组。不一定要使用变量名 rest，也可以使用其他的变量名，只要确保它前面有三个点，并且在解构赋值的最后一个参数位置上就行了。
3. 默认值
如果赋值语句中，变量的数量多于数组中实际元素的数量，赋值不会报错。未赋值的变量被认为是 undefined。
1let [firstName, surname] = []; 2 3alert(firstName); // undefined 4alert(surname); // undefined
如果想要一个“默认”值给未赋值的变量，可以使用 = 来提供：
1// 默认值 2let [name = "Guest", surname = "Anonymous"] = ["Julius"]; 3alert(name); // Julius（来自数组的值） 4alert(surname); // Anonymous（默认值被使用了
默认值可以是更加复杂的表达式甚至可以是函数调用，这些表达式或函数只会在这个变量未被赋值的时候才会被计算。
使用了 prompt 函数来提供两个默认值，但它只会在未被赋值的那个变量上进行调用：
1 2// 只会提示输入姓氏 3let [name = prompt('name?'), surname = prompt('surname?')] = ["Julius"]; 4alert(name); // Julius（来自数组） 5alert(surname); // 输入的值
二、对象解构
解构赋值同样适用于对象。
基本语法：
let {var1, var2} = {var1:…, var2:…}
在等号右侧有一个已经存在的对象，想把它拆开到变量中。等号左侧包含了对象相应属性的一个“（pattern）模式”。
在简单的情况下，等号左侧的就是 {...} 中的变量名列表。
例 ：
1 2let options = { 3 title: "Menu", width: 100, height: 200 4}; 5let {title, width, height} = options; 6alert(title); // Menualert(width); // 100 7alert(height); // 200
属性 options.title、options.width 和 options.height 值被赋给了对应的变量。变量的顺序并不重要，下面这个代码也奏效：
1 2// 改变 let {...} 中元素的顺序 3let {height, width, title} = { title: "Menu", height: 200, width: 100 }
就像数组或函数参数一样，默认值可以是任意表达式甚至可以是函数调用。它们只会在未提供对应的值时才会被计算/调用。
1. 剩余模式（pattern）
如果对象拥有的属性数量比提供的变量数量还多，该怎么办？
可以只取其中的某一些属性，然后把“剩余的”赋值到其他地方吗？
可以使用剩余模式（pattern），就像对数组那样。一些较旧的浏览器不支持此功能（例如，使用 Babel 对其进行填充），但可以在现代浏览器中使用。
例：
1 2let options = { 3 title: "Menu", 4 height: 200, 5 width: 100 6}; 7// title = 名为 title 的属性 8// rest = 存有剩余属性的对象 9let {title, ...rest} = options; 10// 现在 title="Menu", rest={height: 200, width: 100} 11alert(rest.height); // 200 12alert(rest.width); // 100
注：
变量都是在赋值中通过正确方式声明的：let {…} = {…}。当然，也可以使用已有的变量，而不用 let，但这里有一个陷阱。
三、智能函数参数
案例
解构赋值语法：可以把所有参数当作一个对象来传递，然后函数马上把这个对象解构成多个变量：
1 2// 传递一个对象给函数 3let options = { 4 title: "My menu", 5 items: ["Item1", "Item2"] 6}; 7// ……然后函数马上把对象展开成变量 8function showMenu({title = "Untitled", width = 200, height = 100, items = []}) { 9 // title, items – 提取于 options， 10 // width, height – 使用默认值 11 alert( `${title} ${width} ${height}` ); // My Menu 200 100 12 alert( items ); // Item1, Item2 13} 14showMenu(options);
同样可以使用带有嵌套对象和冒号映射的更加复杂的解构：
1let options = { 2 title: "My menu", 3 items: ["Item1", "Item2"] 4}; 5function showMenu({ 6 title = "Untitled", 7 width: w = 100, // width goes to w 8 height: h = 200, // height goes to h 9 items: [item1, item2] // items first element goes to item1, second to item2 10}) { 11 alert( `${title} ${w} ${h}` ); // My Menu 100 200 12 alert( item1 ); // Item1 13 alert( item2 ); // Item2 14} 15showMenu(options);
完整语法和解构赋值是一样的：
1 2function({ 3 incomingProperty: varName = defaultValue 4 5})
注：
对于参数对象，属性 incomingProperty 对应的变量是 varName，默认值是 defaultValue。
这种解构假定了 showMenu() 函数确实存在参数。如果想让所有的参数都使用默认值，那应该传递一个空对象：
showMenu({}); // 不错，所有值都取默认值showMenu(); // 这样会导致错误
可以通过指定空对象 {} 为整个参数对象的默认值来解决这个问题：
1 2function showMenu({ title = "Menu", width = 100, height = 200 } = {}) { 3 alert( `${title} ${width} ${height}` ); 4} 5showMenu(); // Menu 100 200
运行结果：
整个参数对象的默认是 {}，因此总会有内容可以用来解构。
四、总结
本文基于JavaScript基础，介绍了解构赋值，数组解构，介绍了常见的数组操作，对象结构。在实际应用中需要注意的点，遇到的难点，提供了详细的解决方法。
使用JavaScript语言，能够让读者更好的理解。代码很简单，希望能够帮助读者更好的学习。
-------------------********************************** End **********-------------**-----********-**********************************
往期精彩文章推荐：
欢迎各位大佬点击链接加入群聊【helloworld开发者社区】：https://jq.qq.com/?_wv=1027&k=mBlk6nzX进群交流IT技术热点。