如何在 TypeScript 中使用關聯陣列?


包含一個或多個元素的物件稱為陣列。這些元素中的每一個可以是物件或簡單資料型別。例如,您可以將日期、字串和數字放在同一個陣列中。也可以使用關聯陣列儲存資訊。使用字串作為索引的陣列稱為關聯陣列。

您可以建立一個混合陣列,在一個數組中使用數字和字串索引。如果一個數組同時具有數字和字串索引,則該陣列的長度將僅反映具有數字索引的條目的數量。在功能方面,關聯陣列和數字陣列類似。但是,它們在索引的表述方式上有所不同。關聯陣列中的每個 ID 鍵都對應一個值。

在 TypeScript 中,關聯陣列是一個介面,它列出了帶有對應值的鍵。它可以像普通陣列一樣使用,但唯一的區別是它可以使用字串而不是數字來訪問。

語法

interface AssociativeArray {
   [key: string]: string
}
var associative_array: AssociativeArray[] = []
associative_array['key'] = 'value'

console.log(associative_array['key'])
// Output:
// value

在上面的語法中,我們聲明瞭一個關聯陣列介面及其物件,它看起來與普通陣列相同,但我們使用字串“鍵”作為索引,使用值“值”。我們使用鍵來訪問儲存的值。

示例 1

在下面的示例中,我們使用關聯陣列來儲存一系列帶有字串或鍵索引的值。我們在關聯陣列中儲存姓名、語言、學號和電話號碼,然後從中檢索值。我們在控制檯中顯示所有值。我們聲明瞭一個 AssociativeArray 介面來儲存關聯陣列的資料型別。

interface AssociativeArray {
   [key: string]: string
}

var associative_array: AssociativeArray[] = []
associative_array['name'] = 'Tutorialspoint'
associative_array['language'] = 'TypeScript'
associative_array['roll'] = 12345
associative_array['phone'] = 9999999999

console.log('Name: ', associative_array['name'])
console.log('Language: ', associative_array['language'])
console.log('Roll: ', associative_array['roll'])
console.log('Phone: ', associative_array['phone'])

編譯後,它將生成以下 JavaScript 程式碼:

var associative_array = [];
associative_array['name'] = 'Tutorialspoint';
associative_array['language'] = 'TypeScript';
associative_array['roll'] = 12345;
associative_array['phone'] = 9999999999;
console.log('Name: ', associative_array['name']);
console.log('Language: ', associative_array['language']);
console.log('Roll: ', associative_array['roll']);
console.log('Phone: ', associative_array['phone']);

輸出

以上程式碼將產生以下輸出:

Name:  Tutorialspoint
Language:  TypeScript
Roll:  12345
Phone:  9999999999

在輸出中,我們顯示了關聯陣列的所有儲存值。

示例 2

在下面的示例中,我們將瞭解如何遍歷關聯陣列。我們正在使用一個關聯陣列,該陣列以不同語言儲存“hello”單詞。遍歷關聯陣列不像遍歷普通陣列那樣,因為在這種情況下,當使用“for in”迴圈機制時,我們將獲得關聯陣列的鍵。我們還需要使用該鍵來獲取關聯陣列中實際儲存的值。這是一種非常簡單的方法,可以獲取關聯陣列的所有值,而無需逐個手動獲取。我們聲明瞭一個 AssociativeArray 介面來儲存關聯陣列的資料型別。

interface AssociativeArray {
   [key: string]: string
}

// declaring associative array
var hello_associated_array: AssociativeArray[] = []
hello_associated_array['english'] = 'Hello'
hello_associated_array['spanish'] = 'hola'
hello_associated_array['french'] = 'Bonjour'
hello_associated_array['german'] = 'Guten tag'
hello_associated_array['italian'] = 'salve'

// looping through associative array
for (let key in hello_associated_array) {
   console.log(key + ': ' + hello_associated_array[key])
}

編譯後,它將生成以下 JavaScript 程式碼:

// declaring associative array
var hello_associated_array = [];
hello_associated_array['english'] = 'Hello';
hello_associated_array['spanish'] = 'hola';
hello_associated_array['french'] = 'Bonjour';
hello_associated_array['german'] = 'Guten tag';
hello_associated_array['italian'] = 'salve';

// looping through associative array
for (var key in hello_associated_array) {
   console.log(key + ': ' + hello_associated_array[key]);
}

輸出

以上程式碼將產生以下輸出:

english: Hello
spanish: hola
french: Bonjour
german: Guten tag
italian: salve

就像我們使用了“for in”迴圈機制一樣,我們也可以使用“forEach”來遍歷關聯陣列。普通陣列的屬性和方法在關聯陣列上可用,這是一個非常強大的工具。

更新於:2023年1月20日

12K+ 瀏覽量

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告

© . All rights reserved.