数组05— splice()：删除、插入和替换

在上节，我们学习了队列数据结构以及如何使用 Array 类型的方法实现 JavaScript 队列，错过的小伙伴可以点击文章《【JavaScript 教程】第六章 数组04— JavaScript 队列》进行学习。

那么，在今天的教程中，我们一起来学习如何使用 JavaScript Array 的 splice() 方法删除现有元素、插入新元素和替换数组中的元素。

JavaScript Array 类型提供了一个非常强大的 splice() 方法，允许您将新元素插入到数组的中间。但是，您也可以使用此方法删除和替换现有元素。

使用 JavaScript Array 的 splice() 方法删除元素

要删除数组中的元素，您可以将两个参数传递给 splice() 方法，如下所示：

Array.splice(position,num);

position 指定要删除的第一个项目的位置，num 参数确定要删除的元素数。

splice() 方法更改原始数组并返回一个包含已删除元素的数组。

让我们看看下面的例子。

假设您有一个包含从 1 到 5 的五个数字的数组分数。

let scores = [1, 2, 3, 4, 5];

以下语句从scores 数组的第一个元素开始删除三个元素。

let deletedScores = scores.splice(0, 3);

scores数组现在包含两个元素。

console.log(scores); //  [4, 5]

而deletedScores数组包含三个元素。

console.log(deletedScores); // [1, 2, 3]

下图说明了scores.splice(0,3)上面的方法调用。

使用 JavaScript Array splice() 方法插入元素

您可以通过将三个或更多参数传递给 splice() 方法，其中第二个参数为零，从而将一个或多个元素插入到数组中。

考虑以下语法。

Array.splice(position,0,new_element_1,new_element_2,...);

在这个语法中：

位置指定新元素将在数组中插入的起始位置。

• 第二个参数为零 (0)，指示 splice() 方法不删除任何数组元素。

• 第三个参数、第四个参数等是插入到数组中的新元素。

注意 splice() 方法实际上改变了原始数组。此外， splice() 方法不会删除任何元素，因此它返回一个空数组。例如：

假设您有一个名为 colors 的数组，其中包含三个字符串。

let colors = ['red', 'green', 'blue'];

以下语句在第二个元素之后插入一个元素。

colors.splice(2, 0, 'purple');

colors数组现在有四个元素，新元素插入在第二个位置。

console.log(colors); // ["red", "green", "purple", "blue"]

下图演示了上面的方法调用。

您可以通过将第四个参数、第五个参数等传递给 splice() 方法来插入多个元素，如下例所示。

colors.splice(1, 0, 'yellow', 'pink');console.log(colors); // ["red", "yellow", "pink", "green", "purple", "blue"]

使用 JavaScript Array splice() 方法替换元素

splice() 方法允许您在删除现有元素的同时将新元素插入到数组中。

为此，您至少传递三个参数，第二个参数指定要删除的项目数，第三个参数指定要插入的元素。

请注意，要删除的元素数不必与要插入的元素数相同。

假设您有一组包含四个元素的编程语言，如下所示：

let languages = ['C', 'C++', 'Java', 'JavaScript'];

以下语句将第二个元素替换为一个新元素。

languages.splice(1, 1, 'Python');

语言数组现在仍然有四个元素，新的第二个参数是“Python”而不是“C++”。

console.log(languages); // ["C", "Python", "Java", "JavaScript"]

下图说明了上面的方法调用。

您可以通过向 splice() 方法传递更多参数来将一个元素替换为多个元素，如下所示：

languages.splice(2,1,'C#','Swift','Go');

该语句从第二个元素（即 Java）中删除一个元素，并将三个新元素插入到语言数组中。结果如下。

console.log(languages); // ["C", "Python", "C#", "Swift", "Go", "JavaScript"]

在本教程中，您学习了如何使用 JavaScript Array splice() 方法删除现有元素、插入新元素和替换数组中的元素。