深入理解 JS/TS 中的 filter 方法及其布尔值筛选功能

今天写需求的时候，需要对后端传回来的数据做乱码校验处理，需要筛除乱码数据。

这里我使用正则表达式并封装了一个判断是否为正常字段的方法。（如果是正常字段返回true，乱码字段返回false）

对后端返回的数据，可以直接用filter进行乱码字段的筛除。

在这篇博客里我衍生为讲解“使用filter处理数组从中筛出符合条件的元素”

什么是filter？

filter 方法是数组对象的一个内置方法，用于创建一个新数组，其中包含所有通过指定函数测试的元素。（filter 方法会遍历数组中的每个元素，并将那些使测试函数返回 true 的元素组成一个新的数组。）

❗再三强调，会返回一个新的数组哦！！！但使用了filter不会对原数组产生影响。

filter的语法

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

• callback: 测试函数。
  • element: 当前元素。
  • index (可选): 当前元素的索引。
  • array (可选): 调用 filter 的数组。
• thisArg (可选): 执行 callback 时用作 this 的值。

（我在使用时只传入了当前元素，并在测试函数中对元素进行正则测试/判断）

返回值

一个新的数组，包含所有使 callback 返回 true 的元素。如果没有元素通过测试，则返回一个空数组。

（拿我的需求做比方，如果需要留下的是正常元素，就要使得测试函数正常元素的返回值为true哦，但如果我要筛选出来的是乱码元素，就需要使得测试函数乱码元素的返回值为true）

传入返回布尔值的函数进行筛选

filter 方法的强大和遍历之处在于允许我们传入一个返回布尔值的函数。这个函数用于测试数组中的每个元素，并根据测试结果决定是否保留该元素。

---

举个简单的使用例子

需求：筛选偶数

const numbers = [1, 2, 3, 4, 5, 6];

// 定义一个回调函数来测试是否为偶数
const isEven = (num) => num % 2 === 0;

// 使用 filter 方法筛选偶数
const evenNumbers = numbers.filter(isEven);

console.log(evenNumbers); // 输出: [2, 4, 6]

测试函数：isEven

测试目的：测试一个数字是否为偶数

numbers.filter(isEven)返回值：由numbers数组中偶数组成的数组