您的位置：首页 > 其它

TypeScript解构

2017-07-09 21:19 211 查看

从TypeScript 1.5起，TS 添加了对 ES6 解构声明与赋值的支持。

解构（Destructuring）

变量的解构赋值

数组的解构赋值

基本用法

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

我们可以这样声明几个变量：

var a = 1;
var b = 2;
var c = 3;

如果我们使用ES6的写法，则可以这样：

var [a, b, c] = [1, 2, 3];

上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。

本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

let [ , , third] = ["foo", "bar", "baz"];
third // "baz"

let [x, , y] = [1, 2, 3];
x // 1
y // 3

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

上述的代码中有不少未命名的变量，如

let [x,,y] = [1, 2, 3];

。但是如果我们不能通过变量名获取到变量，那么这样的写法其实毫无意义。

如果解构不成功，变量的值就等于undefined。

var [aa] = [];//undefined
var [bb, dd] = [1];//1,undefined

另一种情况是不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组。这种情况下，解构依然可以成功。

let [x, y] = [1, 2, 3];
x // 1
y // 2

let [a, , d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4

上面两个例子，都属于不完全解构，但是可以成功。

如果等号的右边不是数组（或者严格地说，不是可遍历的结构，参见《Iterator》），那么将会报错。

Iterator: 传送门

// 报错 let [foo] = 1; let [foo] = false; let [foo] = NaN; let [foo] = undefined; let [foo] = null; let [foo] = {};

上面的表达式都会报错，因为等号右边的值，要么转为对象以后不具备Iterator接口（前五个表达式），要么本身就不具备Iterator接口（最后一个表达式）。

对于Set结构，也可以使用数组的解构赋值。

Set结构：传送门

let [x, y, z] = new Set(["a", "b", "c"]) x // "a"

事实上，只要某种数据结构具有Iterator接口，都可以采用数组形式的解构赋值。

function* fibs() { var a = 0; var b = 1; while (true) { yield a; [a, b] = [b, a + b]; } } var [first, second, third, fourth, fifth, sixth] = fibs(); sixth // 5

上面代码中，
fibs
是一个Generator函数，原生具有Iterator接口。解构赋值会依次从这个接口获取值。

Generator：传送门

[b]默认值

解构赋值允许指定默认值。

let [foo = true] = [];
foo // true
let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'

注意，ES6 内部使用严格相等运算符（

===

），判断一个位置是否有值。所以，如果一个数组成员不严格等于

undefined

，默认值是不会生效的。

let [x = 1] = [undefined];
x // 1

let [x = 1] = [null];
x // null

上面代码中，如果一个数组成员是

null

，默认值就不会生效，因为

null

不严格等于

undefined

。

如果默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到的时候，才会求值。

function f() {
console.log('aaa');
}

let [x = f()] = [1];

上面代码中，因为

能取到值，所以函数

根本不会执行。上面的代码其实等价于下面的代码。

let x;
if ([1][0] === undefined) { //由于[1][0]===1,所以不会进入if内部。
x = f();
} else {
x = [1][0];
}

默认值可以引用解构赋值的其他变量，但该变量必须已经声明。

let [x = 1, y = x] = [];     // x=1; y=1
let [x = 1, y = x] = [2];    // x=2; y=2
let [x = 1, y = x] = [1, 2]; // x=1; y=2
let [x = y, y = 1] = [];     // ReferenceError

上面最后一个表达式之所以会报错，是因为x用到默认值y时，y还没有声明。

交换变量

两个变量值可以通过解构表达式来进行交换。

如果没有解构赋值的话，交换两个变量值需要一个临时变量

var a=1;
var b=2;
var temp;
//交换a和b的值
temp=a;
a=b;
b=temp;
console.log(a); // 2
console.log(b); // 1

使用解构将会快捷很多

var a=1;
var b=2;
[a, b] = [b, a];
console.log(a); // 2
console.log(b); // 1

注意：如果在左边使用了一个尾逗号，则会抛出一个语法错误

var [a, ...b,] = [1, 2, 3];
// SyntaxError: rest element may not have a trailing comma

对象的解构赋值

基本用法

var o = {p: 42, q: true};
var {p, q} = o;

console.log(p); // 42
console.log(q); // true

无声明赋值

通过解构可以无需声明来赋值一个变量。

var a, b;
({a, b} = {a: 1, b: 2});

注意：

当使用对象字面量解构赋值却没声明时，使用

()

包裹赋值语句是一个必须的语法。

因为

{a, b} = {a: 1, b: 2}

不是一个有效的独立语法 , 左边的

{a, b}

被认为一个函数块而不是一个对象字面量。

可是

({a, b} = {a: 1, b: 2})

是有效的，因为它等同于

var {a, b} = {a: 1, b: 2}

注意：你的

()

表达式需要以分号开头，因为它可能被用作执行上一行的函数。

默认值

变量可以指定一个默认值。当要提取的对象没有对应的属性，变量就被赋予默认值。

var {a = 10, b = 5} = {a: 3};

console.log(a); // 3
console.log(b); // 5

属性重命名

你可以给属性以不同的名字：

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

这里的语法开始变得混乱。你可以将

a: newName1

读做 “

作为

newName1

“。方向是从左到右，好像你写成了以下样子：

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

令人困惑的是，这里的冒号不是指示类型的。如果你想指定它的类型，仍然需要在其后写上完整的模式。

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

函数声明

解构也能用于函数声明。看以下简单的情况：

type C = { a: string, b?: number }
function f({ a, b }: C): void {
// ...
}

但是，通常情况下更多的是指定默认值，解构默认值有些棘手。首先，你需要在默认值之前设置其格式。

function f({ a, b } = { a: "", b: 0 }): void {
// ...
}
f(); // ok, default to { a: "", b: 0 }

其次，你需要知道在解构属性上给予一个默认或可选的属性用来替换主初始化列表。要知道

的定义有一个

可选属性：

function f({ a, b = 0 } = { a: "" }): void {
// ...
}
f({ a: "yes" }); // ok, default b = 0
f(); // ok, default to {a: ""}, which then defaults b = 0
f({}); // error, 'a' is required if you supply an argument

要小心使用解构。从前面的例子可以看出，就算是最简单的解构表达式也是难以理解的。尤其当存在深层嵌套解构的时候，就算这时没有堆叠在一起的重命名，默认值和类型注解，也是令人难以理解的。解构表达式要尽量保持小而简单。你自己也可以直接使用解构将会生成的赋值表达式。

注意：

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

参考资料：

ES6-destructuring

Destructuring assignment

TypeScript-Variable Declarations

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： typescript 解构解构赋值

相关文章推荐

新的分享

章节导航