TypeScript 中的 Array 操作详解-JavaScript中文网-JavaScript教程资源分享门户

TypeScript 是 JavaScript 的一个超集，它提供了静态类型、泛型等特性，使得 JavaScript 的开发更加安全、高效。而在 TypeScript 中，Array 是一个常用的数据类型，它提供了丰富的操作方法来帮助进行数组的操作。本文将对 TypeScript 中的 Array 操作进行详细的说明。

基本操作

创建数组

在 TypeScript 中，我们可以使用以下几种方式来创建一个数组：

let arr1: number[] = [1, 2, 3];

let arr2: Array<number> = [4, 5, 6];

let arr3 = new Array<number>(7, 8, 9);

其中，第一种方式是最简单的，直接使用 [] 来创建数组。第二种方式使用了泛型语法，也可以创建一个数组。第三种方式使用了 new 关键字来创建一个数组，并且需要指定数组的元素类型。这三种方式本质上是等价的。

访问数组元素

访问数组元素可以使用下标操作符 [] 来进行，例如：

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

遍历数组

在 TypeScript 中，我们可以使用 for...of 循环来对数组进行遍历：

let arr: number[] = [1, 2, 3];
for (let item of arr) {
    console.log(item);
}

也可以使用 forEach 方法来进行遍历：

let arr: number[] = [1, 2, 3];
arr.forEach((item) => {
    console.log(item);
});

修改数组元素

访问数组元素后，我们也可以对其进行修改：

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

删除/添加数组元素

在 TypeScript 中，我们可以使用 splice 方法来删除/添加数组元素：

let arr: number[] = [1, 2, 3];
arr.splice(1, 1); // 从第 1 个位置开始删除 1 个元素
console.log(arr); // 输出 [1, 3]

arr.splice(1, 0, 2); // 在第 1 个位置插入元素 2
console.log(arr); // 输出 [1, 2, 3]

拷贝数组

在 TypeScript 中，我们可以使用以下几种方式来拷贝数组：

let arr1: number[] = [1, 2, 3];
let arr2: number[] = arr1.slice();

let arr3: number[] = [...arr1];

let arr4: number[] = Array.from(arr1);

其中，第一种方式使用了 slice 方法来拷贝数组，第二种方式使用了扩展运算符 ...，第三种方式使用了 Array.from 方法来创建一个新的数组。

高级操作

数组排序

在 TypeScript 中，我们可以使用 sort 方法来对数组进行排序：

let arr: number[] = [3, 2, 1];
arr.sort(); // 默认升序排序
console.log(arr); // 输出 [1, 2, 3]

arr.sort((a, b) => b - a); // 降序排序
console.log(arr); // 输出 [3, 2, 1]

数组查找

在 TypeScript 中，我们可以使用以下几种方式来查找数组中的元素：

-- -------------------- ---- -------
--- ---- -------- - --- -- ---

-- ------
---------------------------- -- -- -
-------------------------------- -- -- -

-- ----
--------------------------- -- ---- - ---- -- -- -
-------------------------------- -- ---- - ---- -- -- -展开代码

其中 indexOf 和 lastIndexOf 方法用于查找元素的索引，如果没有找到则返回 -1。而 find 和 findIndex 方法用于查找符合条件的元素，如果没有找到则返回 undefined 或 -1。

数组过滤/映射

在 TypeScript 中，我们可以使用以下几种方式来过滤/映射数组中的元素：

let arr: number[] = [1, 2, 3];

// 过滤元素
console.log(arr.filter((item) => item > 1)); // 输出 [2, 3]

// 映射元素
console.log(arr.map((item) => item * 2)); // 输出 [2, 4, 6]

其中，filter 方法用于对数组进行过滤，只保留符合条件的元素；而 map 方法用于对每个元素进行映射，生成一个新的数组。

数组扁平化

在 TypeScript 中，我们可以使用以下几种方式来对数组进行扁平化（将多维数组转为一维数组）：

-- -------------------- ---- -------
--- ---- -------- - --- --- ------

-- -----------
-------- ------------ -
    ------ ------------------------- -- ------------------- - ------------- - -------
-
-------------------------- -- -- --- -- --

-- -- ---- -------
-------------------------------- -- -- --- -- --展开代码

其中，第一种方式使用了递归的方式进行扁平化；而第二种方式使用了 flat 方法进行扁平化，将多维数组转为一维数组。需要注意的是，flat 方法的参数表示扁平化的深度，当深度为 Infinity 时，可以将任意多层的嵌套数组转为一维数组。

总结

本文对 TypeScript 中的 Array 操作进行了详细的说明，并提供了相应的示例代码。数组是 JavaScript 开发中的一个基础数据类型，对其进行深入的了解，可以帮助我们更加高效地进行开发。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/664be935d3423812e4ac2833

TypeScript 中的 Array 操作详解