如何在 JavaScript 中從另一個數組中過濾掉所有元素?


本文我們將介紹如何在 JavaScript 中從另一個數組中過濾掉所有元素。在深入講解之前,讓我們快速回顧一下 JavaScript 中的陣列。

陣列用於在一個變數中儲存多個值。與只能儲存一個值的變數相比,陣列的每個元素都有一個關聯的數字,稱為數值索引,可以透過它來訪問元素。JavaScript 中的陣列從索引零開始,並且可以使用多種方法進行修改。

為了從另一個數組中過濾陣列元素,可以使用 `filter()` 方法。讓我們深入文章,瞭解更多關於如何從另一個數組中過濾陣列元素。

JavaScript 中的 filter()

`filter()` 方法建立一個包含透過函式提供的測試的所有元素的新陣列。對於空元素,`filter()` 方法不會執行該函式。`filter()` 方法不會改變原始陣列。

語法

以下是 `filter()` 的語法:

array.filter(function(currentValue, index, arr), thisValue)

讓我們看下面的例子,來了解如何在 JavaScript 中從另一個數組中過濾陣列元素。

示例

在下面的示例中,我們執行指令碼從所有元素中過濾陣列。

<!DOCTYPE html>
<html>
<body>
   <script>
      var array1 = [0,7,8,6],
      array2 = [6,8],
      result = array1.filter(item => !array2.includes(item));
      document.write(result);
   </script>
</body>
</html>

指令碼執行後,會在網頁瀏覽器上輸出一個更新後的陣列,該陣列是由上述指令碼中提供的兩個陣列過濾後生成的,並在網頁瀏覽器上顯示其餘的陣列元素。

示例

考慮下面的例子,我們使用 filter,並且對於 filter 我們使用 reduce。

<!DOCTYPE html>
<html>
<body>
   <script>
      var a1 = [3, 0, 6, 8,9],
      a2 = [8, 0,6];
      var filtered = a1.filter(function(x) {
         return !a2.reduce(function(y, z) {
            return x == y || x == z || y == true;
         })
      });
      document.write(filtered);
   </script>
</body>
</html>

執行上述指令碼後,網頁瀏覽器會顯示在觸發指令碼執行的事件中出現的陣列元素,該事件比較提供的兩個陣列,然後進行過濾;對於過濾,我們使用了 reduce 並顯示了元素。

示例

讓我們來看另一個例子,在這個例子中我們使用 `fill()` 方法。

<!DOCTYPE html>
<html>
<body>
   <p id="tutorial"></p>
   <script>
      var array1= [1,2,3,4,5];
      var array2=[2,4,5,4]
      function fill(value){
         return value !=array2[0] && value != array2[1]
      }
      document.getElementById("tutorial").innerHTML= array1.filter(fill)
   </script>
</body>
</html>

指令碼執行後,會在網頁瀏覽器上輸出一個數組,該陣列是由指令碼中提到的兩個陣列過濾後,透過執行指令碼觸發的事件在網頁瀏覽器上生成的。

示例

執行以下程式碼,觀察會發生什麼。

<!DOCTYPE html>
<html>
<body>
   <script>
      var result = [100,110,150,180,190,175].filter(
         function(obj) {
            return this.indexOf(obj) < 0;
         },
         [100,150,175]
      );
      document.write("After filter, the result is=");
      document.write(result);
   </script>
</body>
</html>

執行上述指令碼後,事件被觸發並在網頁瀏覽器上顯示一個數組以及一些文字。顯示的陣列元素是透過過濾上述指令碼中提到的兩個陣列獲得的。

更新於:2023年1月18日

528 次瀏覽

開啟你的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.