如何根據值從 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 次檢視

開啟你的 職業生涯

透過完成課程獲得認證

立即開始
廣告