TypeScript 數組類型

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

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

數組是靜態的，這意味着數組一旦初始化就沒法調整大小。學習

聲明和初始化數組

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

語法格式：.net

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

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

示例：

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

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

須要注意的是，當咱們指定了一個數組的類型，那麼這個數組中的元素也必須是這個類型，不然會致使報錯。上述代碼中，咱們指定了數組爲字符串類型，數組元素只能是字符串類型的。索引

示例：

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

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

執行代碼，提示咱們編譯失敗，輸出以下所示：element

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

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

語法以下所示：

let array_name:Array<datatype>;

示例：

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

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

Array 對象

咱們能夠經過 Array 對象來建立數組。Array 對象的構造函數接受如下兩種值：

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

示例：

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

let numArr:number[] = new Array(4);  /／表示數組的大小爲４

for(let i = 0; i < numArr.length; i++) { 
   numArr[i] = i;
}
console.log(numArr);

編譯成 JavaScript 代碼：

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

輸出：

[ 0, 1, 2, 3 ]

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

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

編譯成 JavaScript 代碼：

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

輸出：

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

訪問數組元素

咱們來看下面這個數組：

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

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

那麼知道數組中元素的索引值有什麼做用呢，咱們能夠經過對應的索引來訪問數組元素。

示例：

例如咱們想要獲取數組中的第一個元素的值，就能夠經過索引 0 來實現：

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

編譯上述代碼，獲得的 JavaScript 代碼以下所示：

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

輸出結果爲：

楊過

那若是咱們想要訪問數組中第二個、第三個、第四個...元素呢，只須要將中括號 [] 裏面的索引值變爲與元素對應的索引便可，以下所示：

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

數組 character 中最後一個元素的索引爲 5，那假設咱們訪問索引 6 對應的元素會獲得什麼呢，能夠試試看：

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

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

那若是咱們但願索引 6 也能對應一個元素值呢，要怎麼作？咱們能夠經過索引給元素賦值。

示例：

數組中沒有與索引爲 6 對應的元素，那咱們能夠給數組中的索引爲 6 的元素賦值爲」一燈「：

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

輸出：

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

這樣數組 character 中的元素就由 6 個變爲了 7 個，新增了一個元素」一燈「。

數組元素的修改

經過數組的索引，咱們除了能夠訪問數組中的元素，還能夠修改數組中元素的值。

示例：

例如將數組中第一個元素的值修改成」金輪法王「：

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

編譯成 JavaScript 代碼：

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

輸出：

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

能夠看到，輸出結果中將數組裏面第一個元素從本來的」楊過「，修改成了」金輪法王「。

數組元素的添加

咱們能夠直接使用 push() 方法向數組添加元素，經過此方法能夠一次向數組添加任意數量的元素。

語法：

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

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

示例：

向數組中添加三個元素：

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

編譯成 JavaScript 代碼：

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

輸出：

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

數組元素的刪除

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

pop()：用於刪除並返回數組的最後一個元素。
shift()：用於刪除數組的第一個元素，並返回第一個元素的值。
splice()：從數組中刪除元素，而後返回被刪除的元素。

示例：

let numArr:number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(numArr);
// 刪除數組中的最後一個元素
numArr.pop();
console.log(numArr);

// 刪除數組的第一個元素
numArr.shift();
console.log(numArr);

// 刪除數組索引爲2，3的元素
numArr.splice(2, 2);
console.log(numArr);

編譯成 JavaScript 代碼：

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

輸出：

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

數組解構

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

示例：

咱們將數組 numArr 解構：

let numArr:number[] = [1, 2, 3];

var[a, b, c] = numArr; 
console.log(a);
console.log(b);
console.log(c);

編譯成 JavaScript 代碼：

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

輸出：

1
2
3

多維數組

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

語法：

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

示例：

聲明一個二維數組：

let mulArr:number[][] = [[1, 2, 3], [100, 200, 300]];

console.log(mulArr);

若是要訪問這個二維數組中的元素，一樣能夠經過索引來訪問，可是要注意二維數組有兩個索引值，一個是外層數組的索引，一個是內層數組的索引：

let mulArr:number[][] = [[1, 2, 3], [100, 200, 300]];

console.log(mulArr[0][0]);
console.log(mulArr[0][1]);
console.log(mulArr[0][2]);
console.log(mulArr[1][0]);
console.log(mulArr[1][1]);
console.log(mulArr[1][2]);

編譯成 JavaScript 代碼：

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

輸出：

將數組傳遞給函數

咱們能夠將數組做爲參數傳遞給函數。

示例：

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

let myNames:string[] = new Array("郭靖","黃蓉","楊過","小龍女");

function show(arr_names:string[]) {
   for(var i = 0; i < arr_names.length; i++) { 
      console.log(myNames[i]) 
   }  
}  
show(myNames);

編譯成 JavaScript 代碼：

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

輸出結果：

郭靖
黃蓉
楊過
小龍女

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

從函數返回數組

數組能夠做爲函數的返回值。

示例：

下面咱們直接經過 Array 對象來建立數組，來做爲函數 show 的返回值，也要注意一下數組的類型與返回值的類型要對應：

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

編譯成 JavaScript 代碼：

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

輸出：

郭靖
黃蓉
楊過
小龍女

總結

本節關於數組的知識點仍是挺多的，咱們來梳理一下。首先弄清楚什麼是數組？咱們能夠理解爲數組就是一個由任意數量，相同類型的值組成的一個變量。而後學習怎麼聲明數組、經過索引訪問數組、修改數組中的元素、刪除數組中的元素、什麼是多維數組等等。你學到這裏有沒有將上述講到的知識點都弄清呢？咱們能夠作幾個小練習來驗證一下。

動手練習

聲明一個字符串類型的數組，這個數組中有5個元素，分別是「蘋果」、「西瓜」、」香蕉「、「櫻桃」、」梨子「。
經過索引獲取上一題中的第三個元素的值？
刪除上面數組中的最後一個元素？
下面是一個三維數組，如何經過索引來獲取值爲8的元素？

let moreArr = [[[1, 2,], 3], [[4, 5, 6]], [7, [8, 9]]];

連接：https://www.9xkd.com/