Laucher

2022年 10月 13日

TypeScript的数组类型

在TypeScript中，数组类型是一种非常常用的数据类型，它用于表示一组具有相同类型的元素。在本文中，我们将详细讲解TypeScript中的数组类型，以及如何使用数组来存储和操作数据。

什么是数组类型？

数组是一种有序的数据集合，其中的元素可以是相同类型或不同类型。在TypeScript中，我们可以使用数组类型来声明一个变量，该变量可以存储相同类型的多个值。

1.声明数组类型

在TypeScript中，声明一个数组类型有两种方式：

使用类型后缀[]，表示一个由特定类型组成的数组。

let numbers: number[] = [1, 2, 3, 4, 5];
let fruits: string[] = ["apple", "banana", "orange"];

使用泛型数组类型Array<元素类型>。

let numbers: Array<number> = [1, 2, 3, 4, 5];
let fruits: Array<string> = ["apple", "banana", "orange"];

这两种方式是等价的，你可以根据个人喜好选择使用哪种方式。

2.访问数组元素

通过索引来访问数组中的元素，索引从0开始，表示数组中的第一个元素。

let fruits: string[] = ["apple", "banana", "orange"];
console.log(fruits[0]); // 输出："apple"
console.log(fruits[1]); // 输出："banana"

3.修改数组元素

我们可以通过索引来修改数组中的元素。

let fruits: string[] = ["apple", "banana", "orange"];
fruits[1] = "grape";
console.log(fruits); // 输出：["apple", "grape", "orange"]

4.数组方法

TypeScript提供了许多数组方法，用于对数组进行操作和转换。

5.添加元素

push()：向数组末尾添加一个或多个元素。

let fruits: string[] = ["apple", "banana"];
fruits.push("orange", "grape");
console.log(fruits); // 输出：["apple", "banana", "orange", "grape"]

6.删除元素

pop()：删除数组末尾的元素，并返回删除的元素。

let fruits: string[] = ["apple", "banana", "orange"];
let removedFruit = fruits.pop();
console.log(fruits); // 输出：["apple", "banana"]
console.log(removedFruit); // 输出："orange"

7.数组长度

length：获取数组的长度。

let fruits: string[] = ["apple", "banana", "orange"];
console.log(fruits.length); // 输出：3

8.遍历数组

使用for...of循环遍历数组元素。

let fruits: string[] = ["apple", "banana", "orange"];
for (let fruit of fruits) {
  console.log(fruit);
}
// 输出：
// "apple"
// "banana"
// "orange"

9.多维数组

TypeScript也支持多维数组，即数组中的元素也是数组。

let matrix: number[][] = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];
console.log(matrix[1][2]); // 输出：6

10.数组类型和元组类型的区别

需要注意的是，数组类型和元组类型在TypeScript中是不同的。

数组类型用于表示一组具有相同类型的元素，它的长度是不固定的。

let numbers: number[] = [1, 2, 3, 4, 5];

而元组类型用于表示一个固定长度的数组，并且每个元素可以有不同的类型。

let person: [string, number] = ["Alice", 30];

10.数组泛型

数组类型是TypeScript中用于表示一组具有相同类型的元素的重要概念。我们可以使用类型后缀[]或泛型数组类型Array<元素类型>来声明数组类型。通过索引可以访问和修改数组元素，还可以使用数组方法对数组进行操作和转换。

let numbers: Array<number> = [1, 2, 3, 4, 5];
let fruits: Array<string> = ["apple", "banana", "orange"];
let Object: Array<object> = [{name: "apple"},{name: "banana"},{name: "orange"}];

数组泛型同样适用于多维数组，即数组中的元素也是数组。

let matrix: Array<Array<number>> = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
]; // Array<Array<number>>表示一个由number类型的数组组成的数组，即多维数组。

也可以定义接口，一般用来描述类数组

interface IArrayNumber {
    [index: number]: number;
}
let fibonacci: IArrayNumber = [0, 1, 2, 3, 4, 5]; //  其中索引必须是数字类型，同时数组的元素值也必须是数字类型。