在TypeScript中删除数组元素：面向初学者的5种方法

轻松学习Python，无需理论负担。在浏览器中直接解决带自动检查的实践任务，无需安装任何东西。

在TypeScript中删除数组元素：从新手到专家

你好，未来的TypeScript大师！👋 如果你曾经写过TypeScript（或JavaScript）代码，并且问过自己："How do I remove an array item in TypeScript?" —— 你并不孤单。这个问题在Stack Overflow上获得了数千次浏览，这并非偶然。从数组中删除元素是一项基本操作，看似简单，但实际上却隐藏着许多陷阱。

在这篇文章中，我们不会只给出干巴巴的答案。我们将详细讲解5种从TypeScript数组中删除元素的实用方法，从最显而易见的到你可能不知道的。你将了解何时使用splice，何时使用filter，为什么delete几乎总是有害的，以及如何在此过程中保持类型安全。我们开始吧！

为什么这很重要？（以及TypeScript扮演什么角色？）

数组是任何应用程序的基础。用户列表、购物车、消息历史记录——这些都是数组。而能够熟练管理它们的内容是一项关键技能。TypeScript在此基础上增加了一层：类型化。如果你错误地删除了一个元素，编译器可能不会报错，但你的应用程序在运行时可能会“崩溃”。因此，我们将严格使用TypeScript示例，并明确指定类型。

让我们创建一个“测试场”——一个我们将要操作的数组：

// 我们的学习数组const fruits: string[] = ['🍎 Apple', '🍌 Banana', '🍊 Orange', '🍇 Grape', '🍉 Watermelon'];

// 类型化的对象数组（更现实的例子）interface User {  id: number;  name: string;  role: 'admin' | 'user';}

const users: User[] = [  { id: 1, name: 'Alice', role: 'admin' },  { id: 2, name: 'Bob', role: 'user' },  { id: 3, name: 'Charlie', role: 'user' },];

现在，我们来分析每种删除方法。我们将针对不同的任务来回答这个问题："How do I remove an array item in TypeScript?"

方法 #1：splice() —— 按索引“外科手术式”删除

splice()方法是处理数组的瑞士军刀。它可以删除、添加和替换元素。但今天我们只关注删除。

语法： array.splice(startIndex, deleteCount)

startIndex —— 开始删除的索引。
deleteCount —— 要删除的元素数量。

重要提示： splice() 会修改原始数组（使其发生突变）并返回一个包含被删除元素的数组。

示例：删除第二个元素（Banana）

const myFruits: string[] = [...fruits]; // 创建一个副本，以免破坏原始数组

// 从索引1（第二个元素）开始删除1个元素const removedFruit: string[] = myFruits.splice(1, 1);

console.log(myFruits);      // ['🍎 Apple', '🍊 Orange', '🍇 Grape', '🍉 Watermelon']console.log(removedFruit); // ['🍌 Banana']

何时使用： 当你确切知道要删除的元素的索引时。例如，根据序号从购物车中删除商品。

TypeScript 注意事项： 返回值的类型是 T[]（与原始数组类型相同的数组）。如果你尝试从 readonly 数组中删除元素，TypeScript 会报错，因为 splice 会改变数组。