es6 提取数组对象一部分_ES6-语法 解构

在 ES6 中，你可以使用解构从数组和对象中提取值并赋给独特的变量。

听起来好像你之前就这么做过，例如，看看下面的两个代码段，它们使用 ES6 之前的技巧提取数据：

let input = [1, 2];
first = input[0];
second = input[1];

上述示例显示了从数组中提取值的过程。

const o = {
  a: 'foo',
  b: 30,
  c: "Johnson"
};

const a = o.a;
const b = o.b;
const c = o.c;

console.log(a, b, c);

二者都很简单，但是这两个示例都没用到解构。
那么_解构_到底是什么？

解构

解构这一概念从 Perl 和 Python 等语言中获得灵感，使你能够指定要从赋值左侧上的数组或对象中提取的元素。听起来有点奇怪，实际上可以获得和之前一样的结果，但是用到的代码确更少；依然很好理解。

我们看看这两个示例使用解构编写后的效果。

解构数组中的值

const input = [1, 2];

const [first, second] = input;

在此示例中，方括号[ ]表示被解构的数组，first、second 表示要将数组中的值存储在其中的变量。注意，你不需要指定要从中提取值的索引，因为索引可以暗示出来。

作用域函数

const input = [1, 2];

function f([first, second]: [number, number]){
    console.log(fitst);
    console.log(second);
}

f(input)

解构对象中的值

const o = {
  a: 'foo',
  b: 30,
  c: "Johnson"
};

const {a, b, c} = o;

在此示例中，花括号 { } 表示被解构的对象，a、b 和 c 表示要将对象中的属性存储到其中的变量。注意不用指定要从其中提取值的属性。因为 o 具有 a 属性，值自动存储在 a 变量中。类似地，o 具有 b 属性，因此 b 的值自动存储在 b 变量中,c 也一样。

属性重命名

let {a: newName1, b: newName2 } = o;

这里的语法令人困惑，这里的冒号不是接口指示类型的，等价于：

let newName1 = o.a;
let newName2 = o.b;

如果想指定它的类型，仍然需要写上完整的模式：

let {a, b}: {a: string, b: number} = o;