JavaScript 中最常用的两种数据结构是 Object 和 Array。

对象让我们能够创建通过键来存储数据项的单个实体，数组则让我们能够将数据收集到一个有序的集合中。

但是，当我们把它们传递给函数时，它可能不需要一个整体的对象/数组，而是需要单个块。

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

数组解构

下面是一个将数组解构到变量中的例子：

  1. // 我们有一个存放了名字和姓氏的数组
  2. let arr = ["Ilya", "Kantor"]
  4. // 解构赋值
  5. // sets firstName = arr[0]
  6. // and surname = arr[1]
  7. let [firstName, surname] = arr;
  9. alert(firstName); // Ilya
  10. alert(surname);  // Kantor

现在我们就可以针对这些变量进行操作，而不是针对原来的数组元素。

当与 split 函数（或其他返回值是数组的函数）结合使用时，看起来就更优雅了：

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

“解构”并不意味着“破坏”

这种语法叫做“解构赋值”，因为它通过将结构中的各元素复制到变量中来达到“解构”的目的。但数组本身是没有被修改的。

这只是下面这些代码的更精简的写法而已：

  1. // let [firstName, surname] = arr;
  2. let firstName = arr[0];
  3. let surname = arr[1];

忽略使用逗号的元素

数组中不想要的元素也可以通过添加额外的逗号来把它丢弃：

  1. // 不需要第二个元素
  2. let [firstName, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];
  4. alert( title ); // Consul

在上面的代码中，数组的第二个元素被跳过了，第三个元素被赋值给了 title 变量，数组中剩下的元素也都被跳过了（因为在这没有对应给它们的变量）。

等号右侧可以是任何可迭代对象

……实际上，我们可以将其与任何可迭代的数组一起使用，而不仅限于数组：

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

赋值给等号左侧的任何内容

我们可以在等号左侧使用任何“可以被赋值的”东西。

例如，一个对象的属性：

  1. let user = {};
  2. [user.name, user.surname] = "Ilya Kantor".split(' ');
  4. alert(user.name); // Ilya

与 .entries() 方法进行循环操作

在前面的章节中我们已经见过了 Object.entries(obj) 方法。

我们可以将 .entries() 方法与解构语法一同使用，来遍历一个对象的“键—值”对：

  1. let user = {
  2.   name: "John",
  3.   age: 30
  4. };
  6. // 循环遍历键—值对
  7. for (let [key, value] of Object.entries(user)) {
  8.   alert(`${key}:${value}`); // name:John, then age:30
  9. }

……对于 map 对象也类似：

  1. let user = new Map();
  2. user.set("name", "John");
  3. user.set("age", "30");
  5. for (let [key, value] of user) {
  6.   alert(`${key}:${value}`); // name:John, then age:30
  7. }

剩余的 ‘…’

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

  1. let [name1, name2, ...rest] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];
  3. alert(name1); // Julius
  4. alert(name2); // Caesar
  6. // 请注意，`rest` 的类型是数组
  7. alert(rest[0]); // Consul
  8. alert(rest[1]); // of the Roman Republic
  9. alert(rest.length); // 2

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

默认值

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

  1. let [firstName, surname] = [];
  3. alert(firstName); // undefined
  4. alert(surname); // undefined

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

  1. // 默认值
  2. let [name = "Guest", surname = "Anonymous"] = ["Julius"];
  4. alert(name);    // Julius（来自数组的值）
  5. alert(surname); // Anonymous（默认值被使用了）

默认值可以是更加复杂的表达式甚至可以是函数调用，这些表达式或函数只会在这个变量未被赋值的时候才会被计算。

举个例子，我们使用了 prompt 函数来提供两个默认值，但它只会在未被赋值的那个变量上进行调用：

  1. // 只会提示输入姓氏
  2. let [name = prompt('name?'), surname = prompt('surname?')] = ["Julius"];
  4. alert(name);    // Julius（来自数组）
  5. alert(surname); // 你输入的值

对象解构

解构赋值同样适用于对象。

基本语法是：

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

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

举个例子：

  1. let options = {
  2.   title: "Menu",
  3.   width: 100,
  4.   height: 200
  5. };
  7. let {title, width, height} = options;
  9. alert(title);  // Menu
  10. alert(width);  // 100
  11. alert(height); // 200

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

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

等号左侧的模式（pattern）可以更加复杂，并且指定了属性和变量之间的映射关系。

如果我们想把一个属性赋值给另一个名字的变量，比如把 options.width 属性赋值给变量 w，那么我们可以使用冒号来指定：

  1. let options = {
  2.   title: "Menu",
  3.   width: 100,
  4.   height: 200
  5. };
  7. // { sourceProperty: targetVariable }
  8. let {width: w, height: h, title} = options;
  10. // width -> w
  11. // height -> h
  12. // title -> title
  14. alert(title);  // Menu
  15. alert(w);      // 100
  16. alert(h);      // 200

冒号表示“什么值：赋值给谁”。上面的例子中，属性 width 被赋值给了 w，属性 height 被赋值给了 h，属性 title 被赋值给了同名变量。

对于可能缺失的属性，我们可以使用 "=" 设置默认值，如下所示：

  1. let options = {
  2.   title: "Menu"
  3. };
  5. let {width = 100, height = 200, title} = options;
  7. alert(title);  // Menu
  8. alert(width);  // 100
  9. alert(height); // 200

就像数组或函数参数一样，默认值可以是任意表达式甚至可以是函数调用。它们只会在未提供对应的值时才会被计算/调用。

在下面的代码中，prompt 提示输入 width 值，但不会提示输入 title 值：

  1. let options = {
  2.   title: "Menu"
  3. };
  5. let {width = prompt("width?"), title = prompt("title?")} = options;
  7. alert(title);  // Menu
  8. alert(width);  //（无论 prompt 的结果是什么）

我们还可以将冒号和等号结合起来：

  1. let options = {
  2.   title: "Menu"
  3. };
  5. let {width: w = 100, height: h = 200, title} = options;
  7. alert(title);  // Menu
  8. alert(w);      // 100
  9. alert(h);      // 200

如果我们有一个具有很多属性的复杂对象，那么我们可以只提取所需的内容：

  1. let options = {
  2.   title: "Menu",
  3.   width: 100,
  4.   height: 200
  5. };
  7. // 仅提取 title 作为变量
  8. let { title } = options;
  10. alert(title); // Menu

剩余模式（pattern）”…”

如果对象拥有的属性数量比我们提供的变量数量还多，该怎么办？我们可以只取其中的某一些属性，然后把“剩余的”赋值到其他地方吗？

我们可以使用剩余模式（pattern），就像我们对数组那样。一些较旧的浏览器不支持此功能（例如，使用 Babel 对其进行填充），但可以在现代浏览器中使用。

看起来就像这样：

  1. let options = {
  2.   title: "Menu",
  3.   height: 200,
  4.   width: 100
  5. };
  7. // title = 名为 title 的属性
  8. // rest = 存有剩余属性的对象
  9. let {title, ...rest} = options;
  11. // 现在 title="Menu", rest={height: 200, width: 100}
  12. alert(rest.height);  // 200
  13. alert(rest.width);   // 100

不使用 let 时的陷阱

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

以下代码无法正常运行：

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

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

  1. {
  2.   // 一个代码块
  3.   let message = "Hello";
  4.   // ...
  5.   alert( message );
  6. }

因此，这里 JavaScript 假定我们有一个代码块，这就是报错的原因。我们需要解构它。

为了告诉 JavaScript 这不是一个代码块，我们可以把整个赋值表达式用括号 (...) 包起来：

  1. let title, width, height;
  3. // 现在就可以了
  4. ({title, width, height} = {title: "Menu", width: 200, height: 100});
  6. alert( title ); // Menu

嵌套解构

如果一个对象或数组嵌套了其他的对象和数组，我们可以在等号左侧使用更复杂的模式（pattern）来提取更深层的数据。

在下面的代码中，options 的属性 size 是另一个对象，属性 items 是另一个数组。赋值语句中等号左侧的模式（pattern）具有相同的结构以从中提取值：

  1. let options = {
  2.   size: {
  3.     width: 100,
  4.     height: 200
  5.   },
  6.   items: ["Cake", "Donut"],
  7.   extra: true
  8. };
  10. // 为了清晰起见，解构赋值语句被写成多行的形式
  11. let {
  12.   size: { // 把 size 赋值到这里
  13.     width,
  14.     height
  15.   },
  16.   items: [item1, item2], // 把 items 赋值到这里
  17.   title = "Menu" // 在对象中不存在（使用默认值）
  18. } = options;
  20. alert(title);  // Menu
  21. alert(width);  // 100
  22. alert(height); // 200
  23. alert(item1);  // Cake
  24. alert(item2);  // Donut

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

解构赋值 - 图1

最终，我们得到了 width、height、item1、item2 和具有默认值的 title 变量。

注意，size 和 items 没有对应的变量，因为我们取的是它们的内容。

智能函数参数

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

下面是实现这种函数的一个很不好的写法：

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

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

难道像这样？

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

这太难看了。而且，当我们处理更多参数的时候可读性会变得很差。

解构赋值语法前来救援！

我们可以把所有参数当作一个对象来传递，然后函数马上把这个对象解构成多个变量：

  1. // 我们传递一个对象给函数
  2. let options = {
  3.   title: "My menu",
  4.   items: ["Item1", "Item2"]
  5. };
  7. // ……然后函数马上把对象展开成变量
  8. function 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. }
  15. showMenu(options);

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

  1. let options = {
  2.   title: "My menu",
  3.   items: ["Item1", "Item2"]
  4. };
  6. function showMenu({
  7.   title = "Untitled",
  8.   width: w = 100,  // width goes to w
  9.   height: h = 200, // height goes to h
  10.   items: [item1, item2] // items first element goes to item1, second to item2
  11. }) {
  12.   alert( `${title} ${w} ${h}` ); // My Menu 100 200
  13.   alert( item1 ); // Item1
  14.   alert( item2 ); // Item2
  15. }
  17. showMenu(options);

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

  1. function({
  2.   incomingProperty: varName = defaultValue
  3.   ...
  4. })

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

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

  1. showMenu({}); // 不错，所有值都取默认值
  3. showMenu(); // 这样会导致错误

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

  1. function showMenu({ title = "Menu", width = 100, height = 200 } = {}) {
  2.   alert( `${title} ${width} ${height}` );
  3. }
  5. showMenu(); // Menu 100 200

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

总结

  • 解构赋值可以立即将一个对象或数组映射到多个变量上。

  • 解构对象的完整语法：

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

    这表示属性 prop 会被赋值给变量 varName，如果没有这个属性的话，就会使用默认值 default。

    没有对应映射饿对象属性被复制到 rest 对象。

  • 解构数组的完整语法：

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

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

  • 从嵌套数组/对象中提取数据也是可以的，此时等号左侧必须和等号右侧有相同的结构。

任务

解构赋值

重要程度: 5

我们有一个对象：

  1. let user = {
  2.   name: "John",
  3.   years: 30
  4. };

写一个解构赋值语句使得：

  • name 属性赋值给变量 name。
  • years 属性赋值给变量 age。
  • isAdmin 属性赋值给变量 isAdmin（如果属性缺失则取默认值 false）。

下面是赋值完成后的值的情况：

  1. let user = { name: "John", years: 30 };
  3. // 等号左侧是你的代码
  4. // ... = user
  6. alert( name ); // John
  7. alert( age ); // 30
  8. alert( isAdmin ); // false

解决方案

  1. let user = {
  2.   name: "John",
  3.   years: 30
  4. };
  6. let {name, years: age, isAdmin = false} = user;
  8. alert( name ); // John
  9. alert( age ); // 30
  10. alert( isAdmin ); // false

最高薪资

重要程度: 5

这儿有一个 salaries 对象：

  1. let salaries = {
  2.   "John": 100,
  3.   "Pete": 300,
  4.   "Mary": 250
  5. };

新建一个函数 topSalary(salaries)，返回收入最高的人的姓名。

  • 如果 salaries 是空的，函数应该返回 null。
  • 如果有多个收入最高的人，返回其中任意一个即可。

P.S. 使用 Object.entries 和解构语法来遍历键/值对。

打开带有测试的沙箱。

解决方案

  1. function topSalary(salaries) {
  3.   let max = 0;
  4.   let maxName = null;
  6.   for(let [name, salary] of Object.entries(salaries)) {
  7.     if (max < salary) {
  8.       max = salary;
  9.       maxName = name;
  10.     }
  11.   }
  13.   return maxName;
  14. }

使用沙箱的测试功能打开解决方案。