如何在 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 次浏览

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告