原理与工作机制
1. filter的工作原理
在 JavaScript 中，数组的 filter 方法用于从原数组中筛选出符合条件的元素，进而返回一个新数组，这一过程不会直接改变原始数组的内容。这也是它与一些会就地修改原数组的方法的本质区别之一。技术要点在于：回调函数的返回值决定是否保留当前元素，只有当回调返回布尔值为 true 时，该元素才会出现在新数组中。
通过遍历机制，每个元素都会被传递给回调函数进行判断，因此时间复杂度通常为 O(n)，其中 n 是原数组的长度。理解这一点有助于在大数据量场景中做出合理的性能权衡。
2. 返回的新数组与原数组的关系
使用 filter 得到的是一个新数组，它的元素来自原数组中经过回调筛选通过的项。重要的是要记住：原始数组不会被修改，新数组和原数组在内存上是独立的引用关系，即使原数组发生变化，新数组也不会自动同步。
如果没有任何元素通过回调的筛选，返回值将是一个空数组 []，这与 map 的行为类似但语义不同：filter 关注“保留什么”，map 关注“转换成什么”。
用法与语法要点
1. 基本用法
最简单的用法是对一个数值数组进行条件筛选，通常写成：数组.filter((value) => 条件)，其中返回值是一个新数组，包含所有满足条件的元素。
在实际编码中，回调函数至少接收一个参数 value，表示当前正在处理的元素。你可以用它来实现对数组的快速筛选逻辑。下面给出一个基本示例，演示如何筛选出大于 3 的数值。
const numbers = [1, 2, 3, 4, 5];
const big = numbers.filter(n => n > 3);
console.log(big); // [4, 5]
console.log(numbers); // [1, 2, 3, 4, 5]，原数组未被修改2. 回调函数的签名与参数
回调函数除了 value，还会接收两个可选参数：index（当前元素的索引）和 array（被调用的原数组本身）。这使得你可以在筛选时参考元素的位置或整体数组的某些属性。
正确的签名通常是：array.filter((value, index, array) => boolean)，返回 true 时保留元素，返回 false 时排除元素。深入理解这三个参数可以实现更复杂的筛选逻辑。
const arr = ['a', 'b', 'c', 'd'];
const result = arr.filter((value, index, array) => index > 0); // 保留除了第一个以外的元素
console.log(result); // ['b', 'c', 'd']3. 过滤对象数组的实战技巧
在实际业务中，我们经常需要对对象数组进行筛选，如筛选活动状态或年龄段等。通过对回调中的对象属性进行条件判断，可以实现高效、可读的过滤逻辑。请注意：不要直接在回调中修改元素本身，确保过滤逻辑是纯粹的判断，以便保持函数的可预测性。
下面是一个示例，筛选出 active 为 true 的用户对象：
const users = [
{ id: 1, name: 'Alice', active: true },
{ id: 2, name: 'Bob', active: false },
{ id: 3, name: 'Carol', active: true }
];
const activeUsers = users.filter(u => u.active);
console.log(activeUsers);
/* [
{ id: 1, name: 'Alice', active: true },
{ id: 3, name: 'Carol', active: true }
] */常见误区与性能考量
1. 常见误区：把 filter 误作 map 或 reduce 的替代品
一个常见误区是用 filter 来“变形”数据，即期望 filter 会对每个元素进行转换并返回新值。这是不正确的：filter 只负责筛选，返回的是布尔判断结果是否保留元素，而不是对元素进行映射或聚合。若需要转换，应该链式调用 map。
正确的组合示例是先 filter 再 map，用以获得筛选后数据的某些属性。这样既保持语义清晰，也有利于代码可维护性。
2. 性能与内存考量
时间复杂度为 O(n)，因为必须检查原数组中的每个元素。对于极大数据量的场景，链式调用的深度可能带来性能影响，因此应在可控范围内进行过滤。
另外，尽量避免在 filter 的回调中执行耗时的操作，例如昂贵的 I/O、复杂的正则匹配等。将代价较高的逻辑提取到前置函数中，或借助缓存策略，可以提升整体性能。
实战案例：从数据中提取需要的子集
1. 案例：从用户列表中筛选活跃用户且年龄符合条件
在实际应用中，我们往往需要同时组合条件来筛选数据。例如，筛选出 active 为 true 且 age 大于等于 18 的用户，可以直观且高效地实现。
下面给出一个简洁的实现，演示如何用 filter 完成多条件筛选：
const users = [
{ id: 1, name: 'Alice', active: true, age: 22 },
{ id: 2, name: 'Bob', active: false, age: 30 },
{ id: 3, name: 'Carol', active: true, age: 17 }
];
const eligibleUsers = users.filter(u => u.active && u.age >= 18);
console.log(eligibleUsers);
/* [{ id: 1, name: 'Alice', active: true, age: 22 }] */2. 案例：从日志记录中筛选错误信息
日志数据通常以对象数组的形式存储，我们可以使用 filter 按 level 字段筛选出错误信息，以便后续分析或告警。
示例展示：仅保留 level 为 'error' 的日志项：
const logs = [
{ level: 'info', msg: '启动完成' },
{ level: 'error', msg: '网络错误' },
{ level: 'warn', msg: '资源不足' }
];
const errors = logs.filter(l => l.level === 'error');
console.log(errors); // [{ level: 'error', msg: '网络错误' }]与其他数组方法的组合使用
1. filter 与 map 的链式组合
将筛选与映射组合使用，是非常常见的模式。通过先筛选，再对保留的项进行转换，可以在不产生中间数据结构的情况下完成任务，具有良好的可读性和性能。
最典型的链式写法是：filter(...) .map(...)，例如筛选活跃用户并提取名字：
const activeNames = users
.filter(u => u.active)
.map(u => u.name);
console.log(activeNames); // ['Alice', 'Carol']2. 过滤并聚合统计
除了筛选，很多场景还需要对筛选结果进行聚合统计，例如对年龄段进行求和或计数。结合 filter 与 reduce，可以实现复杂的聚合逻辑。
下面示例展示：过滤出活跃用户后，计算他们的总年龄：
const totalActiveAge = users
.filter(u => u.active)
.reduce((sum, u) => sum + u.age, 0);
console.log(totalActiveAge); // 22（示例值）