07.md

七、解构赋值

解构赋值语法是一个 JavaScript 表达式，它可以使用反映数组和对象文字结构的语法从数组或对象中提取数据。

当您只想从数组中提取值并将其用作独立变量时，数组匹配非常方便。让我们看看下面的例子:

代码清单 99

  let [a, , b] = [1,2,3];
  console.log("a:", a, "b:", b);

我们现在有两个变量，a和b ,分别保存值 1 和 3。还要注意，数组匹配需要与原始数组具有相同的长度或结构。下面是前面代码的输出:

代码清单 100

  a: 1 b: 3 

根据我们对数组匹配的了解，让我们尝试一下对象匹配。考虑以下示例:

代码清单 101

  var
  {foo, bar} = {foo:
  'lorem', bar:
  'ipsum', choo:
  'uhoh'}; 
  console.log("foo:",
  foo, "bar:", bar);

如您所见，我们正在从对象文字中抓取属性foo和bar，并从中创建新的变量。这很好，保持东西干净。你可以选择任何你想要的房产，忽略那些你不在乎的，这也很好。下面是前面代码的输出:

代码清单 102

  foo: lorem bar: ipsum

让我们走得更远一点，看看如何将它应用于更复杂的对象。考虑以下示例:

代码清单 103

  let cust =
  {
    name:
  "Acme Corp.",
    address:
  {
      street:
  "1001 Oak Drive",
      city:
  "Summerville",
      state:
  "OR",
      zip:
  "97123"
    }
  };
  let {address:
  {city: city}, address:
  {state: state}}
  = cust;
  console.log("City:",
  city, "\nState:",
  state); 

这需要做更多的工作来提取您想要的确切属性，但是当您确切地知道您想要提取到一个单独的变量中时，它会非常有用。下面是前面代码的输出:

代码清单 104

  City: Summerville
  State: OR

随着我们对数组和对象匹配的理解，让我们将我们所学的应用到函数参数中。考虑以下示例:

代码清单 105

  function f ([ name,
  val ]) {
    console.log(name, val);
  }
  function g ({ name: n, val: v
  }) {
    console.log(n, v);
  }
  function h ({ name,
  val }) {
    console.log(name, val);
  }
  f([ "bar",
  42 ]);
  g({ name:
  "foo", val:  7 });
  h({ name:
  "bar", val: 42 });

从前面的函数中可以看出，我们使用了相同的模式，但这次是针对给定函数的参数。第一个函数需要一个长度为 2 的数组作为输入。它提取这两个值作为单独的参数变量。下一个函数定义了一个对象文字，该对象文字具有在调用时要提取的给定属性的值。最后，最后一个函数与前一个函数相同，只是使用了简写符号。如您所见，现在只需很少的代码就可以完成一些非常有趣的任务。

以下是三个函数的输出:

代码清单 106

  bar 42
  foo 7
  bar 42

Fail-soft 解构允许我们继续做到现在为止一直在做的事情，但也提供了可选的默认值。考虑以下示例:

代码清单 107

  let list = [ 7, 42 ];
  let [a = 1, b = 2, c = 3, d] = list;
  console.log("a:",
  a, "\nb:", b, "\nc:", c, "\nd:",
  d); 

您可以看到，我们现在可以在尝试从列表中提取值时选择性地提供默认值。让我们看看前面代码的输出:

代码清单 108

  a: 7 
  b: 42 
  c: 3 
  d: undefined

我们可以观察到，如果值可以从列表中获得，那么它是被提供的；否则，我们看到我们的默认值或undefined。