第六节：又一种新的数据类型：元组Tuple

每次发布招聘推文都会被喷薪资太低，招不到人。上周的发布react开发的招聘，居然没有人喷薪资太低了，突然有点不习惯。

摊手+无辜脸.jpg

招聘先放一边，继续回来学习我们的typescript，后续简称TS，上一节我们学习了一种新的数据类型：any任意值。就是当你不能确定变量的类型的时候，允许你把它声明未any类型，这样可以跳过编译阶段的类型检查。 

这一节，我们学习一种新的数据类型：元组tuple。 

熟悉的数组Array

在理解元组tuple之前，我们先来看看我们熟悉的数组。我们先声明一个普通的数组：

 

 

 //普通数组
 let arr = [1,'abc'];

 

一个普通数组arr，里面的元素分别是数值类型的1，以及字符串类型的'abc'。 

倘若我们对数组的元素进行如下修改：

 

 //普通数组
 let arr = [1,'abc'];

 //修改第一个元素
 arr[0] = 'hello';

 //打印
 console.log(arr);
 //结果：['hello','abc']

 

我们看到数组被修改后，此时第一个元素的值从数值：1变成了字符串：’hello’。变量的值被修改的同时，其类型也被修改了。这在普通的数组，是允许的。 

 

元组Tuple

而我们今天要学习的元组tuple，它跟普通数组的差别就在这里。你可以把元组理解成更严格的数组，它不但要声明一个数组，还规定了数组中每个位置的元素类型，不允许被修改。 

例如，你可以定义一个元素类型分别为number和string的元组。

 

 //元组
 let tuples:[number,string] =  [1,'hello'];

 //打印
 console.log(tuples);
 //结果：[1,'hello']

 

可以看到，在语法上，我们声明定义的时候，就需要指定每个位置上的元素类型，也就说，这些位置上的类型你必须是提前知道的。 

如果你给位置（索引）为2的元素赋的值是其他类型的话，那么编译的时候就会提示你。

 

 //元组
 let tuples:[number,string] =  [1,2];

 

Webstorm会提示你：元组第二个位置的值类型不能是数值2。它只接受字符串string类型的值。 

被声明定义后的元组，元素的值是允许被修改的，只是类型不能被修改。比如：

 

 //元组
 let tuples:[number,string] =  [1,'hello'];

 //类型不变，允许被修改
 tuples[1] = 'word';

 //类型被改，报错
 tuples[1] = 2;

 

为元组增加元素

在开发中，我们经常会数组增加元素，同样，元组也允许我们增加元素。 

等等，这么严格的元组，咱们没有事先定义新增加的元素的类型，这样玩会不会报错。 

原来，当我们访问一个越界的元素的时候，这时候它的类型会使用联合类型替代，后续章节我们会介绍联合类型。在这里，你可以理解成它的类型允许是已声明的类型的其中一个。 

不清楚没关系，我们来看下面的代码:

 //元组
 let tuples:[number,string] =  [1,'hello'];

 //允许类型为number或string
 tuples[2] = 'word';

 //允许类型为number或string
 tuples[3] = 2;

 

如上，元组已存在的类型为：number和string，而新增加的元素得的类型只能是其中一种。tuples[2]的值为字符串string类型，是被允许的；tuples[3]的值为数值number类型，也是被允许的。

然而，以下的操作是不被允许的： 

 

 tuples[4] = true;

 

tuples[4]的值为布尔值boolean类型，不在联合类型的范围内，是不允许的，会报错，编译不通过。

所以，我们在为元组新增元素的时候，需要清楚元组已经存在哪些类型，不能随意新增元素。

 

本节小结

元组与传统数组的区别：元组可以理解为更严格的数组，元素的类型需要按照其声明的类型来赋值。

当访问的元组中越界的元素时，其值会被当作联合类型处理。联合类型的知识前端君会在后续介绍。

热门文章

扩展阅读

 原创教程：《ECMAScript 6 教程》

 原创教程：《Vue2.0基础教程》

 原创教程：《Vue2.0进阶教程》

 附加习题：《ECMAScript 6 教程》的 2套

 附加习题：《Vue2.0基础教程》的 1 套

聊聊职场

 职场感悟：混口饭吃，谈不上喜欢

 感到迷茫：我很努力，但依然很迷茫

 薪资待遇：那么点工资，能招到人吗？

 搞笑黑话：互联网公司黑话，搞笑到爆

 职业自由：程序员职业自由的6个阶段

资源推荐

其实学好技术并不难，架构师免费分享全网全套最新web前端、JavaScript、HTML5、PHP、数据库……等视频资料！

[总价值超3万！]年薪35万以上的大牛几乎都看了！

加微信: abc15689893 免费领取，由于领取的朋友比较多，所以加微信时一定要备注：7，否则很难通过。