JavaScript教程-在JavaScript中从数组中删除元素

数组是一种用于存储一个或多个相同数据类型元素的变量。基本上，它可以存储多个相同类型的元素。有时我们需要从数组中删除这些元素。JavaScript提供了几种内置的数组方法，可以轻松地添加或删除数组中的元素。使用这些方法，您可以从开头、结尾或特定索引位置删除元素。

以下是这些JavaScript数组方法：

方法	描述
pop()	此方法从数组的末尾删除元素。
shift()	类似于pop()方法，但它从数组的开头删除元素。
filter()	filter()方法以编程方式从数组中删除元素。
splice()	此方法从特定索引位置删除元素。

所有上述方法都是JavaScript提供的数组函数。下面将详细讨论这些方法，并附带示例。

从数组末尾删除元素 - pop()

JavaScript提供了pop()方法，用于从数组的末尾删除元素。它删除数组的最后一个元素并返回被删除的元素。当从数组中删除元素时，数组的长度减少1。请看下面的代码和输出，以了解它的工作方式：

示例 1

function removeLastElement() {
  var shoeBrand = ["Nike", "Adidas", "Sparks", "RedTape"];
  
  console.log("删除前数组中的元素:", shoeBrand);
  
  // 从数组中删除最后一个元素
  var poppedElement = shoeBrand.pop();
  
  console.log("从数组中删除的元素:", poppedElement);
  console.log("删除后数组中的元素:", shoeBrand);
}

removeLastElement();

输出：

初始时，数组中有四个元素。使用pop()函数将删除最后一个元素，数组中将保留三个元素。

删除前数组中的元素: [ 'Nike', 'Adidas', 'Sparks', 'RedTape' ]
从数组中删除的元素: RedTape
删除后数组中的元素: [ 'Nike', 'Adidas', 'Sparks' ]

示例 2

通过将上述代码放入循环中（for、while或do-while），我们可以逐个从数组末尾删除所有元素。在此示例中，我们将把这段代码放入while循环中。看看它的工作原理：

function removeElement() {
  var shoeBrand = ["Nike", "Adidas", "Sparks", "RedTape"];
  console.log("删除前数组中的元素:", shoeBrand);
  console.log("删除前数组的长度:", shoeBrand.length);
  
  while (shoeBrand.length) {
    // 将被删除的元素存储在变量中
    var poppedElement = shoeBrand.pop();
    
    // 显示被删除的元素
    console.log("从数组中删除的元素:", poppedElement);
  }
  
  // 删除所有元素后的数组长度
  console.log("删除后数组的长度:", shoeBrand.length);
}

removeElement();

输出：

删除前数组中的元素: [ 'Nike', 'Adidas', 'Sparks', 'RedTape' ]
删除前数组的长度: 4
从数组中删除的元素: RedTape
从数组中删除的元素: Sparks
从数组中删除的元素: Adidas
从数组中删除的元素: Nike
删除后数组的长度: 0

从数组开头删除元素 - shift()

JavaScript提供了shift()方法，用于从数组的开头删除元素。它删除数组的第一个元素并返回被删除的元素。当从数组中删除元素时，数组的长度减少1。请看下面的代码和输出，了解这个函数的工作方式：

示例 1

function removeFirstElement() {
  var shoeBrand = ["Nike", "Adidas", "Sparks", "RedTape"];
  
  console.log("删除前数组中的元素:", shoeBrand);
  
  // 从数组中删除第一个元素
  var poppedElement = shoeBrand.shift();
  
  console.log("从数组中删除的元素:", poppedElement);
  console.log("删除后数组中的元素:", shoeBrand);
}

removeFirstElement();

输出：

初始时，数组中有四个元素。使用shift()函数将删除第一个元素，数组中将保留三个元素。

删除前数组中的元素: [ 'Nike', 'Adidas', 'Sparks', 'RedTape' ]
从数组中删除的元素: Nike
删除后数组中的元素: [ 'Adidas', 'Sparks', 'RedTape' ]

示例 2

与pop()方法类似，我们可以通过将上述代码放入循环（for、while或do-while）中，从数组开头逐个删除所有元素。在此示例中，我们将把这段代码放入while循环中。看看它的工作原理：

function removeElement() {
  var shoeBrand = ["Nike", "Adidas", "Sparks", "RedTape"];
  
  console.log("删除前数组中的元素:", shoeBrand);
  console.log("删除前数组的长度:", shoeBrand.length);
  
  while (shoeBrand.length) {
    // 将被删除的元素存储在变量中
    var poppedElement = shoeBrand.shift();
    
    // 显示被删除的元素
    console.log("从数组中删除的元素:", poppedElement);
  }
  
  // 删除所有元素后的数组长度
  console.log("删除后数组的长度:", shoeBrand.length);
}

removeElement();

输出：

删除前数组中的元素: [ 'Nike', 'Adidas', 'Sparks', 'RedTape' ]
删除前数组的长度: 4
从数组中删除的元素: Nike
从数组中删除的元素: Adidas
从数组中删除的元素: Sparks
从数组中删除的元素: RedTape
删除后数组的长度: 0

从数组的特定索引位置删除元素 - splice()

要从特定索引位置删除元素，可以使用splice()方法。它会从特定位置删除元素并返回已删除的元素。它还允许用户从数组中删除一个或多个元素。

splice()方法主要接受两个参数：初始索引位置和要删除的项数。数组索引从0开始计数，即a[0]。当从数组中删除元素时，数组的长度会减少。请查看下面的示例和输出，了解splice()函数的工作方式：

示例 1

在此示例中，我们将删除从索引1开始的三个元素，即a[1]到a[3]。

function removeElement() {
  var shoeBrand = ["Nike", "Adidas", "Sparks", "RedTape", "Bata"];
  
  console.log("删除前数组中的元素:", shoeBrand);
  
  // 从数组中删除索引1开始的三个元素
  var removedElements = shoeBrand.splice(1, 3);
  
  console.log("从数组中删除的元素:", removedElements);
  console.log("删除后数组中的元素:", shoeBrand);
}

removeElement();

输出：

在下面的响应中，您可以看到已删除数组中的三个元素，只剩下两个元素（Nike和Bata）。

删除前数组中的元素: [ 'Nike', 'Adidas', 'Sparks', 'RedTape', 'Bata' ]
从数组中删除的元素: [ 'Adidas', 'Sparks', 'RedTape' ]
删除后数组中的元素: [ 'Nike', 'Bata' ]

示例 2

在此示例中，我们将上述代码放入for循环中，以从数组中逐个删除特定元素的所有出现。它将逐个匹配数组中的元素，并逐个删除匹配的元素。

function removeElement() {
  var clothingBrand = ["Gucci", "Chanel", "Gucci", "Zara"];
  
  console.log("删除前数组中的元素:", clothingBrand);
  
  for (var i = 0; i < clothingBrand.length; i++) {
    // 匹配数组中的特定元素
    if (clothingBrand[i] === "Gucci") {
      // 从数组中删除匹配的元素
      var deletedElement = clothingBrand.splice(i, 1);
      
      console.log("从数组中删除的元素:", deletedElement);
      console.log("剩余的数组元素:", clothingBrand);
    }
  }
}

removeElement();

输出：

您可以看到，在执行删除操作后，返回的值如果为true，则表示成功删除位于索引1处的元素。

删除前数组中的元素: [ 'Gucci', 'Chanel', 'Gucci', 'Zara' ]
从数组中删除的元素: [ 'Gucci' ]
剩余的数组元素: [ 'Chanel', 'Gucci', 'Zara' ]
从数组中删除的元素: [ 'Gucci' ]
剩余的数组元素: [ 'Chanel', 'Zara' ]