如何在 JavaScript 中使用 Splice：了解数组方法

Splice 是一种 Javascript 数组方法，它通过删除或替换现有元素或添加新元素来更改数组的内容。

在本指南中，我将解释如何使用 Javascript 数组拼接方法。任何级别的开发人员都可以阅读和理解本文。

了解数组方法（拼接）

如果我们看一下 MDN 网站，我们会发现 Javascript 数组原型构造函数允许我们向 Array() 对象添加新方法和属性，它有很多方法，拼接就是其中之一。

Array.prototype.splice()

但是，如果我们尝试在字符串原型上使用相同的方法，如下例所示；

const strings = 'learn'

strings.splice()

然而，我们会收到一个类型错误：

Uncaught TypeError: strings.splice is not a function

重要的是要知道 splice 和 slice 是不一样的。 slice 方法不会突变或更改您的数据，但 splice 方法会，这就是 splice 方法不能用于字符串的原因：字符串是不可变的。

Javascript数组拼接方法使用方法

使用 splice Javascript 数组方法很容易，但语法有时会被误用。

您可以在这些步骤中使用拼接方法

arr.splice(start, deleteCount, item1, ..., itemN)

splice() 属性带有一些参数，这些参数用于确定调用 splice 方法的任何数组的行为。

它们如下：

• 开始
• 删除次数
• 项目

开始

这只是我们希望数组开始更改的索引，如果元素的索引大于数组的长度，则不会删除任何元素。但如果索引小于数组的长度，它会在数组末尾添加一个参数。

删除次数

这是一个可选参数，表示要从数组中删除的元素数，要删除或删除 start 参数必须存在的元素。

如果不包含此参数，或者如果它的值与数组的长度相等，甚至大于数组的长度，则从 start 参数到数组中最后一项的所有元素都将被删除。请注意，如果存在项目参数，则必须包含此参数。

项目

这也是一个可选参数，告诉您要添加到数组中的元素

如果我们不声明元素，Javascript 数组的 splice() 方法将从数组中删除元素。这将返回一个空数组。

用例

现在我们已经了解了参数是什么，让我们尝试查看在编写程序时如何实现的用例和示例。

删除指定索引前的零个元素

如果我们想添加一个元素而不删除任何项目，我们只需指定索引，它只会在指定索引之前删除任何内容。

让我们看看下面的例子：

const myMusic = ['piano', 'guitar', 'violin', 'orchestra'];

const removedElement = myMusic.splice(2, 0, 'drum');

// myMusic is [piano', 'guitar', 'drum', 'guitar', 'violin', 'orchestra']

// removedElement is empty [ ], no elements deleted

在前面的代码中，我们尝试删除索引 3（普通话）上的元素，这意味着一旦它到达索引 3，它找到的任何项目都将被删除，而不用任何元素替换它。

我们还可以删除一个元素并添加其他元素。

const myMusic = ['piano', 'guitar', 'drum', 'violin', 'orchestra']

const removedElement = myMusic.splice(3, 1, 'sax');

// myMusic is ['piano', 'guitar', 'drum', 'sax', 'orchestra']

// removedElement is ['violin']

同样，一旦我们到达索引 3，无论它找到什么，在本例中，'orchestra'，都会被删除，并添加新的（'sax'），上面的代码显示了如何将 'drum' 添加到数组中.从索引 2 开始，零告诉它什么都不删除，如果我们有 1，它将删除 1 个元素并添加我们想要的项目，依此类推。

删除指定索引处的一个或多个元素

假设我们想删除一个项目或元素而不向数组中添加一个新的项目或元素，我们可以像前面的代码片段一样编写它

const myMusic = ['piano', 'guitar', 'drum', 'violin', 'orchestra'];

const removedElement = myMusic.splice(3, 1);

// myMusic is ['piano', 'guitar', 'drum', 'ochestra']

// removedElement is ['violin']

我们可以从任何索引开始，并根据需要删除任意数量的项目。

删除从指定索引开始的所有元素

我们可以从我们想要的任何索引开始删除数组中的所有元素。比方说，我们要删除所有从索引 1 开始的元素。一旦到达索引 1，将从索引 1 开始的所有元素都将被删除。

const myMusic = ['piano', 'guitar', 'drum', 'violin', 'orchestra']

const removedElement = myMusic.splice(1);

// myMusic is ['piano', 'guitar']

// removedElement is ['drum', 'sax', 'ochestra']

此代码片段尝试删除从索引 1 开始的所有元素。其中索引 1 是数组中的“小丑”。由于从 0 开始计数，这将返回一个新数组。它只包含一个元素，即“天使”。这是因为在计数期间，“天使”似乎在索引 0 上，并且计数从索引 1 开始。索引 0 将被省略，从而使其返回该结果。

外卖

如果您需要对数组执行任务，并且不希望更改原始数组，则应避免使用 Javascript 数组的 splice() 方法，因为它们会更改您的数据。

const beforeSplice = ['bread','fish','cook']

console.log(beforeSplice)

// ['bread', 'fish', 'cook']

const afterSpliceData = beforeSplice.splice(1)

console.log(afterSplice)

// ['fish', 'cook']

在上面的例子中。在对 beforeSplice 变量调用 splice Javascript 数组的方法之前。我们有 3 个元素，但在应用该方法后，它返回 2 个元素。这个方法改变了数据。有时这不是我们想要的。但是，如果您只想删除元素或添加元素，那就太完美了。

下一场见。