TypeScript – splice 方法详解|极客教程

TypeScript – splice 方法详解

TypeScript - splice 方法详解

1. 简介

splice 方法是 TypeScript 中数组对象的一个内建方法，用于在数组中添加、删除或替换元素。splice 方法可以修改原始数组，并返回被删除的元素数组。

2. 使用方法

splice 方法的基本语法如下：

array.splice(start: number, deleteCount: number, ...items: T[]): T[];

参数说明：

start：表示要修改的起始索引位置，可以是负数。如果是负数，表示倒数第几个元素的索引位置。
deleteCount：表示要删除的元素数量。如果设为 0，则不删除任何元素。如果省略了该参数，则会删除从 start 开始到数组末尾的所有元素。
...items：表示要添加到数组中的元素。

返回值：

返回一个由被删除元素组成的数组。

3. 示例

3.1 删除元素

我们先来看一个简单的示例，删除数组中的一个或多个元素：

const fruits = ['apple', 'banana', 'orange', 'kiwi'];

// 删除一个元素
const deletedElement = fruits.splice(1, 1);
console.log(fruits); // 输出：['apple', 'orange', 'kiwi']
console.log(deletedElement); // 输出：['banana']

// 删除多个元素
const deletedElements = fruits.splice(1, 2);
console.log(fruits); // 输出：['apple']
console.log(deletedElements); // 输出：['orange', 'kiwi']

在这个示例中，我们创建了一个水果数组 fruits，然后使用 splice 方法删除了其中的一个元素和两个元素。最后打印出修改后的数组和被删除的元素数组。

3.2 添加元素

现在我们来看一个示例，向数组中添加元素：

const numbers = [1, 2, 3, 4, 5];

// 在指定位置添加元素
numbers.splice(1, 0, 6);
console.log(numbers); // 输出：[1, 6, 2, 3, 4, 5]

// 从指定位置替换元素
numbers.splice(2, 1, 7);
console.log(numbers); // 输出：[1, 6, 7, 3, 4, 5]

// 添加多个元素
numbers.splice(3, 0, 8, 9, 10);
console.log(numbers); // 输出：[1, 6, 7, 8, 9, 10, 3, 4, 5]

在这个示例中，我们首先创建了一个数字数组 numbers，然后使用 splice 方法在指定位置添加了一个元素。接着，我们使用 splice 方法从指定位置替换了一个元素，并且使用 splice 方法在指定位置添加了多个元素。最终打印出修改后的数组。

3.3 替换元素

接下来，我们来看一个示例，演示如何替换数组中的元素：

const animals = ['cat', 'dog', 'horse', 'elephant'];

// 替换一个元素
animals.splice(1, 1, 'bird');
console.log(animals); // 输出：['cat', 'bird', 'horse', 'elephant']

// 替换多个元素
animals.splice(2, 2, 'tiger', 'lion');
console.log(animals); // 输出：['cat', 'bird', 'tiger', 'lion']

在这个示例中，我们创建了一个动物数组 animals，然后使用 splice 方法替换了数组中的一个和两个元素。最后打印出修改后的数组。