JavaScript 中最常用的两种数据结构是 Object 和 Array。
- 对象是一种根据键存储数据的实体。
- 数组是一种直接存储数据的有序列表。
但是，当我们把它们传递给函数时，函数可能不需要整个对象/数组，而只需要其中一部分。
解构赋值 是一种特殊的语法，它使我们可以将数组或对象“拆包”至一系列变量中。有时这样做更方便。
解构操作对那些具有很多参数和默认值等的函数也很奏效。下面有一些例子。
数组解构
这是一个将数组解构到变量中的例子：
// 我们有一个存放了名字和姓氏的数组
let arr = ["John", "Smith"]
// 解构赋值
// 设置 firstName = arr[0]
// 以及 surname = arr[1]
let [firstName, surname] = arr;
alert(firstName); // John
alert(surname); // Smith我们可以使用这些变量而非原来的数组项了。
当与 split 函数（或其他返回值为数组的函数）结合使用时，看起来更优雅：
let [firstName, surname] = "John Smith".split(' ');
alert(firstName); // John
alert(surname); // Smith正如我们所看到的，语法很简单。但是有几个需要注意的细节。让我们通过更多的例子来加深理解。
这种语法被叫做“解构赋值”，是因为它“拆开”了数组或对象，将其中的各元素复制给一些变量。原来的数组或对象自身没有被修改。
换句话说，解构赋值只是写起来简洁一点。以下两种写法是等价的：
// let [firstName, surname] = arr;
let firstName = arr[0];
let surname = arr[1];可以通过添加额外的逗号来丢弃数组中不想要的元素：
// 不需要第二个元素
let [firstName, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];
alert( title ); // Consul在上面的代码中，数组的第二个元素被跳过了，第三个元素被赋值给了 title 变量。数组中剩下的元素也都被跳过了（因为在这没有对应给它们的变量）。
……实际上，我们可以将其与任何可迭代对象一起使用，而不仅限于数组：
let [a, b, c] = "abc"; // ["a", "b", "c"]
let [one, two, three] = new Set([1, 2, 3]);这种情况下解构赋值是通过迭代右侧的值来完成工作的。这是一种用于对在 = 右侧的值上调用 for..of 并进行赋值的操作的语法糖。
我们可以在等号左侧使用任何“可以被赋值的”东西。
例如，一个对象的属性：
let user = {};
[user.name, user.surname] = "John Smith".split(' ');
alert(user.name); // John
alert(user.surname); // Smith在前面的章节中我们已经见过了 Object.entries(obj) 方法。
我们可以将 .entries() 方法与解构语法一同使用，来遍历一个对象的“键—值”对：
let user = {
name: "John",
age: 30
};
// 使用循环遍历键—值对
for (let [key, value] of Object.entries(user)) {
alert(`${key}:${value}`); // name:John, then age:30
}用于 Map 的类似代码更简单，因为 Map 是可迭代的：
let user = new Map();
user.set("name", "John");
user.set("age", "30");
// Map 是以 [key, value] 对的形式进行迭代的，非常便于解构
for (let [key, value] of user) {
alert(`${key}:${value}`); // name:John, then age:30
}使用解构赋值来交换两个变量的值是一个著名的技巧：
let guest = "Jane";
let admin = "Pete";
// 让我们来交换变量的值：使得 guest = Pete，admin = Jane
[guest, admin] = [admin, guest];
alert(`${guest} ${admin}`); // Pete Jane（成功交换！）这里我们创建了一个由两个变量组成的临时数组，并且立即以颠倒的顺序对其进行了解构赋值。
我们也可以用这种方式交换两个以上的变量。
其余的 ‘…’
通常，如果数组比左边的列表长，那么“其余”的数组项会被省略。
例如，这里只取了两项，其余的就被忽略了：
let [name1, name2] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];
alert(name1); // Julius
alert(name2); // Caesar
// 其余数组项未被分配到任何地方如果我们还想收集其余的数组项 —— 我们可以使用三个点 "..." 来再加一个参数以获取其余数组项：
let [name1, name2, ...rest] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];
// rest 是包含从第三项开始的其余数组项的数组
alert(rest[0]); // Consul
alert(rest[1]); // of the Roman Republic
alert(rest.length); // 2rest 的值就是数组中剩下的元素组成的数组。
不一定要使用变量名 rest，我们也可以使用任何其他的变量名。只要确保它前面有三个点，并且在解构赋值的最后一个参数位置上就行了：
let [name1, name2, ...titles] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];
// 现在 titles = ["Consul", "of the Roman Republic"]默认值
如果数组比左边的变量列表短，这里不会出现报错。缺少对应值的变量都会被赋 undefined：
let [firstName, surname] = [];
alert(firstName); // undefined
alert(surname); // undefined如果我们想要一个“默认”值给未赋值的变量，我们可以使用 = 来提供：
// 默认值
let [name = "Guest", surname = "Anonymous"] = ["Julius"];
alert(name); // Julius（来自数组的值）
alert(surname); // Anonymous（默认值被使用了）默认值可以是更加复杂的表达式，甚至可以是函数调用。不过，这些表达式或函数只会在这个变量未被赋值的时候才会被计算。
举个例子，我们使用了 prompt 函数来提供两个默认值：
// 只会提示输入姓氏
let [name = prompt('name?'), surname = prompt('surname?')] = ["Julius"];
alert(name); // Julius（来自数组）
alert(surname); // 你输入的值请注意：prompt 将仅针对缺失值（surname）运行。
对象解构
解构赋值同样适用于对象。
基本语法是：
let {var1, var2} = {var1:…, var2:…}在等号右侧是一个已经存在的对象，我们想把它拆分到变量中。等号左侧包含了对象相应属性的一个类对象“模式（pattern）”。在最简单的情况下，等号左侧的就是 {...} 中的变量名列表。
如下所示：
let options = {
title: "Menu",
width: 100,
height: 200
};
let {title, width, height} = options;
alert(title); // Menu
alert(width); // 100
alert(height); // 200属性 options.title、options.width 和 options.height 值被赋给了对应的变量。
变量的顺序并不重要，下面这个代码也是等价的：
// 改变 let {...} 中元素的顺序
let {height, width, title} = { title: "Menu", height: 200, width: 100 }等号左侧的模式（pattern）可以更加复杂，指定属性和变量之间的映射关系。
如果我们想把一个属性赋值给另一个名字的变量，比如把 options.width 属性赋值给名为 w 的变量，那么我们可以使用冒号来设置变量名称：
let options = {
title: "Menu",
width: 100,
height: 200
};
// { sourceProperty: targetVariable }
let {width: w, height: h, title} = options;
// width -> w
// height -> h
// title -> title
alert(title); // Menu
alert(w); // 100
alert(h); // 200冒号的语法是“从对象中什么属性的值：赋值给哪个变量”。上面的例子中，属性 width 被赋值给了 w，属性 height 被赋值给了 h，属性 title 被赋值给了同名变量。
对于可能缺失的属性，我们可以使用 "=" 设置默认值，如下所示：
let options = {
title: "Menu"
};
let {width = 100, height = 200, title} = options;
alert(title); // Menu
alert(width); // 100
alert(height); // 200就像数组或函数参数一样，默认值可以是任意表达式甚至可以是函数调用。它们只会在未提供对应的值时才会被计算/调用。
在下面的代码中，prompt 提示输入 width 值，但不会提示输入 title 值：
let options = {
title: "Menu"
};
let {width = prompt("width?"), title = prompt("title?")} = options;
alert(title); // Menu
alert(width); // (prompt 的返回值)我们还可以将冒号和等号结合起来：
let options = {
title: "Menu"
};
let {width: w = 100, height: h = 200, title} = options;
alert(title); // Menu
alert(w); // 100
alert(h); // 200如果我们有一个具有很多属性的复杂对象，那么我们可以只提取所需的内容：
let options = {
title: "Menu",
width: 100,
height: 200
};
// 仅提取 title 作为变量
let { title } = options;
alert(title); // Menu剩余模式（pattern）“…”
如果对象拥有的属性数量比我们提供的变量数量还多，该怎么办？我们可以只取其中的某一些属性，然后把“剩余的”赋值到其他地方吗？
我们可以使用剩余模式（pattern），与数组类似。一些较旧的浏览器不支持此功能（例如 IE，可以使用 Babel 对其进行 polyfill），但可以在现代浏览器中使用。
看起来就像这样：