TypeScript 元組類型

TypeScript 語言中,數(shù)組中的元素一般只能是由相同數(shù)據(jù)類型組成(any[] 除外),如果我們想要存儲(chǔ)不同類型的元素,則可以使用元組。

TypeScript 中的元組(Tuple)從外形上來看和數(shù)組相差不多, 但是元組中允許存儲(chǔ)不同類型的元素,數(shù)組中的元素必須是相同的類型。

聲明元組

聲明元組的語法:

let tuple_name = [value1,value2,value3,…value n]
示例:

例如聲明一個(gè)由數(shù)字類型、字符串類型、布爾類型構(gòu)成的元素:

let tup1:[number, string, boolean] = [1, 'a', true];
console.log(tup1);  

編譯成 JavaScript 代碼:

var tup1 = [1, 'a', true];
console.log(tup1); // [ 1, 'a', true ]

輸出:

[ 1, 'a', true ]

這樣聲明的元組,元素的類型必須一一對(duì)應(yīng),例如右邊中括號(hào)內(nèi)第一個(gè)元素必須是 number 類型的數(shù)據(jù), 第二個(gè)元素必須是 string 類型的數(shù)據(jù),第三個(gè)必須是 boolean 類型,如果沒有一一對(duì)應(yīng),則會(huì)報(bào)錯(cuò)。

示例:

下圖中是一段示例代碼,當(dāng)元素與對(duì)應(yīng)位置的數(shù)據(jù)類型沒有一一對(duì)應(yīng),會(huì)產(chǎn)生錯(cuò)誤:


訪問元組

和數(shù)組一樣,元組中元素也可以使用索引來訪問,元組中的索引值同樣從 0 開始,第一個(gè)元素為 0,第二個(gè)為 1,以此類推第 n 個(gè)為 n-1。

示例:

通過索引訪問一個(gè)元素時(shí),可以得到這個(gè)元素的值:

let tup1: [string, number, number] = ['xkd', 1, 3];
console.log("第三個(gè)元素的值為:" +  tup1[2]);
console.log("第三個(gè)元素的類型為:" + typeof tup1[2]);

編譯為 JavaScript 代碼:

var tup1 = ['xkd', 1, 3];
console.log("第三個(gè)元素的值為:" + tup1[2]);
console.log("第三個(gè)元素的類型為:" + typeof tup1[2]);

輸出:

第三個(gè)元素的值為:3
第三個(gè)元素的類型為:number

需要注意的是,在訪問元組中的元素時(shí),不可以越界訪問。例如上面數(shù)組中只有三個(gè)元素,那么如果我們?cè)L問索引為 3 的元素:

let tup1: [string, number, number] = ['xkd', 1, 3];
console.log(tup1[3]);

輸出:

Tuple type '[string, number, number]' of length '3' has no element at index '3'.

可選元素類型

我們?cè)诼暶饕粋€(gè)元組時(shí),可以在元素類型后綴一個(gè)問號(hào) 來說明元素是可選的。

示例:

下面元組中,第二個(gè)元素和第三個(gè)元素為可選元素:

let tup1: [string, number?, number?];
tup1 = ['a'];
tup1 = ['a', 1];
tup1 = ['a', 1, 3]

有一點(diǎn)很重要,就是可選元素類型必須在必選元素類型后面。也就是說,如果一個(gè)元素類型后面后綴了一個(gè)問號(hào) ?,那么這個(gè)元素之后的所有元素類型都要后綴一個(gè)問號(hào)。

示例:

下圖中第二個(gè)元素為可選元素,第三個(gè)元素如果不是可選元素,就會(huì)導(dǎo)致報(bào)錯(cuò):


元組操作

TypeScript 中元組也支持各種操作,例如我們可以使用 push() 方法向元組添加元素,使用pop() 方法移除元組中的最后一個(gè)元素。其實(shí)使用起來就和數(shù)組中類似。

示例:

首先聲明一個(gè)元組:

let mytup:[number, number, string, string] = [7, 36, 'summer', 'xkd'];

然后我們可以使用 push() 方法向這個(gè)元組中添加新的元素(建議最好不要這樣做),如下所示:

let mytup:[number, number, string, string] = [7, 36, 'summer', 'xkd'];
mytup.push('mark');
console.log(mytup);

// 輸出:[ 7, 36, 'summer', 'xkd', 'mark' ]

也可以使用 pop() 方法刪除元組中最后一個(gè)元素:

mytup.pop();
console.log(mytup);

// 輸出:[ 7, 36, 'summer' ]

更新或修改元組元素

元組是可變的,這表示我們可以更新或更改元組中的元素值,要修改元組中的元素,需要用到索引和賦值運(yùn)算符 = 。

示例:

例如將元組中索引為 1 的元素值修改為'aaa':

let mytup:[number, string] = [7, 'xkd'];
mytup[1] = 'aaa';
console.log(mytup);

編譯成 JavaScript 代碼:

var mytup = [7, 'xkd'];
mytup[1] = 'aaa';
console.log(mytup);

輸出:

[ 7, 'aaa' ]

解構(gòu)元組

我們可以解構(gòu)元組中的元素,例如:

let mytup:[number, string, boolean] = [7, 'summer', true];
let [a, b, c] = mytup;
console.log(a);
console.log(b);
console.log(c);

編譯成 JavaScript 代碼:

var mytup = [7, 'summer', true];
var a = mytup[0], b = mytup[1], c = mytup[2];
console.log(a);
console.log(b);
console.log(c);

輸出:

7
summer
true

如果我們不需要解構(gòu)元組中的全部元素,就可以像下面這樣解構(gòu):

let mytup:[number, string, boolean] = [7, 'summer', true];
let [a, ...arg] = mytup;
console.log(a);
console.log(arg);

編譯成 JavaScript 代碼:

var mytup = [7, 'summer', true];
var a = mytup[0], arg = mytup.slice(1);
console.log(a);
console.log(arg);

輸出:

7
[ 'summer', true ]

動(dòng)手練習(xí)

  1. 請(qǐng)定義一個(gè)元組,這個(gè)元組中第一個(gè)元素為字符串類型,第二個(gè)元素為布爾類型,第三個(gè)元素為可選的數(shù)字類型?
  2. 請(qǐng)將下面這個(gè)元組中第三個(gè)元素的值修改為 “可樂”?
let mytup: [string, number, string, boolean] = ['牛肉', 100, '雪碧', true];

鏈接:https://www.9xkd.com/

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容