TypeScript 如何使用关联数组

一个有一个或多个元素的对象被称为数组。每个组件都可以是一个对象或一个简单的数据类型。例如，你可以把日期、字符串和数字放在同一个数组中。信息也可以用关联数组来存储。一个采用字符串作为索引的数组被称为关联数组。

你可以创建一个混合数组，在一个数组中使用数字和字符串索引。如果一个数组既有数字索引又有字符串索引，那么该数组的长度将只反映有数字索引的条目数。就功能而言，关联数组和数字数组是相似的。然而，它们的不同之处在于其索引的字数。关联数组中的每个ID键都有一个相应的值。

在TypeScript中，关联数组是一个界面，它列出了键与相应的值。它可以像普通数组一样使用，但唯一的区别是它可以使用字符串而不是数字来访问。

语法

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

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

在上面的语法中，我们声明了一个关联数组接口和它的一个对象，它看起来和普通的数组一样，但是我们用一个字符串’key’作为索引和一个值’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])
}
// 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’在关联数组中循环。普通数组的属性和方法都可以在关联数组上使用，这是一个非常强大的工具。