TypeScript 数组和元组

当使用TypeScript时，开发者可以访问各种数据结构来存储和操作数据。数组和元组是两种常用的数据结构。数组和元组都允许我们存储多个值，但它们在结构和用法上有所不同。

在本教程中，我们将探讨TypeScript中数组和元组的特性，讨论它们的区别，并提供示例来说明它们的应用。

什么是数组

数组是一种存储元素的数据结构。它是一个有序的值列表，每个值都有一个索引来标识。TypeScript中的数组可以包含相同类型的元素或不同类型的组合。我们可以使用方括号声明一个数组，元素之间用逗号分隔。

示例1

let numbers: number[] = [1, 2, 3, 4, 5];
let fruits: string[] = ["apple", "banana", "orange"];
let mixed: (number | string)[] = [1, "two", 3, "four"];
console.log(`The value of numbers is {numbers}`);
console.log(`The value of fruits is{fruits}`);
console.log(`The value of mixed is ${mixed}`);

编译后将生成以下JavaScript代码：

var numbers = [1, 2, 3, 4, 5];
var fruits = ["apple", "banana", "orange"];
var mixed = [1, "two", 3, "four"];
console.log("The value of numbers is ".concat(numbers));
console.log("The value of fruits is ".concat(fruits));
console.log("The value of mixed is ".concat(mixed));

输出

上面的代码将产生以下输出 –

The value of numbers is 1,2,3,4,5
The value of fruits is apple,banana,orange
The value of mixed is 1,two,3,four

示例2

在这里我们尝试移除 numbers 数组的最后一个元素。

let numbers: number[] = [1, 2, 3, 4, 5];
console.log(numbers.length); // Output: 5
numbers.pop(); // Removing the last element
console.log(numbers); // Output: [1, 2, 3, 4]

在编译时，它将生成以下JavaScript代码 –

var numbers = [1, 2, 3, 4, 5];
console.log(numbers.length); // Output: 5
numbers.pop(); // Removing the last element
console.log(numbers); // Output: [1, 2, 3, 4]

输出

上述代码将产生以下输出 –

5
[ 1, 2, 3, 4 ]

什么是元组

元组是一个有限的有序元素列表，每个元素可以具有不同的类型。与数组不同，元组的长度是固定的，并且每个元素的类型在声明时已经确定。在TypeScript中，元组使用方括号表示，每个元素以逗号分隔。我们还可以使用类型注解来指定每个元素的类型。

示例3

let person: [string, number] = ["John", 25];
let point: [number, number, string] = [10, 20, "origin"];
console.log(`The value of person is {person}`);
console.log(`The value of point is{point}`);

在编译时，它将生成以下的JavaScript代码 –

var person = ["John", 25];
var point = [10, 20, "origin"];
console.log("The value of person is ".concat(person));
console.log("The value of point is ".concat(point));

输出

上述代码将产生以下输出：

The value of person is John,25
The value of point is 10,20,origin

在上面的示例中，我们声明了两个元组。person元组包含一个字符串元素和一个数字元素。point元组包含两个数字元素和一个字符串元素。

示例4

在这个示例中，我们尝试将布尔输入true添加到包含字符串和数字类型的元组中，因此其类型为字符串 | 数字。这试图修改数据属性类型，导致错误。

let data: [string, number] = ["Hello", 42];
console.log(data.length); // Output: 2
data.push(true);

var data = ["Hello", 42];
console.log(data.length); // Output: 2
data.push(true);

输出

我们获得以下编译时输出。

2

数组和元组的区别

现在我们了解了TypeScript中数组和元组的基本定义，让我们来探索一下它们之间的区别。

结构

数组是灵活的，可以容纳任意数量相同或不同类型的元素。它们是动态的，意味着我们可以在运行时添加或删除数组中的元素。另一方面，元组具有固定的长度，并且每个元素的类型是预先确定的。一旦定义了元组，我们就无法添加或删除元素或更改它们的类型。

用途

当我们需要处理元素的集合并且元素的顺序或位置很重要时，通常使用数组。我们可以使用各种数组方法在数组中执行添加、删除和修改元素等操作。另一方面，元组通常用于表示具有不同类型的一组固定值，例如表示坐标或键值对。

类型安全

与元组相比，数组提供的类型安全性较低。在数组中，我们可以访问任何索引处的任何元素，并且只要索引在数组边界内，TypeScript就会允许这样做。如果我们访问不存在的元素或错误地假设元素的类型，这可能导致潜在的运行时错误。而具有固定长度和已知类型的元组提供更多的类型安全性。 TypeScript可以强制执行元组元素的正确使用，从而减少运行时错误的机会。

总结数组和元组之间的区别，让我们来看一下下面的表格：

结论

总之，数组和元组在TypeScript中都是有用的数据结构，但它们具有不同的特点和用法。数组在长度和元素类型方面提供了灵活性，适合存储有序元素集合。而元组具有固定的长度和预定的类型，非常适合表示具有不同类型的固定值集合。

根据程序的要求选择合适的数据结构是很重要的。数组非常灵活，并且可以处理各种场景，而元组提供严格的类型安全性，并确保正确使用固定值集合。通过理解TypeScript中数组和元组的区别，您可以在选择适合您的应用程序的正确数据结构时做出明智的决策。