解构和展开

解构

解构数组

最简单的解构莫过于数组的解构赋值了：

let input = [1, 2];let [first, second] = input;console.log(first); // outputs 1console.log(second); // outputs 2

这创建了2个命名变量 first 和 second, 相当于使用了索引，但更为方便.

作用于函数参数：

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

你可以在数组里使用…语法创建剩余变量：

let [first, ...rest] = [1, 2, 3, 4];console.log(first); // outputs 1console.log(rest); // outputs [ 2, 3, 4 ]

当然，由于是JavaScript, 你可以忽略你不关心的尾随元素：

let [first] = [1, 2, 3, 4];console.log(first); // outputs 1

或其它元素：

let [, second, , fourth] = [1, 2, 3, 4];

对象解构

你也可以解构对象：

let o = {    a: "foo",    b: 12,    c: "bar"};let { a, b } = o;

这通过 o.a and o.b 创建了 a 和 b 。 注意，如果你不需要 c 你可以忽略它。

就像数组解构，你可以用没有声明的赋值：

({ a, b } = { a: "baz", b: 101 });

注意，我们需要用括号将它括起来，因为Javascript通常会将以 { 起始的语句解析为一个块。

你可以在对象里使用…语法创建剩余变量：

let { a, ...passthrough } = o;let total = passthrough.b + passthrough.c.length;

默认值

默认值可以让你在属性为 undefined 时使用缺省值：

function keepWholeObject(wholeObject: { a: string, b?: number }) {    let { a, b = 1001 } = wholeObject;}

现在，即使 b 为 undefined ， keepWholeObject 函数的变量 wholeObject 的属性 a 和 b 都会有值。

解构默认值有些棘手。 首先，你需要知道在设置默认值之前设置其类型。

展开

展开操作符正与解构相反。 它允许你将一个数组展开为另一个数组，或将一个对象展开为另一个对象。 例如：

let first = [1, 2];let second = [3, 4];let bothPlus = [0, ...first, ...second, 5];

这会令bothPlus的值为[0, 1, 2, 3, 4, 5]。 展开操作创建了first和second的一份浅拷贝。 它们不会被展开操作所改变。

你还可以展开对象：

let defaults = { food: "spicy", price: "$$", ambiance: "noisy" };let search = { ...defaults, food: "rich" };

search的值为{ food: "rich", price: "$$", ambiance: "noisy" }。 对象的展开比数组的展开要复杂的多。 像数组展开一样，它是从左至右进行处理，但结果仍为对象。 这就意味着出现在展开对象后面的属性会覆盖前面的属性。 因此，如果我们修改上面的例子，在结尾处进行展开的话：

let defaults = { food: "spicy", price: "$$", ambiance: "noisy" };let search = { food: "rich", ...defaults };

那么，defaults里的food属性会重写food: "rich".

对象展开还有其它一些意想不到的限制。 首先，它只包含自身的可枚举的属性。 首先，当你展开一个对象实例时，你会丢失其方法：

class C {  p = 12;  m() {  }}let c = new C();let clone = { ...c };clone.p; // okclone.m(); // error!

其次，TypeScript编译器不允许展开泛型函数上的类型参数。 这个特性会在TypeScript的未来版本中考虑实现。

参考链接：
https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/Variable%20Declarations.html