如何在 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+ 浏览量

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告