33. WeakSet..
35.同步生成器（高级）

[译] 写给不耐烦程序员的 JavaScript

34.解构

原文： http://exploringjs.com/impatient-js/ch_destructuring.html

34.1。第一次尝试解构

通过正常分配，您可以一次提取一个数据。例如，通过：

x = arr[1];

通过解构，您可以通过接收数据的位置中的模式同时提取多个数据。前一代码中=的左侧是一个这样的位置。在以下代码中，行 A 中的方括号是解构模式。它提取索引 0 和索引 1 处的 Array 元素的值：

const arr = ['a', 'b', 'c'];
const [x, y] = arr; // (A)
assert.equal(x, 'a');
assert.equal(y, 'b');

请注意，模式比数据“小”：我们只提取我们需要的东西。

34.2。构造与提取

为了理解解构是什么，请考虑 JavaScript 有两种相反的操作：

  • 您可以构建复合数据，例如通过设置属性和通过对象字面值。
  • 您可以从复合数据中提取数据，例如通过获取属性。

构建数据如下：

// Single values
const jane1 = {};
jane1.first = 'Jane';
jane1.last = 'Doe';

// Multiple values
const jane2 = {
  first: 'Jane',
  last: 'Doe',
};

assert.deepEqual(jane1, jane2);

提取数据如下：

const jane = {
  first: 'Jane',
  last: 'Doe',
};

// Single values
const f1 = jane.first;
const l1 = jane.last;
assert.equal(f1, 'Jane');
assert.equal(l1, 'Doe');

到目前为止，我们还没有看到提取多个值的方法。 _ 解构 _ 允许我们通过 _ 解构模式 _ 来做到这一点。在语法上，这样的模式看起来类似于多值构造，但是它们出现在接收数据的地方（例如，在分配的左侧），而不是在创建数据的地方（例如，在分配的右侧）。

// Multiple values
const {first: f2, last: l2} = jane; // (A)
assert.equal(f2, 'Jane');
assert.equal(l2, 'Doe');

A 行中的const声明并初始化了两个变量f2和f1。

34.3。我们在哪里可以破坏？

解构模式可用于“分配位置”，例如：

  • 变量声明：

    const [a] = ['x'];
assert.equal(a, 'x');

let [b] = ['y'];
assert.equal(b, 'y');

  • 作业：

    let b;
[b] = ['z'];
assert.equal(b, 'z');

  • 参数定义：

    const f = ([x]) => x;
assert.equal(f(['a']), 'a');

请注意，变量声明包括for-of循环中的const和let声明：

const arr = ['a', 'b'];
for (const [index, element] of arr.entries()) {
    console.log(index, element);
}
// Output:
// 0, 'a'
// 1, 'b'

接下来，我们将深入研究两种解构：对象解构和数组解构。

34.4。对象解构

_ 对象解构 _ 允许您通过看起来像对象字面值的模式批量提取属性值：

const address = {
  street: 'Evergreen Terrace',
  number: '742',
  city: 'Springfield',
  state: 'NT',
  zip: '49007',
};

const { street: s, city: c } = address;
assert.equal(s, 'Evergreen Terrace');
assert.equal(c, 'Springfield');

您可以将模式视为放置在数据上的透明工作表：模式键'street'在数据中具有匹配项。因此，数据值'Evergreen Terrace'被分配给模式变量s。

您还可以对象解构原始值：

const {length: len} = 'abc';
assert.equal(len, 3);

你可以对象构造数组（请记住，数组索引也是属性）：

const {0:x, 2:y} = ['a', 'b', 'c'];
assert.equal(x, 'a');
assert.equal(y, 'c');

34.4.1。财产值缩写

对象字面值支持属性值缩写，对象模式也是如此：

const { street, city } = address;
assert.equal(street, 'Evergreen Terrace');
assert.equal(city, 'Springfield');

34.4.2。休息属性

在对象字面值中，您可以具有传播属性。在对象模式中，您可以拥有 rest 属性（必须具有最后的属性）：

const obj = { a: 1, b: 2, c: 3 };
const { a: propValue, ...remaining } = obj; // (A)

assert.equal(propValue, 1);
assert.deepEqual(remaining, {b:2, c:3});

rest 属性变量（例如remaining（行 A））被赋予一个对象，该对象具有其模式中未提及其键的所有数据属性。

34.4.3。语法陷阱：通过对象解构分配

如果我们在赋值中进行对象解构，我们就会遇到由语法歧义引起的陷阱 - 你不能用大括号开始一个语句，因为那时 JavaScript 认为你正在启动一个块：

let value;
assert.throws(
  () => eval("{prop: value} = { prop: 'hello' };"),
  {
    name: 'SyntaxError',
    message: 'Unexpected token =',
  });

为什么eval()？

我们需要通过 eval（）延迟解析，否则我们在解析此代码时会遇到异常。 assert.throws()仅在其函数体内抛出异常时才有效。

解决方法是将整个作业放在括号中：

let value;
({prop: value} = { prop: 'hello' });
assert.equal(value, 'hello');

练习：对象解构

exercises/destructuring/object_destructuring_exrc.js

34.5。数组的解构

Array-destructuring 允许您通过看起来像 Array literals 的模式批量提取 Array 元素的值：

const [x, y] = ['a', 'b'];
assert.equal(x, 'a');
assert.equal(y, 'b');

您可以通过提及 Array 模式中的孔来跳过元素：

const [, x, y] = ['a', 'b', 'c']; // (A)
assert.equal(x, 'b');
assert.equal(y, 'c');

A 行中 Array 模式的第一个元素是一个洞，这就是为什么忽略索引 0 处的 Array 元素。

当操作返回数组时，数组解构很有用。例如，正则表达式方法.exec()：

// Skip the element at index 0 (the whole match):
const [, year, month, day] =
  /^([0-9]{4})-([0-9]{2})-([0-9]{2})$/
  .exec('2999-12-31');

assert.equal(year, '2999');
assert.equal(month, '12');
assert.equal(day, '31');

您还可以使用解构来交换两个变量的值，而无需临时变量：

let x = 'a';
let y = 'b';

[x,y] = [y,x]; // swap

assert.equal(x, 'b');
assert.equal(y, 'a');

34.5.1。休息元素

在 Array 字面值中，您可以使用 spread 元素。在 Array 模式中，您可以拥有 rest 元素（必须最后）：

const [x, y, ...remaining] = ['a', 'b', 'c', 'd']; // (A)

assert.equal(x, 'a');
assert.equal(y, 'b');
assert.deepEqual(remaining, ['c', 'd']);

诸如remaining（行 A）之类的 rest 元素变量被赋予一个 Array，其中包含未提及的所有析构值的元素。

34.5.2。数组解构适用于任何可迭代的

Array-destructuring 可以应用于任何可迭代的值，而不仅仅是 Arrays：

// Sets are iterable
const mySet = new Set().add('a').add('b').add('c');
const [first, second] = mySet;
assert.equal(first, 'a');
assert.equal(second, 'b');

// Strings are iterable
const [a, b] = 'xyz';
assert.equal(a, 'x');
assert.equal(b, 'y');

34.6。解构用例：多个返回值

如果函数返回多个值（解包为 Array 或打包为对象），则解构非常有用。

考虑一个在数组中查找元素的函数findElement()：它的参数是一个函数，它接收元素的值和索引，并返回一个布尔值，指示这是否是调用者正在寻找的元素。我们现在面临一个两难困境：findElement()应该返回它找到的元素的值还是索引？一种解决方案是创建两个单独的函数，但这会导致重复的代码，因为两个函数都非常相似。

以下实现通过返回包含找到的元素的索引和值的对象来避免重复：

function findElement(arr, predicate) {
  for (let index=0; index < arr.length; index++) {
    const element = arr[index];
    if (predicate(element)) {
      // We found something:
      return { element, index };
    }
  }
  // We didn’t find anything:
  return { element: undefined, index: -1 };
}

解构有助于我们处理findElement()的结果：

const arr = [7, 8, 6];

const {element, index} = findElement(arr, x => x % 2 === 0);
assert.equal(element, 8);
assert.equal(index, 1);

当我们使用属性键时，我们提到element和index的顺序无关紧要：

const {index, element} = findElement(arr, x => x % 2 === 0);

如果我们只对两个结果中的一个感兴趣，那么解构也会很好地为我们服务：

const arr = [7, 8, 6];

const {element} = findElement(arr, x => x % 2 === 0);
assert.equal(element, 8);

const {index} = findElement(arr, x => x % 2 === 0);
assert.equal(index, 1);

所有这些便利性相结合，使得处理多个返回值的这种方式非常通用。

34.7。没找到匹配

如果模式的某个部分不匹配会发生什么？如果你使用非批处理运算符会发生同样的事情：你得到undefined。

34.7.1。对象解构和缺少属性

如果对象模式中的属性在右侧没有匹配，则得到undefined：

const {prop: p} = {};
assert.equal(p, undefined);

34.7.2。数组解构和缺少元素

如果数组模式中的元素在右侧没有匹配，则得到undefined：

const [x] = [];
assert.equal(x, undefined);

34.8。哪些值无法破坏？

34.8.1。你不能对象解构undefined和null

如果要解构的值是undefined或null，则对象解构仅失败。也就是说，只要通过点运算符访问属性，它就会失败。

assert.throws(
  () => { const {prop} = undefined; },
  {
    name: 'TypeError',
    message: "Cannot destructure property `prop` of 'undefined' or 'null'.",
  }
);
assert.throws(
  () => { const {prop} = null; },
  {
    name: 'TypeError',
    message: "Cannot destructure property `prop` of 'undefined' or 'null'.",
  }
);

34.8.2。您不能使用 Array-destructure 非可迭代值

数组解构要求解构的值是可迭代的。因此，您不能使用 Array-destructure undefined和null。但是，您不能使用 Array-destructure 非可迭代对象：

assert.throws(
  () => { const [x] = {}; },
  {
    name: 'TypeError',
    message: '{} is not iterable',
  }
);

测验：基本

参见测验应用程序。

34.9。 （高级）

所有其余部分都是高级的。

34.10。默认值

通常，如果模式不匹配，则相应的变量设置为undefined：

const {prop: p} = {};
assert.equal(p, undefined);

使用默认值，您可以指定undefined以外的值，在这种情况下应使用该值：

const {prop: p = 123} = {}; // (A)
assert.equal(p, 123);

在 A 行中，我们将p的默认值指定为123。使用该默认值，因为我们正在解构的数据没有名为prop的属性。

34.10.1。 Array-destructuring 中的默认值

这里，我们有两个默认值分配给变量x和y，因为相应的元素不存在于被解构的数组中。

const [x=1, y=2] = [];

assert.equal(x, 1);
assert.equal(y, 2);

Array 模式的第一个元素的默认值是1，第二个元素的默认值是2。

34.10.2。对象解构中的默认值

您还可以为 object-destructuring 指定默认值：

const {first: f='', last: l=''} = {};
assert.equal(f, '');
assert.equal(l, '');

在解构的对象中既不存在属性键first也不存在属性键last。因此，使用默认值。

使用属性值 shorthands，此代码变得更简单：

const {first='', last=''} = {};
assert.equal(first, '');
assert.equal(last, '');

34.11。参数定义类似于解构

考虑到我们在本章中学到的内容，参数定义与数组模式（其余元素，默认值等）有很多共同之处。实际上，以下两个函数声明是等效的：

function f1(pattern1, pattern2 /* etc. */) {
  // ···
}

function f2(...args) {
  const [pattern1, pattern2 /* etc. */] = args;
  // ···
}

34.12。嵌套解构

到目前为止，我们只使用变量作为解构模式中的赋值目标。但您也可以使用模式作为赋值目标，这使您可以将模式嵌套到任意深度：

const arr = [
  { first: 'Jane', last: 'Bond' },
  { first: 'Lars', last: 'Croft' },
];
const [, {first}] = arr;
assert.equal(first, 'Lars');

在 A 行的 Array 模式中，有一个嵌套的对象模式，索引为 1。

34.13。进一步阅读

测验：高级

参见测验应用程序。

书籍推荐