ES6解构分配

解构分配是EcmaScript 2016引入的一项了不起的功能，现在在浏览器和Node.js中都可用。

如果您正在编写CommonJs或ES6模块，则可能已经在使用它了！假设我们有一个名为的文件math.js，其中有很多函数要导出：

export const add5   = (num) => num + 5;
export const double = (num) => num * 2;
export const half   = (num) => num / 2;

如果我们创建一个新文件，比如说index.js，我们可以在代码块中导入上面的函数：

import math from "./math.js";

const example1 = math.double(10); // => 20
const example2 = math.add5(10);   // => 15
const example3 = math.half(30);   // => 15

但是现在想象一下，如果我们的math.js文件具有数百个函数。如果仅需要（例如）math.double，为什么要全部导入它们？
这里涉及对象分解的概念：

import { double } from "./math.js";

const example1 = double(10); // => 20

我们的maths.js文件导出一个包含每个导出函数的对象。因此，如果我们不想从该文件中导入很多无用的函数，则可以仅对导出的对象进行解构，然后仅获取我们真正需要的函数！

简单对象分解

const user = {
  name: {
    first: "John",
    middle: "Mitch",
    last: "Doe"
  },
  contacts: {
    email: "john.doe@foo.dev",
    phone: "333 000000"
  }
}

const { name, contacts } = user;

console.log(name);     // => { first: "John", middle: "Mitch", last: "Doe" }
console.log(contacts); // => { email: "john.doe@foo.dev", phone: "333 000000" }

在上面的代码中，我们定义了具有一些嵌套属性的对象（用户）。
通过解构用户对象，我们可以访问名称和联系人，因此在进行解构分配后，我们将始终能够调用name和contacts属性，而无需键入user.name和user.contacts。

嵌套对象分解

const developer = {
  name: "Mitch",
  age: 24,
  languages: {
    favorite: "Haskell",
    mostUsed: "JavaScript"
  }
}

const { name, age, languages: { mostUsed, favorite } } = developer;

const bio = `${name} is a ${age} years old developer.\n`
          + `He codes in ${mostUsed} but prefers ${favorite}`;

// => "Mitch is a 24 years old developer.
//     He codes in JavaScript but prefers Haskell"

让我们分析上面的代码！我们定义了一个名为developer的新对象，其中有一个嵌套的属性，语言。
在销毁工作中，我们可以访问姓名和年龄。没什么新鲜的！但是，当我们想同时从语言键访问收藏夹和mostUsed属性时，我们必须对语言本身进行解构。
这样，我们将有两个新的常量值（收藏夹和mostUsed），我们不需要每次都需要访问开发者对象！

提示：您只需使用ES6默认参数功能即可添加新属性！

const developer = {
  name: "Mitch",
  age: 24,
  languages: {
    favorite: "Haskell",
    mostUsed: "JavaScript"
  }
}

const { name, age, languages: { mostUsed, favorite, dreaded = "PHP" } } = developer;

const bio = `${name} is a ${age} years old developer.\n`
          + `He codes in ${mostUsed} but prefers ${favorite}\n`
          + `He fearse ${dreaded}`;

// => "Mitch is a 24 years old developer.
//     He codes in JavaScript but prefers Haskell.
//     He fears PHP."

阵列解构

阵列也可以被破坏！
让我们看看最简单的情况：

const phrase        = ["Hello", "John", "!"];
const [greet, name] = phrase;

console.log(greet); // => "Hello"
console.log(name);  // => "John"

比使用索引（phrase[0]，phrase[1]）访问这些值更好！但是如果（由于某种原因）我们只想得到感叹号（phrase[2]）怎么办？

const phrase           = ["Hello", "John", "!"];
const [,, exclamation] = phrase;

console.log(exclamation); // => "!"

我们来了！我不认为这是从数组中仅获取特定元素的干净方法

默认值

正如我们在对象解构过程中看到的那样，我们可以在对数组进行解构时将默认值分配给数组：

const RGB = [55, 155];

const [R, G, B = 255] = RGB;

console.log(R); // => 55
console.log(G); // => 155
console.log(B); // => 255

这样，我们可以确保在未定义B的情况下有一个后备值！

首尾

如果您来自诸如Haskell之类的功能语言，则可能熟悉头和尾的概念。
让我们来看一个例子：

let list = [1, 2, 3, 4, 5]
let h    = head list
let t    = tail list

print h -- 1
print t -- [2,3,4,5]

因此，如您在上面的示例中看到的那样，我们使用head函数获取列表的第一个元素（在Haskell中为数组），而使用tail函数获取列表的其余元素。这在递归函数中非常有用，但是在本文中我们不再讨论。我们只想在JavaScript中使用数组解构来达到相同的结果：

const list = [1, 2, 3, 4, 5];
const [head, ...tail] = list;

console.log(head); // => 1
console.log(tail); // => [2, 3, 4, 5]

太简单！我们只是一起使用了强大的传播算子和数组结构分解！

嵌套数组解构
就像对象一样，嵌套数组也可以被解构！
假设我们有一个网格，它用以下方式表示：

+-—--+----+----+
| 10 | 10 | 10 |   <- FIRST ROW
+-—--+----+----+
| 60 | 50 | 60 |   <- SECOND ROW
+-—--+----+----+
| 90 | 90 | 90 |   <- THIRD ROW
+-—--+----+----+

我们要获取第一行，中心值（50）和第三行：

const grid = [[10, 10, 10],
              [60, 50, 60],
              [90, 90, 90]];

const [first, [, center, ,], third] = grid;

console.log(first);  // => [10, 10, 10]
console.log(center); // => 50
console.log(third);  // => [90, 90, 90]

不是通过使用访问这些值容易得多grid[0]，grid[1][1]和grid[2]！

克隆阵列
数组解构还使不可变数组克隆变得容易得多：

const myArray = [1, 2, 3, 4, 5];
const clone   = myArray;

myArray[1] = "two";

console.log(myArray); // => [1, "two", 3, 4, 5]
console.log(clone);   // => [1, "two", 3, 4, 5]

如您所见，当我们通过引用克隆一个数组时，如果我们对原始数组进行突变，那么更改也会影响克隆……我们可以通过按值克隆来避免这种情况：

const myArray = [1, 2, 3, 4, 5];
const clone   = [...myArray];

myArray[1] = "two";

console.log(myArray); // => [1, "two", 3, 4, 5]
console.log(clone);   // => [1, 2, 3, 4, 5]

做得好，数组销毁！