如何在 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”來遍歷關聯陣列。普通陣列的屬性和方法在關聯陣列上可用,這是一個非常強大的工具。
資料結構
網路
關係型資料庫管理系統
作業系統
Java
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP