如何在 JavaScript 中使用比較器函式過濾陣列中的值？

在 JavaScript 中，可以使用 **filter()** 方法過濾陣列。此方法用於建立一個新陣列，其中包含回撥函式中提供的條件所允許的所有元素。但是，如果我們想要過濾掉比較器函式不返回 true 的值怎麼辦？

語法

arr.filter(compare)

這裡 **compare** 是一個比較器函式，用於比較陣列 arr 中的元素。我們可以將其定義為返回 true 或 false。

根據 compare 函式的返回值，函式 **“filter”** 過濾陣列。

演算法

  • **步驟 1** - 定義一個名為 arr 的陣列併為其賦值。

  • **步驟 2** - 定義一個名為 compare 的比較器函式，使其返回 true 或 false。

  • **步驟 3** - 應用 arr.filter(compare) 方法根據 compare 函式的返回值過濾陣列 arr 的元素。

  • **步驟 4** - 使用 innerHTML 屬性顯示包含已過濾元素的陣列。

示例

使用 Array.prototype.filter()

Array.prototype.filter() 方法可用於過濾掉比較器函式不返回 true 的值。這可以透過使用布林物件來實現，如下所示：

<!doctype html>
<html>
<head>
   <title>Examples</title>
</head>
<body>
   <p>filtering using the Array filter() method</p>
   <div id="result"></div>
   <script>
      var arr = [1,2,3,4,5,6,7,8,9,10];
      var filteredArray = arr.filter(function(value){
         return Boolean(value % 2);
      });
      document.getElementById("result").innerHTML = filteredArray
   </script>
</body>
</html>

從上面的程式碼可以看出，我們首先建立了一個包含一些數值的陣列。然後，我們使用 filter() 方法過濾掉不能被 2 整除的值。filter() 方法的回撥函式返回 Boolean(value % 2)。這意味著對於陣列中的每個值，如果它能被 2 整除，則返回 true，否則返回 false。因此，只有返回 true 的值才會新增到新的 filteredArray 中。

示例

使用 for 迴圈

另一種過濾掉比較器函式不返回 true 的值的方法是使用 for 迴圈。這可以透過以下方式完成：

<!doctype html>
<html>
<head>
   <title>Examples</title>
</head>
<body>
   <p>filtering using the for loop</p>
   <div id="result"></div>
   <script>
      var array = [1,2,3,4,5,6,7,8,9,10];
      var filteredArray = [];
      for(var i=0; i < array.length; i++){
         if(array[i] % 2){
            filteredArray.push(array[i]);
         }
      }
      document.getElementById("result").innerHTML = filteredArray
   </script>
</body>
</html>

在上面的程式碼中，我們首先建立了一個名為 filteredArray 的空陣列。然後，我們使用 for 迴圈遍歷陣列中的值。對於陣列中的每個值，我們檢查它是否能被 2 整除。如果它能被 2 整除，則將其新增到 filteredArray 中。

示例

使用 every() 方法

另一種過濾掉比較器函式不返回 true 的值的方法是使用 every() 方法。此方法用於檢查陣列中的所有元素是否都透過回撥函式中提供的條件。如果所有元素都透過條件，則返回 true，否則返回 false。這可以透過以下方式完成：

<!doctype html>
<html>
<head>
   <title>Examples</title>
</head>
<body>
   <p>filtering using the every method</p>
   <div id="result"></div>
   <script>
      var array = [1,3,5,7,9];
      var filteredArray = [];
      if(array.every(function(value){
         return value % 2;
      })){
         filteredArray = array;
      }
      document.getElementById("result").innerHTML = filteredArray
   </script>
</body>
</html>

在上面的程式碼中，我們首先使用 every() 方法檢查陣列中的所有值是否都能被 2 整除。如果所有值都不能被 2 整除，則將 filteredArray 設定為陣列本身。否則，它保持為空。

使用 filter() 方法的主要好處之一是它不會改變原始陣列。它建立一個新陣列，其中僅包含透過回撥函式中提供的條件的元素。

在本教程中，我們瞭解瞭如何在 JavaScript 中過濾掉比較器函式不返回 true 的值。我們瞭解瞭如何使用 filter() 方法以及 every() 方法來實現這一點。我們還了解了如何使用 for 迴圈來實現這一點。

更新於： 2022 年 8 月 4 日

663 次瀏覽

開啟您的 職業生涯

透過完成課程獲得認證

開始學習
廣告