js如何实现数组过滤-js教程-PHP中文网

js如何实现数组过滤

幻夢星雲

发布： 2025-08-25 09:56:01

原创

355人浏览过

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

js如何实现数组过滤

在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

登录后复制

上下文。

帝国网站管理系统 v6.5 数据字典

该系统由帝国开发工作组独立开发，是一个经过完善设计的适用于Linux/windows/Unix等环境下高效的网站解决方案。从帝国新闻系统1.0版至今天的帝国网站管理系统，它的功能进行了数次飞跃性的革新，使得网站的架设与管理变得极其轻松。它采用了系统模型功能：用户通过此功能可直接在后台扩展与实现各种系统，如产品、房产、供求、等等系统，因此特性，[1] 帝国CMS又被誉为“万能建站工具”；采用了

407

查看详情

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()

登录后复制

的效率呢？

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

我的经验是，通常不会在第一次写代码时就去考虑