TypeScript 数组
最后修改于 2025 年 2 月 24 日
TypeScript 中的数组用于在单个变量中存储多个值。它们与 JavaScript 中的数组相似，但增加了类型安全的优势。本文通过实际示例介绍了 TypeScript 数组的创建、操作和常用操作。
什么是 TypeScript 数组？
TypeScript 数组是任何类型的元素的有序集合。它们可以使用 Array<T> 语法或简写 T[] 来声明，其中 T 是数组中元素的类型。
创建数组
此示例演示了如何在 TypeScript 中创建数组。
creating_arrays.ts
let numbers: number[] = [1, 2, 3, 4, 5]; let fruits: Array<string> = ["Apple", "Banana", "Cherry"]; console.log(numbers); // Output: [1, 2, 3, 4, 5] console.log(fruits); // Output: ["Apple", "Banana", "Cherry"]
numbers 数组使用简写语法声明，而 fruits 数组使用 Array<T> 语法声明。这两个数组都是类型安全的，确保只能添加指定类型的元素。
访问数组元素
此示例演示了如何访问 TypeScript 数组中的元素。
accessing_elements.ts
let numbers: number[] = [1, 2, 3, 4, 5]; console.log(numbers[0]); // Output: 1 console.log(numbers[2]); // Output: 3
数组元素通过它们的索引访问。第一个元素位于索引 0，第二个位于索引 1，依此类推。
修改数组元素
此示例演示了如何修改 TypeScript 数组中的元素。
modifying_elements.ts
let numbers: number[] = [1, 2, 3, 4, 5]; numbers[1] = 10; // Modify the second element console.log(numbers); // Output: [1, 10, 3, 4, 5]
可以通过为特定索引分配新值来修改数组元素。
数组方法
此示例演示了 TypeScript 中常用的数组方法。
array_methods.ts
let numbers: number[] = [1, 2, 3, 4, 5]; numbers.push(6); // Add an element to the end console.log(numbers); // Output: [1, 2, 3, 4, 5, 6] numbers.pop(); // Remove the last element console.log(numbers); // Output: [1, 2, 3, 4, 5] numbers.shift(); // Remove the first element console.log(numbers); // Output: [2, 3, 4, 5] numbers.unshift(1); // Add an element to the beginning console.log(numbers); // Output: [1, 2, 3, 4, 5]
TypeScript 数组支持常用的方法，如 push、pop、shift 和 unshift，用于添加和删除元素。
遍历数组
此示例演示了如何遍历 TypeScript 数组。
iterating_arrays.ts
let fruits: string[] = ["Apple", "Banana", "Cherry"];
for (let fruit of fruits) {
console.log(fruit);
}
// Output:
// Apple
// Banana
// Cherry
for...of 循环用于遍历数组的元素。这是一种访问每个元素的简洁明了的方式。
多维数组
此示例演示了如何在 TypeScript 中创建和使用多维数组。
multidimensional_arrays.ts
let matrix: number[][] = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
for (let row of matrix) {
for (let num of row) {
console.log(num);
}
}
多维数组是数组的数组。它们可用于表示矩阵或网格。
使用数组的最佳实践
- 使用类型注解：始终指定数组中元素的类型以确保类型安全。
- 优先使用不可变操作：使用
map、filter和reduce等方法来避免修改原始数组。 - 利用数组方法：使用内置数组方法执行常见操作，例如添加、删除和遍历元素。
- 处理边缘情况：始终检查边缘情况，例如空数组或越界访问。
来源
在本文中，我们探索了 TypeScript 数组并通过实际示例展示了它们的使用。