如何根据值从 JavaScript 数组中删除项？

在本教程中，我们将学习如何根据值从 JavaScript 数组中删除项。

数组是一种数据结构，可以存储具有相同数据类型的数据集合。连续的内存位置分配给数组元素。每个数组元素都由其索引值标识。

您必须通过插入、删除或更改等操作来处理数组。JavaScript 有很多方法来更新数组。让我们看看根据值从 JavaScript 数组中删除项的各种方法。

以下是根据值从数组中删除项的方法/函数：

  • Array filter() 方法
  • Array splice() 方法

使用 Array filter() 方法

filter() 是一个方法，它创建一个满足给定条件的新数组元素。filter() 方法不会更改原始数组。

用户可以按照以下语法使用 filter() 方法根据值从 JavaScript 数组中删除项。

语法

let arr = [1,2,3,......,n];
array.filter( function(curr_element, index, arr)) => {
   /* condition*/
});

在上述语法中，我们使用了 filter 方法并传递了回调函数，该函数包含过滤数组的条件。

参数

  • function − 对每个数组元素执行的函数

  • curr_element − 当前元素的值

  • index − 当前元素的索引（可选）

  • arr − 当前元素的数组（可选）

示例

在下面给出的示例中，我们使用 filter() 方法根据值从 JavaScript 数组中删除项。我们使用了两个数组示例，并根据值从 JavaScript 数组中删除了项。

<html>
<body>
   <h3>Use <i>filter()</i> method to remove an item from a JavaScript array by value.</h3>
   <p><b>Example 1: </b>Remove value 4</p>
   <div id="output1"></div>
   <p><b>Example 2:</b> remove value "E"</p>
   <div id="output2"></div>
   <script>
      let output1 = document.getElementById("output1");
      let output2 = document.getElementById("output2");
      let output = "";
      let arr1 = [1, 2, 3, 4, 5];
      output = "Array before filter() = " + arr1 + "<br>";
      let arr1_new = arr1.filter(function(f) {
         return f !== 4
      });
      output = output + " New array after filter() = " + arr1_new;
      output1.innerHTML = output;
      let arr2 = ["A", "B", "C", "D", "E"];
      output = "Array before filter() = " + arr2 + " <br>";
      let arr2_new = arr2.filter(function(f) {
         return f !== "E"
      });
      output = output + " New array after filter() = " + arr2_new;
      output2.innerHTML = output;
   </script>
</body>
</html>

在以上两个数组中，用户可以看到 filter() 方法返回与条件匹配的新数组元素。

使用 Array splice() 方法

splice() 方法用于向数组添加或删除元素。

splice() 方法可以更改原始数组。

观众可以按照以下语法使用 splice() 方法根据值从 JavaScript 数组中删除项。

语法

let arr = [1,2,3,......,n];
arr.splice( index, count, elements)

在上述语法中，我们使用了 spilce() 方法，用户可以在下面了解其参数。

参数

  • index − 要添加/删除的元素的索引

  • count − 要添加的元素数量（可选）

  • elements − 要添加的元素的名称（可选）

示例

在下面给出的示例中，我们使用 splice() 方法根据值从 JavaScript 数组中删除项。我们正在使用两个数组示例，并根据值从 JavaScript 数组中删除了项。

<html>
<head>
</head>
<body>
   <h3>Use <i>splice()</i> to remove an item from a JavaScript array by value.</h3>
   <p><b>Example 1</b></p>
   <div id = "output1"></div>
   <p><b>Example 2</b></p>
   <div id = "output2"></div>
   <script>
      let output1 = document.getElementById("output1");
      let output2 = document.getElementById("output2");
      let output="";
      let arr1=[1,2,3,4,5];
      let element=arr1.indexOf(2);
      output="Array before splice() = "+arr1+"<br>";
      if (element > -1) {
         arr1.splice(element, 1);
      }
      output=output+"New array after splice() = "+arr1;
      output1.innerHTML = output;
      let arr2=["A","B","C","D","E"];
      let element1=arr2.indexOf("B");
      output="Array before splice() = "+arr2+"<br>";
      if (element1 > -1) {
         arr2.splice(element1, 1);
      }
      output=output+"New array after splice(): "+arr2;
      output2.innerHTML = output;
   </script>
</body>
</html>

我们学习了两种根据值从 JavaScript 数组中删除项的方法。在这些方法中，filter() 方法根据条件创建新数组元素。

splice() 用于在特定索引上添加或删除元素，从而更改原始数组。

更新于: 2022-09-06

440 次查看

开启你的 职业生涯

通过完成课程获得认证

立即开始
广告