JavaScript 数组删除
JavaScript 数组删除
从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
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
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
Nike, Adidas, Sparks, RedTape
Removed element from array: Nike
Elements present in array:
Adidas, Sparks, RedTape
示例2
就像pop()方法一样，我们可以通过将上述代码放入循环中，从数组的开头一开始删除所有元素。 (适用于，一会儿或一会儿)。在此示例中，我们将这段代码放入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
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
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))仍保留在数组中。
Gucci )的元素，元素(香奈儿(Chanel)，扎拉(Zara))仍保留在数组中。
Removed element: Gucci
Remaining Element: Chanel, Gucci, Zara
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:
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
使用删除运算符删除元素
除所有这些功能外，JavaScript还提供了
delete 运算符。它有助于从数组中的特定索引位置删除元素。该运算符与要删除的阵列名称和索引号一起使用，例如，
删除阵列名称[3] 。成功删除元素后，它将返回true。
delete 运算符。它有助于从数组中的特定索引位置删除元素。该运算符与要删除的阵列名称和索引号一起使用，例如，
删除阵列名称[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已成功删除。
true ，则该元素显示在索引1已成功删除。
Elements in array: Gucci, Calvin Klein, Chanel, Zara
Removed successfully: true
Remaining elements in array: Gucci,, Chanel, Zara
Removed successfully: true
Remaining elements in array: Gucci,, Chanel, Zara
使用清除和重置运算符删除元素
JavaScript提供了
clear 和
reset 运算符以删除数组中的元素。通常，它们不删除数组元素。他们只是将它们移到另一个数组并清除原始数组。
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: