
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人
3.6 解构
TypeScript支持对象解构和数组解构。字面量的意思是分解结构,即会打破原有结构。
人们很容易将解构理解为结构的相反方向。在JavaScript中,生成结构是通过对象字面量完成的。

如果没有JavaScript内置的强大的结构支持,动态创建新对象会是一件麻烦的事。而解构也为从结构中获取数据带来了便利。
1.对象解构
解构是有用的,因为它允许你在一行代码中进行操作,否则可能需要多行代码,示例如下。

在没有解构时,你必须从rect中逐个挑选x、y、width、height。
如果要将提取的变量分配给新的变量名称,可以使用以下代码。

此外,你可以使用解构从结构中获取更深层次的数据,示例如下。

在对象解构中使用rest
通过使用解构和rest,你可以从一个对象中选择任意数量的元素,也可以获取剩余元素组成的对象。

一个常见的用例是忽略某些属性。

2.数组解构
一个常见的编程问题:如何在不使用第3个变量的情况下交换两个变量。使用TypeScript的解决办法如下。


请注意,数组解构实际上是指编译器在执行[0]、[1]、[2]……,但是这些值并不存在。
1)在数组解构中使用rest
通过使用解构和rest,你可以从数组中选择任意数量的元素,也可以获取剩余元素组成的一个数组。

2)在数组解构中忽略某些成员
你可以通过简单地将其位置留空(即,,)来忽略任何索引,示例如下。

3.生成JavaScript
当编译目标不是ES6时,生成的JavaScript只涉及创建临时变量,就如同本地并不支持解构,必须手动实现一样。

4.小结
通过减少代码的体积并使它具有更清晰的目标,解构可以使代码的可读性和可维护性大大提高。数组解构可以让你像使用元组一样使用数组。