在 JavaScript 中从数组中移除元素

2025年03月17日 | 阅读 9 分钟

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

这些 JavaScript 数组方法如下：

方法	描述
pop()	此方法从数组的末尾删除元素。
shift()	与 pop() 方法一样，它也从数组的开头删除元素。
filter()	filter() 方法以编程方式从数组中删除元素。
splice()	此方法从特定索引处删除元素。

以上所有方法都是 JavaScript 提供的数组函数。下面将详细介绍这些方法及其示例。

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

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

示例 1

<html>
<body>
<script>  

   function removeLastElement() {  
    var shoeBrand = ["Nike", " Adidas", " Sparks", " RedTape"];  
  
    document.write("Elements in array before removing: <br>" + shoeBrand + "<br> <br>");
    
    // Removing last element from the array  
    var poppedElement = shoeBrand.pop();  
    document.write("Removed element from array: " + poppedElement + "<br> <br>");  
    
    //display remaining elements present in array after removing
    document.write("Elements present in array: <br>" + shoeBrand);  
}  
removeLastElement();  

</script>  
</body>
</html>

输出

最初，数组中有四个元素。使用 pop() 函数将从最后一个元素开始删除一个元素，数组中将剩下三个元素。

Elements in array before removing: 
Nike, Adidas, Sparks, RedTape

Removed element from array: RedTape

Elements present in array: 
Nike, Adidas, Sparks

示例 2

通过将上述代码放入循环（for、while 或 do-while）中，我们可以逐个从数组末尾删除所有元素。请看它是如何工作的：

<html>
<body>
<script>  
   function removeElement() {  
    var shoeBrand = ["Nike", " Adidas", " Sparks", " RedTape"];  

    //initial length of the array
    document.write("Elements in array before removing: <br>" + shoeBrand + "<br> <br>");
    document.write("Array length before removing elements is:" + shoeBrand.length + "<br> <br>");
     
    while (shoeBrand.length) {
    //store removed element in a variable
    var poppedElement = shoeBrand.pop();  
    
    //display removed element 
    document.write("Removed element from array: " + poppedElement + " <br>"); 
    }
    
    //Length of the array after removing all elements
    document.write("<br> Array length after removing elements is:" + shoeBrand.length);
 
}
removeElement(); 
</script>
</body>
</html>

输出

Elements in array before removing: 
Nike, Adidas, Sparks, RedTape

Array Length after removing elements is: 4

Removed element from array: RedTape
Removed element from array: Sparks
Removed element from array: Adidas
Removed element from array: Nike

Array Length after removing elements is: 0

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

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

示例 1

<html>
<body>
<script>  

   function removeFirstElement() {  
    var shoeBrand = ["Nike", " Adidas", " Sparks", " RedTape"];  
  
    document.write("Elements in array before removing: <br>" + shoeBrand + "<br> <br>");
    
    // Removing first element from the array  
    var poppedElement = shoeBrand.shift();  
    document.write("Removed element from array: " + poppedElement + "<br> <br>");  
    
    //display remaining elements present in array after removing
    document.write("Elements present in array: <br>" + shoeBrand);  
}  
removeFirstElement(); 

</script>  
</body>
</html>

输出

最初，数组中有四个元素。使用 shift() 函数将从开头删除一个元素，数组中将剩下三个元素。

Elements in array before removing: 
Nike, Adidas, Sparks, RedTape

Removed element from array: Nike

Elements present in array: 
Adidas, Sparks, RedTape

示例 2

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

<html>
<body>
<script>  
   function removeElement() {  
    var shoeBrand = ["Nike", " Adidas", " Sparks", " RedTape"];  

    //initial length of the array
    document.write("Elements in array before removing: <br>" + shoeBrand + "<br> <br>");
    document.write("Array length before removing elements is:" + shoeBrand.length + "<br> <br>");
     
    while (shoeBrand.length) {
    //store removed element in a variable
    var poppedElement = shoeBrand.shift();  
    
    //display removed element 
    document.write("Removed element from array: " + poppedElement + " <br>"); 
    }
    
    //Length of the array after removing all elements
    document.write("<br> Array length after removing elements is:" + shoeBrand.length);
 
}
removeElement(); 
</script>
</body>
</html>

输出

Elements in array before removing: 
Nike, Adidas, Sparks, RedTape

Array Length after removing elements is: 4

Removed element from array: Nike
Removed element from array: Adidas
Removed element from array: Sparks
Removed element from array: RedTape

Array Length after removing elements is: 0

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

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

splice() 方法主要接受两个参数：起始索引位置和要删除的项目数。数组索引从 0 开始，即 a[0]。当从数组中删除元素时，数组长度会减小。请参阅下面的示例及其输出，了解 splice() 函数如何工作：

示例 1

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

<html>
<body>
<script>  

   function removeElement() {  
    var shoeBrand = ["Nike", " Adidas", " Sparks", " RedTape", " Bata"];  
  
    document.write("Elements in array before removing: <br>" + shoeBrand + "<br> <br>");
    
    // Removing first element from the array  
    var poppedElement = shoeBrand.splice(1, 3);  
    document.write("Removed element from array: " + poppedElement + "<br> <br>");  
    
    //display remaining elements present in array after removing
    document.write("Elements present in array: <br>" + shoeBrand);  
}  
removeElement(); 

</script>  
</body>
</html>

输出

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

Elements in array before removing: 
Nike, Adidas, Sparks, RedTape, Bata

Removed element from array: Adidas, Sparks, RedTape,

Elements present in array: 
Nike, Bata

示例 2

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

<html>
<body>

<script>     
function removeElement() { 
    var clothingBrand = ["Gucci", " Chanel", "Gucci", " Zara"]; 
  
    // for loop to trace the whole array
    for (var i = 0; i < clothingBrand.length; i++) { 
        
        //Match the specific element in array
        if (clothingBrand[i] === "Gucci") { 
            //remove the matched element from array
            var delEle = clothingBrand.splice(i, 1); 
            
            document.write("<br> Removed element: " + delEle); 
            document.write("<br> Remaining elements: " + clothingBrand); 
            document.write("<br>");        } 
    } 
} 
removeElement();  
</script>

</body>
</html>

输出

您可以看到，在下面的输出中，名为 (Gucci) 的元素已从数组中删除了两次，数组中只剩下两个元素（Chanel、Zara）。

Removed element: Gucci
Remaining Element: Chanel, Gucci, Zara

Removed element: Gucci
Remaining Element: Chanel, Zara

您甚至可以删除数组中的所有元素。请看下面的代码：

<script>     

    var clothingBrand = ["Gucci", " Chanel", " Calvin Klein", " Zara"]; 
    document.write("Elements in array: " + clothingBrand); 
    //remove all elements
    clothingBrand.splice(0, clothingBrand.length); 
    document.write("<br> Remaining elements: " + clothingBrand);  
    
</script>

输出

可以看到所有元素都已被删除。

Elements in array: Gucci, Chanel, Calvin Klein, Zara
Remaining Element:

使用 filter() 从数组中删除元素

此方法基本上根据用户提供的给定条件删除元素。它删除元素并创建一个包含剩余元素的新数组。请参阅下面的代码和输出，了解其工作原理：

示例 1

在此示例中，我们将检查数组中的偶数和奇数。filter() 方法将检查偶数并将它们添加到修改后的数组中。奇数将从数组中删除，并且只显示修改后的数组。

<html>
<body>
<script>  

function isEven( value ) {  
     if(value%2 == 0)
     	return value;
}   
    //initialize the array named ary
    var ary = [43, 243, 56, 24, 1021, 348].filter( isEven );  
    document.write("Even elements in array: " + ary);   

</script>  
</body>
</html>

输出

请参阅下面的输出，其中修改后的数组中只剩下偶数元素。

Even elements in array:  56, 24, 348

使用 delete 运算符删除元素

除了所有这些函数之外，JavaScript 还提供了 delete 运算符。它有助于从数组的特定索引位置删除元素。此运算符与数组名称和要删除的索引号一起使用，例如：delete arrayname[3]。成功删除元素后，它将返回 true。

delete 运算符有助于直接从数组中删除特定索引的元素。现在，通过示例，让我们看看这个 delete 运算符是如何工作的：

示例

<html>
<body>

<script>     
         //declare and initialize an array
         var clothingBrand = ["Gucci", " Calvin Klein", " Chanel", " Zara"]; 
         document.write("Elements in array: " + clothingBrand); 
 
         //delete element of index 1 from clothingBrand array 
         var result = delete clothingBrand[1];
    
         //if returned value is true, element is deleted successfully
         document.write("<br> Removed successfully: " + result + "<br>"); 
         document.write("Remaining elements in array: " + clothingBrand);  
</script>  

</body>
</html>

输出

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

Elements in array:  Gucci, Calvin Klein, Chanel, Zara
Removed successfully: true
Remaining elements in array: Gucci,, Chanel, Zara

使用 clear 和 reset 运算符删除元素

JavaScript 提供了 clear 和 reset 运算符来从数组中删除元素。通常，它们不会删除数组元素，而是将它们移动到另一个数组，然后清空原始数组。

现在，通过示例，让我们看看它是如何工作的：

示例 1

<html>
<body>

<script>     
         //declare and initialize an array
         var originalArray = ["Gucci", " Calvin Klein", " Chanel", " Zara"]; 
         document.write("Initially elements in array: " + originalArray); 
 
         //declare one more array to keep the elements of original array
         var newArray = originalArray
    
         //clear the initially declared array
         originalArray = [ ]

         //display element of original and new array after removing
         document.write("<br> <br> Array after removing elements: " + originalArray); 
         document.write("<br> <br> Elements in new array: " + newArray);  
</script>  

</body>
</html>

输出

在此输出中，您可以看到原始数组元素已移动到一个新数组。最初声明的数组已为空，这意味着数组中现在没有任何元素。

Initially elements in array:  Gucci, Calvin Klein, Chanel, Zara

Array after removing elements: 

Elements in new array: Gucci, Calvin Klein, Chanel, Zara

示例 2

除此之外，我们可以通过将数组的 length 设置为 0 来删除数组中的所有元素。请参阅下面的示例：

<html>
<body>

<script>     
         //declare and initialize an array
         var array1 = ["Gucci", " Calvin Klein", " Chanel", " Zara"]; 
         document.write("Initially elements in array: " + array1); 
 
         //set length of array to 0
         array1.length = 0;
    
         //display element of original and new array after removing
         document.write("<br> <br> Array after removing elements: " + array1);  
</script>  

</body>
</html>

输出

通过将数组的 length 设置为 0，数组中的所有元素都已被禁用或删除。请参阅空数组：

Initially elements in array:  Gucci, Calvin Klein, Chanel, Zara

Array after removing elements:

下一个主题Testing-javascript-code

在 JavaScript 中从数组中移除元素

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

示例 1

示例 2

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

示例 1

示例 2

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

示例 1

示例 2

使用 filter() 从数组中删除元素

示例 1

使用 delete 运算符删除元素

示例

使用 clear 和 reset 运算符删除元素

示例 1

示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

在 JavaScript 中从数组中移除元素

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

示例 1

示例 2

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

示例 1

示例 2

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

示例 1

示例 2

使用 filter() 从数组中删除元素

示例 1

使用 delete 运算符删除元素

示例

使用 clear 和 reset 运算符删除元素

示例 1

示例 2

相关帖子

JavaScript reset