當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2025/3/15 编程问答 21 豆豆

生活随笔收集整理的這篇文章主要介紹了第六节：又一种新的数据类型：元组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類型，不在聯合類型的范圍內，是不允許的，會報錯，編譯不通過。

所以，我們在為元組新增元素的時候，需要清楚元組已經存在哪些類型，不能隨意新增元素。

本節小結

元組與傳統數組的區別：元組可以理解為更嚴格的數組，元素的類型需要按照其聲明的類型來賦值。

當訪問的元組中越界的元素時，其值會被當作聯合類型處理。聯合類型的知識前端君會在后續介紹。

以上是生活随笔為你收集整理的第六节：又一种新的数据类型：元组Tuple的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。