JS数组过滤方法全解析

知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战，手把手教大家学习《JS数组过滤方法详解》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！

在JavaScript中筛选数组元素最直接常用的方法是使用filter()，它通过回调函数对每个元素进行条件判断，返回一个由符合条件元素组成的新数组而不改变原数组；1. filter()接收一个回调函数作为参数，该函数可接受元素、索引和原数组三个参数，通常只需使用元素参数；2. 回调函数返回true时元素被保留，返回false则被排除；3. 可通过thisArg参数或箭头函数处理this指向问题；4. 在对象数组中可根据属性或嵌套逻辑灵活筛选；5. filter()时间复杂度为O(N)，适用于大多数场景，但在处理超大数组或复杂回调时需考虑性能影响，优先保证代码可读性，仅在出现性能瓶颈时优化。

在JavaScript里，要筛选数组元素，最直接也最常用的方式就是用数组自带的 filter() 方法。它不会改变原数组，而是根据你提供的条件，返回一个包含所有符合条件的新数组。这就像是你在一个大篮子里挑水果，只把符合你要求（比如“红色的苹果”）的拿出来，放到另一个新篮子里，而原来的篮子里的水果一个没少。

我个人在日常开发中，几乎所有需要筛选数组的场景，第一个想到的就是 filter。它的简洁和声明式写法，让代码读起来非常舒服，一眼就能看出这段代码在做什么。

要使用 filter()，你只需要给它传递一个回调函数。这个回调函数会对数组中的每个元素执行一次，如果回调函数返回 true，那么当前元素就会被包含在新数组中；如果返回 false，则会被排除。

比如，我们有一个数字数组，想找出其中所有大于5的数字：

const numbers = [1, 2, 6, 8, 3, 10];
const filteredNumbers = numbers.filter(number => number > 5);
// filteredNumbers 会是 [6, 8, 10]

或者，如果你想筛选出数组中所有的偶数：

const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(num => num % 2 === 0);
// evenNumbers 会是 [2, 4, 6]

filter() 的强大之处在于它的灵活性。回调函数可以是你定义的任何逻辑，只要它最终能返回一个布尔值就行。

深入理解 filter() 的回调函数与上下文

在使用 filter() 时，回调函数是其核心。这个回调函数其实可以接收三个参数：element（当前正在处理的元素）、index（当前元素的索引）和 array（调用 filter 的原数组本身）。虽然大多数时候我们只用到 element，但了解另外两个参数在某些特定场景下会非常有用。

例如，如果你想筛选出数组中索引为偶数的元素：

const letters = ['a', 'b', 'c', 'd', 'e'];
const evenIndexedLetters = letters.filter((letter, index) => index % 2 === 0);
// evenIndexedLetters 会是 ['a', 'c', 'e']

我见过不少初学者在用 filter 时，对回调函数里的 this 指向感到困惑，特别是当回调函数需要访问外部上下文时。这其实是理解JavaScript函数作用域的一个缩影。默认情况下，回调函数内部的 this 指向 undefined（严格模式下）或全局对象（非严格模式下）。但 filter() 方法允许你传入第二个参数，作为回调函数的 this 上下文。

class Validator {
  constructor(minLength) {
    this.minLength = minLength;
  }

  isValid(str) {
    return str.length >= this.minLength;
  }
}

const names = ['Alice', 'Bob', 'Charlie', 'David'];
const nameValidator = new Validator(6);

// 使用箭头函数，this 自动绑定到外部上下文
const longNamesArrow = names.filter(name => name.length >= nameValidator.minLength);
// longNamesArrow 会是 ['Charlie', 'David']

// 或者，使用普通函数并传递 thisArg
const longNamesWithThisArg = names.filter(function(name) {
  return name.length >= this.minLength;
}, nameValidator);
// longNamesWithThisArg 也会是 ['Charlie', 'David']

通常我更倾向于使用箭头函数来避免 this 的显式绑定问题，因为它更简洁，也符合现代JavaScript的习惯。但了解 thisArg 的存在，能让你在阅读老旧代码或者处理特定库的API时，不至于一头雾水。

filter() 在处理对象数组时的灵活应用

在实际项目中，我们经常处理的不是简单的数字或字符串数组，而是包含各种复杂数据的对象数组。filter() 在这种场景下简直是神器。你可以根据对象的任何属性，甚至是嵌套属性来筛选数据。

假设你有一个用户列表，每个用户都是一个对象，包含 id、name 和 isActive 属性：

const users = [
  { id: 1, name: 'Alice', isActive: true, role: 'admin' },
  { id: 2, name: 'Bob', isActive: false, role: 'user' },
  { id: 3, name: 'Charlie', isActive: true, role: 'user' },
  { id: 4, name: 'David', isActive: true, role: 'admin' },
];

// 筛选出所有活跃用户
const activeUsers = users.filter(user => user.isActive);
/*
activeUsers 会是：
[
  { id: 1, name: 'Alice', isActive: true, role: 'admin' },
  { id: 3, name: 'Charlie', isActive: true, role: 'user' },
  { id: 4, name: 'David', isActive: true, role: 'admin' },
]
*/

// 筛选出所有活跃的管理员用户
const activeAdmins = users.filter(user => user.isActive && user.role === 'admin');
/*
activeAdmins 会是：
[
  { id: 1, name: 'Alice', isActive: true, role: 'admin' },
  { id: 4, name: 'David', isActive: true, role: 'admin' },
]
*/

// 筛选出名字包含 'li' 的用户（不区分大小写）
const usersWithLiInName = users.filter(user => user.name.toLowerCase().includes('li'));
/*
usersWithLiInName 会是：
[
  { id: 1, name: 'Alice', isActive: true, role: 'admin' },
  { id: 3, name: 'Charlie', isActive: true, role: 'user' },
]
*/

在处理后端返回的复杂数据时，filter 简直是神器。我经常用它来筛选出符合特定状态、权限或者用户ID的列表项，这让前端的数据处理变得非常直观和高效。通过链式调用，你甚至可以在 filter 之后紧接着 map 或 reduce，完成更复杂的数据转换任务。

性能考量：何时需要关注 filter() 的效率？

filter() 方法在大多数情况下都表现得非常好，它的内部实现通常是高度优化的。然而，任何操作都有其成本，了解 filter() 的性能特性，能帮助你在遇到性能瓶颈时做出正确的判断。

filter() 的时间复杂度是 O(N)，其中 N 是数组的长度。这意味着，它需要遍历数组中的每一个元素，对每个元素执行一次回调函数。因此，数组越大，执行时间就越长。此外，filter() 总是会创建一个新数组来存储过滤后的结果，这意味着它会占用额外的内存空间。

那么，什么时候需要关注 filter() 的效率呢？

1. 处理超大型数组：如果你的数组包含数十万甚至数百万个元素，并且你需要频繁地对其进行过滤操作，那么 filter() 的性能开销可能会变得明显。在这种情况下，你可能需要考虑更底层的优化，比如使用 for 循环来避免创建中间数组，或者在数据量特别大时，将过滤逻辑放到后端处理。
2. 回调函数内部有复杂计算：如果你的回调函数内部执行了大量耗时操作（比如复杂的正则表达式匹配、大量的字符串操作、或者同步的网络请求），那么即使数组本身不是特别大，累积起来的计算时间也可能导致性能问题。

我的经验是，通常不会在第一次写代码时就去考虑 filter 的性能瓶颈，除非我看到明显的卡顿或者分析工具指出这里是热点。大多数情况下，filter 的可读性和简洁性带来的好处远大于那一点点潜在的性能损耗。过早的优化往往会引入不必要的复杂性，并且可能导致代码难以维护。只有当你明确发现性能问题时，才值得投入精力去优化这部分代码。在此之前，专注于代码的清晰度和可维护性才是更重要的。

终于介绍完啦！小伙伴们，这篇关于《JS数组过滤方法全解析》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！