TypeScript 数组详解与实战技巧（九）

数组是编程中非常基础且重要的数据结构，尤其在 TypeScript 中，数组的类型安全性和灵活性使其成为处理大量数据的理想选择。本文将详细介绍 TypeScript 中数组的基本概念、声明方式、常见操作以及一些高级用法，帮助你更好地理解和使用数组。

什么是数组？

数组是一种用于存储多个值的数据结构，这些值可以通过一个单独的变量名进行访问。在 TypeScript 中，数组可以存储相同类型的值，也可以存储不同类型的值。数组的每个元素都有一个索引，索引从 0 开始，通过索引可以快速访问和修改数组中的元素。

声明和初始化数组

在 TypeScript 中，声明和初始化数组有多种方式。以下是几种常见的方法：

1. 直接声明和初始化

let sites: string[] = ["Google", "Runoob", "Taobao"];

在这个例子中，我们声明了一个 string 类型的数组 sites，并在声明时直接初始化了它的值。

2. 分步声明和初始化

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

这里，我们先声明了一个 number 类型的数组 nums，然后在后续的代码中初始化了它的值。

3. 使用 Array 构造函数

let sites: string[] = new Array("Google", "Runoob", "Taobao");

使用 Array 构造函数可以创建一个数组，并在创建时初始化其值。这种方式在某些情况下更加灵活。

4. 动态类型数组

如果数组中的元素类型不确定，可以使用 any 类型：

let mixed: any[] = [1, "hello", true];

这种方式虽然灵活，但在类型安全方面不如显式指定类型。

访问和修改数组元素

数组的每个元素都有一个索引，索引从 0 开始。通过索引可以访问和修改数组中的元素。

访问数组元素

let sites: string[] = ["Google", "Runoob", "Taobao"];
console.log(sites[0]); // 输出 "Google"
console.log(sites[1]); // 输出 "Runoob"

修改数组元素

let nums: number[] = [1, 2, 3, 4];
nums[1] = 10;
console.log(nums); // 输出 [1, 10, 3, 4]

数组解构

数组解构是一种将数组中的元素赋值给变量的便捷方式。通过解构，可以一次性获取多个数组元素。

let arr: number[] = [12, 13];
let [x, y] = arr;
console.log(x); // 输出 12
console.log(y); // 输出 13

数组迭代

使用 for 循环可以遍历数组中的每个元素。TypeScript 提供了多种循环结构，包括传统的 for 循环、for...of 循环和 forEach 方法。

传统 for 循环

let nums: number[] = [1001, 1002, 1003, 1004];
for (let i = 0; i < nums.length; i++) {
    console.log(nums[i]);
}

for...of 循环

let nums: number[] = [1001, 1002, 1003, 1004];
for (let num of nums) {
    console.log(num);
}

forEach 方法

let nums: number[] = [1001, 1002, 1003, 1004];
nums.forEach((num) => {
    console.log(num);
});

多维数组

多维数组是指数组的元素本身也是数组。最常见的是二维数组，即数组的每个元素都是一个一维数组。

定义和访问二维数组

let multi: number[][] = [
    [1, 2, 3],
    [23, 24, 25]
];
console.log(multi[0][0]); // 输出 1
console.log(multi[0][1]); // 输出 2
console.log(multi[0][2]); // 输出 3
console.log(multi[1][0]); // 输出 23
console.log(multi[1][1]); // 输出 24
console.log(multi[1][2]); // 输出 25

数组在函数中的使用

数组可以作为函数的参数传递，也可以作为函数的返回值。

作为参数传递

let sites: string[] = ["Google", "Runoob", "Taobao", "Facebook"];
function disp(arr_sites: string[]) {
    for (let i = 0; i < arr_sites.length; i++) {
        console.log(arr_sites[i]);
    }
}
disp(sites);

作为返回值

function disp(): string[] {
    return ["Google", "Runoob", "Taobao", "Facebook"];
}
let sites: string[] = disp();
for (let i in sites) {
    console.log(sites[i]);
}

常用数组方法

TypeScript 提供了许多内置的数组方法，这些方法可以帮助你高效地操作数组。以下是一些常用的数组方法及其示例：

1. concat() 连接数组

let alpha = ["a", "b", "c"];
let numeric = [1, 2, 3];
let alphaNumeric = alpha.concat(numeric);

console.log(alphaNumeric); // 输出 ["a", "b", "c", 1, 2, 3]

2. every() 检测每个元素是否符合条件

function isBigEnough(element: number): boolean {
    return element >= 10;
}
let passed = [12, 5, 8, 130, 44].every(isBigEnough);
console.log(passed); // 输出 false

3. filter() 返回符合条件的元素

function isBigEnough(element: number): boolean {
    return element >= 10;
}
let passed = [12, 5, 8, 130, 44].filter(isBigEnough);
console.log(passed); // 输出 [12, 130, 44]

4. forEach() 遍历数组

let num = [7, 8, 9];
num.forEach((value) => {
    console.log(value);
});
// 输出 7 8 9

5. indexOf() 查找元素索引

let index = [12, 5, 8, 130, 44].indexOf(8);
console.log(index); // 输出 2

6. join() 将数组转换为字符串

let arr = ["Google", "Runoob", "Taobao"];
let str = arr.join();
console.log(str); // 输出 "Google,Runoob,Taobao"
let strWithSpaces = arr.join(", ");
console.log(strWithSpaces); // 输出 "Google, Runoob, Taobao"

7. lastIndexOf() 查找元素最后一次出现的索引

let index = [12, 5, 8, 130, 44].lastIndexOf(8);
console.log(index); // 输出 2

8. map() 映射数组元素

let numbers = [1, 4, 9];
let roots = numbers.map(Math.sqrt);
console.log(roots); // 输出 [1, 2, 3]

9. pop() 删除最后一个元素

let numbers = [1, 4, 9];
let element = numbers.pop();
console.log(element); // 输出 9
console.log(numbers); // 输出 [1, 4]

10. push() 添加元素

let numbers = [1, 4, 9];
let length = numbers.push(10);
console.log(numbers); // 输出 [1, 4, 9, 10]
length = numbers.push(20);
console.log(numbers); // 输出 [1, 4, 9, 10, 20]

11. reduce() 累加数组元素

let total = [0, 1, 2, 3].reduce((a, b) => a + b);
console.log(total); // 输出 6

12. reduceRight() 从右到左累加数组元素

let total = [0, 1, 2, 3].reduceRight((a, b) => a + b);
console.log(total); // 输出 6

13. reverse() 反转数组

let arr = [0, 1, 2, 3].reverse();
console.log(arr); // 输出 [3, 2, 1, 0]

14. shift() 删除第一个元素

let arr = [10, 1, 2, 3].shift();
console.log(arr); // 输出 10

15. slice() 截取数组

let arr = ["orange", "mango", "banana", "sugar", "tea"];
let slicedArr = arr.slice(1, 3);
console.log(slicedArr); // 输出 ["mango", "banana"]

总结

通过本文，我们详细介绍了 TypeScript 中数组的基本概念、声明方式、常见操作以及一些高级用法。数组是处理集合数据的强大工具，掌握这些知识将帮助你在日常开发中更加高效地使用 TypeScript。希望本文对你有所帮助，如果你有任何疑问或建议，欢迎在评论区留言交流。