JavaScript - filter() 过滤方法

JavaScript - 过滤方法

在 JavaScript 中，filter() 方法用于创建一个包含符合特定条件的元素的新数组。该方法接受一个回调函数作为参数，该函数会对数组中的每个元素执行。如果回调函数返回 true，则该元素将添加到新数组中，否则将被过滤掉。

此方法不会更改或修改原始数组。此外，它不会对空元素执行回调函数。

语法

以下是 JavaScript Array.filter() 方法的语法 -

array.filter(callback(element, index, array), thisArg)

参数

此方法接受两个参数。如下所述:

• thisArg(可选) 它指定传递给函数的值，用作其 this 值。
• callback 这是一个回调函数，数组中的每个元素都会调用一次。它还需要三个参数:
• element:数组中当前正在处理的元素。
• index:当前正在处理的元素的索引。
• array:当前元素的数组。

返回值

此方法返回一个新数组，其中包含回调函数返回 true 的元素。

示例

在以下示例中，提供的回调函数检查 numbers 数组中的每个元素，并返回一个新数组"result"，其中包含所有大于 30 的元素。

<html>
   <body>
      <script>
         const numbers = [10, 20, 30, 40, 50];
         
         const result = numbers.filter(function (number) {
             return number > 30;
         });
         document.write(result);
      </script>
   </body>
</html>

输出

以下是上述程序的输出。

40,50

类型化数组的过滤方法

类型化数组是类似数组的对象，它提供了一种读写原始二进制数据的机制。我们也可以在类型化数组上使用 filter() 方法。

示例

如果类型化数组中的所有元素都通过了callbackFn测试，则会返回一个仅包含通过测试的元素的新类型化数组。

在下面的示例中，我们使用JavaScript TypedArray filter()方法从给定的类型化数组 [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] 中过滤掉所有奇数元素。我们创建一个名为isOdd()的函数来检查奇数值，并将其作为参数传递给filter()方法。

<html>
<head>
<title>JavaScript TypedArray filter() Method</title>
</head>
<body>
   <script>
      function isOdd(element, index, array){
         return element %2 != 0;
      }
      const T_array = new Int8Array([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
      document.write("The typedArray elements are: ", T_array);
      
      //创建新的空类型数组
      let odd_t_array = ([]);
      
      //使用 filer() 方法
      odd_t_array = T_array.filter(isOdd);
      document.write("<br>New typed array(containing only odd elements): ", odd_t_array);
   </script>    
</body>
</html>

输出

以下是上述程序的输出。

The typedArray elements are: 1,2,3,4,5,6,7,8,9,10
New typed array(containing only odd elements): 1,3,5,7,9

Map 上的过滤方法

我们也可以在 Map 上使用 filter() 方法。它与普通数组类似，这意味着我们可以像处理数组一样过滤元素。

示例

如果 Map 中的所有元素都通过了 callbackFn 测试，则会返回一个仅包含通过测试的元素的新 Map。

在下面的示例中，我们使用 JavaScript Map 的 filter() 方法从给定 Map 中过滤掉所有大于 30 的元素。我们创建一个名为 isGreater() 的函数来检查大于 30 的值，并将其作为参数传递给 filter() 方法。

<html>
<head>
<title>JavaScript Map filter() Method</title>
</head>
<body>
<script>
   function isGreater(value, key, map){
      return value > 30;
   }
   const map = new Map([[1, 10], [2, 20], [3, 30], [4, 40], [5, 50]]);
   document.write("The map elements are: ");
   for (let [key, value] of map) {
      document.write(key + " => " + value + ",");
   }
   
   //create new empty map
   let new_map = new Map();
   
   //使用 filer() 方法
   new_map = new Map([...map].filter(([key, value]) => isGreater(value, key, map)));
   document.write("<br>New map(containing only elements greater than 30): ");
   for (let [key, value] of new_map) {
      document.write(key + " => " + value + ",");
   }
</script>
</body>
</html>

输出

以下是上述程序的输出。

The map elements are: 1 => 10,2 => 20,3 => 30,4 => 40,5 => 50
New map(containing only elements greater than 30): 4 => 40,5 => 50