数组与元组：TypeScript 的基础

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

在 TypeScript 中，数组和元组是两种常用的数据结构，它们用于存储和组织多个值。下面详细介绍它们的使用方法和区别。

数组 (Array)

数组是一种有序的值集合，可以包含零个或多个相同类型的元素。

声明数组

let numbers: number[] = [1, 2, 3, 4, 5];
let strings: string[] = ['a', 'b', 'c'];

多类型数组

TypeScript 支持数组中包含多种类型的元素，但通常推荐使用联合类型来明确元素类型。

let mixed: (number | string)[] = [1, 'a', 2, 'b'];

数组方法

TypeScript 数组可以使用所有 JavaScript 数组方法，如 push, pop, shift, unshift, splice 等。

let fruits: string[] = ['apple', 'banana'];
fruits.push('orange'); // ['apple', 'banana', 'orange']

只读数组

使用 readonly 修饰符可以创建只读数组，防止数组被修改。

let readonlyFruits: readonly string[] = ['apple', 'banana'];
// readonlyFruits.push('orange'); // Error: Property 'push' does not exist on type 'readonly string[]'.

元组 (Tuple)

元组是一种特殊的数组，它允许你定义元素的类型和位置。元组的长度是固定的，每个位置的元素类型也是固定的。

声明元组

let tuple: [string, number, boolean] = ['hello', 42, true];

元组的优势

元组允许你精确地控制每个位置的元素类型，这在某些情况下非常有用，例如函数返回多个值时。

function getPersonInfo(): [string, number] {
return ['Alice', 30];
}

let [name, age] = getPersonInfo(); // 解构赋值

元组的扩展

元组可以包含可选元素和剩余元素（rest elements）。

// 可选元素
let tupleWithOptional: [string, number?, boolean?] = ['hello'];

// 剩余元素
let tupleWithRest: [string, ...number[]] = ['start', 1, 2, 3];

数组与元组的区别

• 长度：数组的长度是动态的，可以随时添加或删除元素；元组的长度是固定的。
• 类型：数组中的元素类型可以相同也可以不同（使用联合类型）；元组中的每个位置的元素类型是固定的。
• 用途：数组适用于存储同类型的元素集合；元组适用于需要精确控制每个位置元素类型和数量的场景。

通过合理使用数组和元组，可以更好地组织和处理数据，提高代码的可读性和可维护性。