极客笔记JavaScript 从数组中移除元素
数组是一个用于存储一个或多个相同数据类型元素的变量。基本上，它存储相同类型的多个元素。有时我们需要从数组中移除这些元素。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>
Output
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操作符是如何工作的：
示例2
<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
除此之外，我们可以通过将数组的长度设置为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>
输出
通过将数组长度设置为0，数组的所有元素都被禁用或删除。查看空数组：
Initially elements in array: Gucci, Calvin Klein, Chanel, Zara
Array after removing elements: