TypeScript 數組類型

發布時間：2023-06-14 19:19:21

和 JavaScript 語言一樣，TypeScript 中也有數組類型。數組指的是有序的元素序列，例如 [1, 2, 3] 這樣的就是一個數組，1、2、3 就是數

和 JavaScript 語言一樣，TypeScript 中也有數組類型。

數組指的是有序的元素序列，例如 [1, 2, 3] 這樣的就是一個數組，1、2、3 就是數組中的元素，中括號[] 內可以由任意數量的元素。但是每個元素之間的類型必須相同，比如數組中的是數字類型就必須全部元素都是數組類型，像 [1, 2, '3'] 這樣突然夾雜一個字符串類型是不被允許的。

數組是靜態的，這意味著數組一旦初始化就無法調整大小。

聲明和初始化數組

在 TypeScript 中聲明和初始化數組也很簡單，和聲明數字類型和字符串類型的變量也差不多，只不過在指定數組類型時要在類型后面加上一個中括號 []。

語法格式：

let array_name[:datatype] = [val1,val2…valn]n

等號左邊是聲明數組，指定數組的類型，等號右邊是給數組初始化賦值。如果聲明數組時，沒有給數組指定數據類型，則這個數組為 any 類型，在初始化時會根據數組中第一個元素的類型來推斷數組的類型。

示例：

例如創建一個字符串類型的數組，數組中是《神雕俠侶》中的人物名稱：

let character:string[] = ["楊過", "小龍女", "郭襄", "郭靖", "黃蓉", "李莫愁"];nconsole.log(character);n

需要注意的是，當我們指定了一個數組的類型，那么這個數組中的元素也必須是這個類型，否則會導致報錯。上述代碼中，我們指定了數組為字符串類型，數組元素只能是字符串類型的。

示例：

例如在一個字符串類型數組中，如何有一個元素是數字類型的：

let character:string[] = ["楊過", "小龍女", "郭襄", "郭靖", "黃蓉", "李莫愁", 1];nconsole.log(character);n

執行代碼，提示我們編譯失敗，輸出如下所示：

Type 'number' is not assignable to type 'string'.

除了使用中括號 [] 的方法來聲明數組，我們還可以使用數組泛型來定義數組。

語法如下所示：

let array_name:Array<datatype>;n

示例：

例如聲明一個數字類型的數組：

let numArr:Array<number> = [1, 2, 3, 4, 5]; nconsole.log(numArr);n

Array 對象

我們可以通過 Array 對象來創建數組。Array 對象的構造函數接受以下兩種值：

一個數值，表示數組的大小。
初始化的數組列表，元素使用逗號分隔。

示例：

例如我們定義一個大小為 4 的數組，可以使用 for 循環向數組中賦值：

let numArr:number[] = new Array(4); /／表示數組的大小為４nnfor(let i = 0; i < numArr.length; i++) { n numArr[i] = i;n}nconsole.log(numArr);n

編譯成 JavaScript 代碼：

var numArr = new Array(4);/／表示數組的大小為４nfor (var i = 0; i < numArr.length; i++) {n numArr[i] = i;n}nconsole.log(numArr);n

輸出：

[ 0, 1, 2, 3 ]n

或者可以直接在 Array 對象的構造函數中初始化數組列表：

let myName:string[] = new Array("xkd","summer","Iven") nconsole.log(myName);n

編譯成 JavaScript 代碼：

var myName = new Array("xkd", "summer", "Iven");nconsole.log(myName);n

輸出：

[ 'xkd', 'summer', 'Iven' ]n

訪問數組元素

我們來看下面這個數組：

["楊過", "小龍女", "郭襄", "郭靖", "黃蓉", "李莫愁"]n

在這個數組中，第一個元素 “楊過” 的索引值為 0，第二個元素 “小龍女” 的索引值為 1，第三個元素 “郭襄” 的索引值為 2，后面的依次類推。

那么知道數組中元素的索引值有什么作用呢，我們可以通過對應的索引來訪問數組元素。

示例：

例如我們想要獲取數組中的第一個元素的值，就可以通過索引 0 來實現：

let character:string[] = ["楊過", "小龍女", "郭襄", "郭靖", "黃蓉", "李莫愁"];n// 第一個元素的索引為0nconsole.log(character[0]);n

編譯上述代碼，得到的 JavaScript 代碼如下所示：

var character = ["楊過", "小龍女", "郭襄", "郭靖", "黃蓉", "李莫愁"];n// 第一個元素的索引為0nconsole.log(character[0]);n

輸出結果為：

楊過n

那如果我們想要訪問數組中第二個、第三個、第四個...元素呢，只需要將中括號 [] 里面的索引值變為與元素對應的索引即可，如下所示：

console.log(character[1]); // 小龍女nconsole.log(character[2]); // 郭襄nconsole.log(character[3]); // 郭靖nconsole.log(character[4]); // 黃蓉nconsole.log(character[5]); // 李莫愁n

數組 character 中最后一個元素的索引為 5，那假設我們訪問索引 6 對應的元素會得到什么呢，可以試試看：

console.log(character[6]); // undefinedn

很明顯，輸出結果為 undefined，表示沒有與這個索引值對應的元素。

那如果我們希望索引 6 也能對應一個元素值呢，要怎么做？我們可以通過索引給元素賦值。

示例：

數組中沒有與索引為 6 對應的元素，那我們可以給數組中的索引為 6 的元素賦值為”一燈“：

let character:string[] = ["楊過", "小龍女", "郭襄", "郭靖", "黃蓉", "李莫愁"];ncharacter[6] = "一燈";nconsole.log(character);n

輸出：

['楊過', '小龍女', '郭襄', '郭靖', '黃蓉', '李莫愁', '一燈']n

這樣數組 character 中的元素就由 6 個變為了 7 個，新增了一個元素”一燈“。

數組元素的修改

通過數組的索引，我們除了可以訪問數組中的元素，還可以修改數組中元素的值。

示例：

例如將數組中第一個元素的值修改為”金輪法王“：

let character:string[] = ["楊過", "小龍女", "郭襄", "郭靖", "黃蓉", "李莫愁"];ncharacter[0] = "金輪法王";nconsole.log(character);n

編譯成 JavaScript 代碼：

var character = ["楊過", "小龍女", "郭襄", "郭靖", "黃蓉", "李莫愁"];ncharacter[0] = "金輪法王";nconsole.log(character);n

輸出：

[ '金輪法王', '小龍女', '郭襄', '郭靖', '黃蓉', '李莫愁' ]n

可以看到，輸出結果中將數組里面第一個元素從原本的”楊過“，修改為了”金輪法王“。

數組元素的添加

我們可以直接使用 push() 方法向數組添加元素，通過此方法可以一次向數組添加任意數量的元素。

語法：

array.push(element1, ..., elementN);n

push() 方法可以將指定的元素添加到數組的最后，并返回新數組的長度。其中參數就表示要添加到數組末尾的元素。

示例：

向數組中添加三個元素：

let numArr:number[] = [1, 2, 3];nconsole.log(numArr); // 原數組nnumArr.push(4, 5, 6);nconsole.log(numArr); // 新數組n

編譯成 JavaScript 代碼：

var numArr = [1, 2, 3];nconsole.log(numArr); // 原數組nnumArr.push(4, 5, 6);nconsole.log(numArr); // 新數組n

輸出：

[ 1, 2, 3 ]n[ 1, 2, 3, 4, 5, 6 ]n

數組元素的刪除

刪除數組中的元素可以使用 pop()、shift()、splice() 等方法。

pop()：用于刪除并返回數組的最后一個元素。
shift()：用于刪除數組的第一個元素，并返回第一個元素的值。
splice()：從數組中刪除元素，然后返回被刪除的元素。

示例：

let numArr:number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];nconsole.log(numArr);n// 刪除數組中的最后一個元素nnumArr.pop();nconsole.log(numArr);nn// 刪除數組的第一個元素nnumArr.shift();nconsole.log(numArr);nn// 刪除數組索引為2，3的元素nnumArr.splice(2, 2);nconsole.log(numArr);n

編譯成 JavaScript 代碼：

var numArr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];nconsole.log(numArr);n// 刪除數組中的最后一個元素nnumArr.pop();nconsole.log(numArr);n// 刪除數組的第一個元素nnumArr.shift();nconsole.log(numArr);n// 刪除數組索引為2，3的元素nnumArr.splice(2, 2);nconsole.log(numArr);n

輸出：

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]n[1, 2, 3, 4, 5,6, 7, 8, 9]n[2, 3, 4, 5, 6, 7, 8, 9]n[ 2, 3, 6, 7, 8, 9 ]n

數組解構

TypeScript 支持數組解構，解構是一種表達式，將數組或者對象中的數據賦予另一個變量。

示例：

我們將數組 numArr 解構：

let numArr:number[] = [1, 2, 3];nnvar[a, b, c] = numArr; nconsole.log(a);nconsole.log(b);nconsole.log(c);n

編譯成 JavaScript 代碼：

var numArr = [1, 2, 3];nvar a = numArr[0], b = numArr[1], c = numArr[2];nconsole.log(a);nconsole.log(b);nconsole.log(c);n

輸出：

1n2n3n

多維數組

TypeScript 支持多維數組。一個數組的元素可以是另外一個數組，這樣就構成了多維數組。多維數組的最簡單形式是二維數組。

語法：

var arr_name:datatype[][]=[ [val1,val2,val3],[v1,v2,v3] ]n

示例：

聲明一個二維數組：

let mulArr:number[][] = [[1, 2, 3], [100, 200, 300]];nnconsole.log(mulArr);n

如果要訪問這個二維數組中的元素，同樣可以通過索引來訪問，但是要注意二維數組有兩個索引值，一個是外層數組的索引，一個是內層數組的索引：

let mulArr:number[][] = [[1, 2, 3], [100, 200, 300]];nnconsole.log(mulArr[0][0]);nconsole.log(mulArr[0][1]);nconsole.log(mulArr[0][2]);nconsole.log(mulArr[1][0]);nconsole.log(mulArr[1][1]);nconsole.log(mulArr[1][2]);n

編譯成 JavaScript 代碼：

var mulArr = [[1, 2, 3], [100, 200, 300]];nconsole.log(mulArr[0][0]);nconsole.log(mulArr[0][1]);nconsole.log(mulArr[0][2]);nconsole.log(mulArr[1][0]);nconsole.log(mulArr[1][1]);nconsole.log(mulArr[1][2]);n

輸出：

1n2n3n100n200n300n

將數組傳遞給函數

我們可以將數組作為參數傳遞給函數。

示例：

例如定義一個數組 myNames，然后將其傳遞給函數 show()：

let myNames:string[] = new Array("郭靖","黃蓉","楊過","小龍女");nnfunction show(arr_names:string[]) {n for(var i = 0; i < arr_names.length; i++) { n console.log(myNames[i]) n } n} nshow(myNames);n

編譯成 JavaScript 代碼：

var myNames = new Array("郭靖", "黃蓉", "楊過", "小龍女");nfunction show(arr_names) {n for (var i = 0; i < arr_names.length; i++) {n console.log(myNames[i]);n }n}nshow(myNames);n

輸出結果：

郭靖n黃蓉n楊過n小龍女n

要注意一下，數組的類型要與函數中的參數類型一一對應。

從函數返回數組

數組可以作為函數的返回值。

示例：

下面我們直接通過 Array 對象來創建數組，來作為函數 show 的返回值，也要注意一下數組的類型與返回值的類型要對應：

function show():string[] { n return new Array("郭靖", "黃蓉", "楊過", "小龍女") n } n n let myNames:string[] = show() n for(var i in myNames) {n console.log(myNames[i]) n }n

編譯成 JavaScript 代碼：

function show() {n return new Array("郭靖", "黃蓉", "楊過", "小龍女");n}nvar myNames = show();nfor (var i in myNames) {n console.log(myNames[i]);n}n

輸出：

郭靖n黃蓉n楊過n小龍女n

總結

本節關于數組的知識點還是挺多的，我們來梳理一下。首先弄清楚什么是數組？我們可以理解為數組就是一個由任意數量，相同類型的值組成的一個變量。然后學習怎么聲明數組、通過索引訪問數組、修改數組中的元素、刪除數組中的元素、什么是多維數組等等。你學到這里有沒有將上述講到的知識點都弄清呢？我們可以做幾個小練習來驗證一下。