数组解构
对象解构
- 解构对象的完整语法
- 剩余模式（pattern）”…”
  - 不使用let时的陷阱
嵌套解构
智能函数参数

一、解构赋值语法是能从数组或对象对应的数组结构或对象字面量里提取数据的JavaScript表达式

var foo = ['one', 'two', 'three']
// 不使用解构
var one = foo[0]
var two = foo[1]
var three = foo[2]
// 使用解构
var [one, two, three] = foo

二、解构赋值是一种特殊的语法，它使我们可以将数组或对象“拆包”为到一系列变量中，因为有时候使用变量更加方便。解构操作对那些具有很多参数和默认值等的函数也很奏效。
三、解构赋值可以立即将一个对象或数组映射到多个变量上。

数组解构

一、解构赋值通过将结构中的各元素复制到变量中来达到“解构”的目的。但数组本身是没有被修改的。
【示例1】将数组解构到变量中：

// 我们有一个存放了名字和姓氏的数组
let arr = ["Ilya", "Kantor"]

// 解构赋值
// sets firstName = arr[0]
// and surname = arr[1]
// 以下是上面2行更精简的写法
let [firstName, surname] = arr;

alert(firstName); // Ilya
alert(surname);  // Kantor

1、现在我们就可以针对这些变量进行操作，而不是针对原来的数组元素。
二、当与split函数（或其他返回值是数组的函数）结合使用时，看起来就更优雅了：

let [firstName, surname] = "Ilya Kantor".split(' ');

三、数组中不想要的元素也可以通过添加额外的逗号来把它丢弃：
【示例1】数组的第二个元素被跳过了，第三个元素被赋值给了title变量，数组中剩下的元素也都被跳过了（因为在这没有对应给它们的变量）。

// 不需要第二个元素
let [firstName, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

alert( title ); // Consul

四、等号右侧可以是任何可迭代对象
【示例1】我们可以将其与任何可迭代对象一起使用，而不仅限于数组

let [a, b, c] = "abc"; // ["a", "b", "c"]
let [one, two, three] = new Set([1, 2, 3]);

五、我们可以在等号左侧使用任何“可以被赋值的”东西。
例如，一个对象的属性：

let user = {};
[user.name, user.surname] = "Ilya Kantor".split(' ');

alert(user.name); // Ilya

六、与 .entries() 方法进行循环操作
【示例1】我们可以将 .entries() 方法与解构语法一同使用，来遍历一个对象的“键—值”对：

let user = {
  name: "John",
  age: 30
};

// 循环遍历键—值对
for (let [key, value] of Object.entries(user)) {
  alert(`${key}:${value}`); // name:John, then age:30
}

【示例2】对于 map 对象也类似：

let user = new Map();
user.set("name", "John");
user.set("age", "30");

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（成功交换！）

1、这里我们创建了一个由两个变量组成的临时数组，并且立即以交换了的顺序对其进行了解构。
2、我们可以用这种方式交换两个以上的变量。

解构数组的完整语法

let [item1 = default, item2, ...rest] = array

数组的第一个元素被赋值给item1，第二个元素被赋值给item2，剩下的所有元素被复制到另一个数组rest。

剩余的 ‘…’

一、如果我们不只是要获得第一个值，还要将后续的所有元素都收集起来 — 我们可以使用三个点”…”来再加一个参数来接收“剩余的”元素：

let [name1, name2, ...rest] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

alert(name1); // Julius
alert(name2); // Caesar

// 请注意，`rest` 的类型是数组
alert(rest[0]); // Consul
alert(rest[1]); // of the Roman Republic
alert(rest.length); // 2

二、rest的值就是数组中剩下的元素组成的数组。不一定要使用变量名rest，我们也可以使用其他的变量名，只要确保它前面有三个点，并且在解构赋值的最后一个参数位置上就行了。

默认值

一、如果赋值语句中，变量的数量多于数组中实际元素的数量，赋值不会报错。未赋值的变量被认为是undefined：

let [firstName, surname] = [];

alert(firstName); // undefined
alert(surname); // undefined

二、如果我们想要一个“默认”值给未赋值的变量，我们可以使用=来提供：

// 默认值
let [name = "Guest", surname = "Anonymous"] = ["Julius"];

alert(name);    // Julius（来自数组的值）
alert(surname); // Anonymous（默认值被使用了）

三、默认值可以是更加复杂的表达式甚至可以是函数调用，这些表达式或函数只会在这个变量未被赋值的时候才会被计算。
【示例1】我们使用了prompt函数来提供两个默认值，但它只会在未被赋值的那个变量上进行调用：

// 只会提示输入姓氏
let [name = prompt('name?'), surname = prompt('surname?')] = ["Julius"];

alert(name);    // Julius（来自数组）
alert(surname); // 你输入的值

对象解构

一、解构赋值同样适用于对象。
二、基本语法是：

let {var1, var2} = {var1:…, var2:…}

三、在等号右侧有一个已经存在的对象，我们想把它拆开到变量中。等号左侧包含了对象相应属性的一个“模式（pattern）”。在简单的情况下，等号左侧的就是{…}中的变量名列表。
【示例1】

let options = {
  title: "Menu",
  width: 100,
  height: 200
};

let {title, width, height} = options;

alert(title);  // Menu
alert(width);  // 100
alert(height); // 200

1、属性options.title、options.width和options.height值被赋给了对应的变量。变量的顺序并不重要，下面这个代码也奏效：

// 改变 let {...} 中元素的顺序
let {height, width, title} = { title: "Menu", height: 200, width: 100 }

三、等号左侧的模式（pattern）可以更加复杂，并且指定了属性和变量之间的映射关系。
1、如果我们想把一个属性赋值给另一个名字的变量，比如把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

（1）冒号表示“什么值：赋值给谁”。上面的例子中，属性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

1、就像数组或函数参数一样，默认值可以是任意表达式甚至可以是函数调用。它们只会在未提供对应的值时才会被计算/调用。
【示例1】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

解构对象的完整语法

一、解构对象的完整语法

let {prop : varName = default, ...rest} = object

这表示属性prop会被赋值给变量varName，如果没有这个属性的话，就会使用默认值default。没有对应映射的对象属性会被复制到rest对象。

剩余模式（pattern）”…”

一、如果对象拥有的属性数量比我们提供的变量数量还多，该怎么办？我们可以只取其中的某一些属性，然后把“剩余的”赋值到其他地方吗？
二、我们可以使用剩余模式（pattern），就像我们对数组那样。一些较旧的浏览器不支持此功能（例如，使用 Babel 对其进行填充），但可以在现代浏览器中使用。
看起来就像这样：

let options = {
  title: "Menu",
  height: 200,
  width: 100
};

// title = 名为 title 的属性
// rest = 存有剩余属性的对象
let {title, ...rest} = options;

// 现在 title="Menu", rest={height: 200, width: 100}
alert(rest.height);  // 200
alert(rest.width);   // 100

不使用let时的陷阱

一、在上面的示例中，变量都是在赋值中通过正确方式声明的：let {…} = {…}。当然，我们也可以使用已有的变量，而不用let，但这里有一个陷阱。
二、以下代码无法正常运行：

let title, width, height;

// 这一行发生了错误
{title, width, height} = {title: "Menu", width: 200, height: 100};

三、问题在于 JavaScript 把主代码流（即不在其他表达式中）的{…}当做一个代码块。这样的代码块可以用于对语句分组，如下所示：

{
  // 一个代码块
  let message = "Hello";
  // ...
  alert( message );
}

1、因此，这里 JavaScript 假定我们有一个代码块，这就是报错的原因。我们需要解构它。
四、为了告诉 JavaScript 这不是一个代码块，我们可以把整个赋值表达式用括号(…)包起来：

let title, width, height;

// 现在就可以了
({title, width, height} = {title: "Menu", width: 200, height: 100});

alert( title ); // Menu

嵌套解构

一、如果一个对象或数组嵌套了其他的对象和数组，我们可以在等号左侧使用更复杂的模式（pattern）来提取更深层的数据。
1、从嵌套数组/对象中提取数据也是可以的，此时等号左侧必须和等号右侧有相同的结构。
二、在下面的代码中，options的属性size是另一个对象，属性items是另一个数组。赋值语句中等号左侧的模式（pattern）具有相同的结构以从中提取值：

let options = {
  size: {
    width: 100,
    height: 200
  },
  items: ["Cake", "Donut"],
  extra: true
};

// 为了清晰起见，解构赋值语句被写成多行的形式
let {
  size: { // 把 size 赋值到这里
    width,
    height
  },
  items: [item1, item2], // 把 items 赋值到这里
  title = "Menu" // 在对象中不存在（使用默认值）
} = options;

alert(title);  // Menu
alert(width);  // 100
alert(height); // 200
alert(item1);  // Cake
alert(item2);  // Donut

三、对象options的所有属性，除了extra属性在等号左侧不存在，都被赋值给了对应的变量：

四、最终，我们得到了width、height、item1、item2和具有默认值的title变量。
五、注意，size和items没有对应的变量，因为我们取的是它们的内容。

智能函数参数

一、有时，一个函数有很多参数，其中大部分的参数都是可选的。对用户界面来说更是如此。想象一个创建菜单的函数。它可能具有宽度参数，高度参数，标题参数和项目列表等。
二、下面是实现这种函数的一个很不好的写法：

function showMenu(title = "Untitled", width = 200, height = 100, items = []) {
  // ...
}

1、在实际开发中存在一个问题就是你怎么记得住这么多参数的顺序。通常集成开发环境工具（IDE）会尽力帮助我们，特别是当代码有良好的文档注释的时候，但是…… 另一个问题就是，当大部分的参数采用默认值就好的情况下，怎么调用这个函数。
2、难道像这样？

// 在采用默认值就可以的位置设置 undefined
showMenu("My Menu", undefined, undefined, ["Item1", "Item2"])

3、这太难看了。而且，当我们处理更多参数的时候可读性会变得很差。
4、解构赋值语法前来救援！
（1）我们可以把所有参数当作一个对象来传递，然后函数马上把这个对象解构成多个变量：

// 我们传递一个对象给函数
let options = {
  title: "My menu",
  items: ["Item1", "Item2"]
};

// ……然后函数马上把对象展开成变量
function showMenu({title = "Untitled", width = 200, height = 100, items = []}) {
  // title, items – 提取于 options，
  // width, height – 使用默认值
  alert( `${title} ${width} ${height}` ); // My Menu 200 100
  alert( items ); // Item1, Item2
}

showMenu(options);

三、我们同样可以使用带有嵌套对象和冒号映射的更加复杂的解构：

let options = {
  title: "My menu",
  items: ["Item1", "Item2"]
};

function showMenu({
  title = "Untitled",
  width: w = 100,  // width goes to w
  height: h = 200, // height goes to h
  items: [item1, item2] // items first element goes to item1, second to item2
}) {
  alert( `${title} ${w} ${h}` ); // My Menu 100 200
  alert( item1 ); // Item1
  alert( item2 ); // Item2
}

showMenu(options);

四、完整语法和解构赋值是一样的：

function({
  incomingProperty: varName = defaultValue
  ...
})

1、对于参数对象

属性incomingProperty对应的变量是varName，默认值是defaultValue。

五、请注意，这种解构假定了showMenu()函数确实存在参数。如果我们想让所有的参数都使用默认值，那我们应该传递一个空对象：

showMenu({}); // 不错，所有值都取默认值

showMenu(); // 这样会导致错误

1、我们可以通过指定空对象{}为整个参数对象的默认值来解决这个问题：

function showMenu({ title = "Menu", width = 100, height = 200 } = {}) {
  alert( `${title} ${width} ${height}` );
}

showMenu(); // Menu 100 200

（1）在上面的代码中，整个参数对象的默认是{}，因此总会有内容可以用来解构。

😈 JavaScript大魔王

【见】解构赋值