TypeScript 中的数组和元组详解

前言

TypeScript 是一门开发大型 JavaScript 应用的语言，它给 JavaScript 带来了静态类型检查和编译时检查等多种好处，能够辅助开发者减少错误和提高代码可维护性。在开发过程中，数组和元组是 TypeScript 必须涉及的基本数据类型，因此了解这两个类型的详细信息是开发者必须掌握的知识。

数组

定义方式

在 TypeScript 中，数组可以通过以下两种方式定义：

• 使用 [] 表示法：

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

• 使用 Array 泛型：

let list: Array<number> = [1, 2, 3];

数组的操作

追加元素

在 JavaScript 中，我们可以通过使用 push 方法向数组末尾添加新的元素。同样地，TypeScript 中的数组可以使用该方法进行元素追加：

let list: number[] = [1, 2, 3];
list.push(4);

现在数组 list 中包括了 1、2、3 和 4 四个元素。

访问元素

在 TypeScript 中，访问数组元素的方式与 JavaScript 中相同：

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

遍历元素

在 TypeScript 中，我们可以使用 for…of 循环来遍历数组元素：

let list: number[] = [1, 2, 3];
for(let num of list) {
    console.log(num); // 分别输出 1、2 和 3
}

数组解构

在 TypeScript 中，我们可以使用数组解构来对数组进行解构赋值：

let list: number[] = [1, 2, 3];
let [a, b, c] = list;
console.log(a, b, c); // 输出 1、2 和 3

数组常见操作

数组拼接

调用数组 concat() 方法将返回传入的所有数组的拼接结果，但并不会改变原始数组：

let list1: number[] = [1, 2, 3];
let list2: number[] = [4, 5, 6];
let list3: number[] = list1.concat(list2);
console.log(list3); // 输出 [1, 2, 3, 4, 5, 6]

数组过滤

调用数组 filter() 方法将返回一个新的数组，其中元素满足指定的条件：

let list: number[] = [1, 2, 3, 4, 5];
let filteredList = list.filter(num => num % 2 === 0);
console.log(filteredList); // 输出 [2, 4]

数组映射

调用数组 map() 方法将根据指定的条件对数组中的每个元素执行相应的操作，返回处理后的结果：

let list: number[] = [1, 2, 3, 4];
let mappedList = list.map(num => num * 2);
console.log(mappedList); // 输出 [2, 4, 6, 8]

数组查找

调用数组 find() 方法将返回第一个满足指定条件的元素。如果不存在符合条件的元素，返回 undefined：

let list: number[] = [1, 2, 3, 4, 5];
let result = list.find(num => num > 3);
console.log(result); // 输出 4

元组

元组的定义

元组是 TypeScript 中新增的类型，它允许我们定义具有固定数量和类型的、关联的值的数组。

在 TypeScript 中，元组可以通过以下形式来定义：

let tuple: [number, string] = [1, 'hello'];

上述定义表明，这个元组包括两个元素，第一个元素是数字类型，第二个元素是字符串类型。

元组常见操作

访问元素

访问元组中的元素与 JavaScript 和 数组很相似：

let tuple: [number, string] = [1, 'hello'];
console.log(tuple[0]); // 输出 1
console.log(tuple[1]); // 输出 'hello'

元组合并

当我们定义一个新的元组时，它可以是两个或多个现有元组的组合：

let tuple1: [number, string] = [1, 'hello'];
let tuple2: [boolean, number] = [true, 2];
let tuple3: [number, string, boolean, number] = [...tuple1, ...tuple2];
console.log(tuple3); // 输出 [1, 'hello', true, 2]

总结

本文介绍了 TypeScript 中数组和元组的定义方式和常见操作。通过深入理解这些内容，开发者能够更加熟练地使用 TypeScript，提高代码的可读性和可维护性。

完整的示例代码：

// 示例 (数组)
let list: number[] = [1, 2, 3];
list.push(4);
console.log(list[0]); // 输出 1
for(let num of list) {
    console.log(num) // 输出 1、2、3 和 4
}
let [a, b, c] = list;
console.log(a, b, c); // 输出 1、2 和 3

let list1: number[] = [1, 2, 3];
let list2: number[] = [4, 5, 6];
let list3: number[] = list1.concat(list2);
console.log(list3); // 输出 [1, 2, 3, 4, 5, 6]

let filteredList = list.filter(num => num % 2 === 0);
console.log(filteredList); // 输出 [2, 4]

let mappedList = list.map(num => num * 2);
console.log(mappedList); // 输出 [2, 4, 6, 8]

let result = list.find(num => num > 3);
console.log(result); // 输出 4

// 示例 (元组)
let tuple: [number, string] = [1, 'hello'];
console.log(tuple[0]); // 输出 1
console.log(tuple[1]); // 输出 'hello'

let tuple1: [number, string] = [1, 'hello'];
let tuple2: [boolean, number] = [true, 2];
let tuple3: [number, string, boolean, number] = [...tuple1, ...tuple2];
console.log(tuple3); // 输出 [1, 'hello', true, 2]

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a23971add4f0e0ffa4d623