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

JS如何过滤数组

小老鼠

发布： 2025-08-21 10:09:01

原创

471人浏览过

js过滤数组的核心方法是使用filter()，它通过回调函数判断每个元素是否符合条件并返回新数组；filter()不改变原数组，仅保留回调返回true的元素，例如可用来筛选偶数、排除null/undefined等假值或根据对象属性如isactive筛选对象；处理空值时可通过直接返回value过滤假值，或用严格条件排除特定值如null、undefined、空字符串；过滤对象数组时，可在回调中结合多个条件，如user.isactive && user.name.tolowercase().includes('a')；除filter()外，也可用map()与reduce()组合或for循环实现类似功能，但filter()最简洁常用，其他方法适用于需复杂操作或性能优化的场景。

JS如何过滤数组

JS过滤数组，简单来说，就是从一个数组里挑出你想要的元素，组成一个新的数组。这事儿挺常见的，比如你有个用户列表，想找出所有年龄大于18岁的用户。

解决方案

JavaScript提供了

filter()

登录后复制

方法，专门用来做数组过滤。它的基本用法是这样的：

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

const evenNumbers = numbers.filter(number => number % 2 === 0);

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

登录后复制

这段代码里，

numbers.filter()

登录后复制

接受一个回调函数作为参数。这个回调函数会对

numbers

登录后复制

数组里的每一个元素执行一次。如果回调函数返回

true

登录后复制

，那么这个元素就会被包含到新的数组

evenNumbers

登录后复制

里；如果返回

false

登录后复制

，这个元素就会被忽略。

回调函数里的

number

登录后复制

就是当前正在处理的元素。

number % 2 === 0

登录后复制

这个表达式判断

number

登录后复制

是不是偶数。如果是偶数，表达式返回

true

登录后复制

，否则返回

false

登录后复制

。

filter()

登录后复制

方法并不会修改原始数组

numbers

登录后复制

，它会返回一个新的数组

evenNumbers

登录后复制

，里面只包含符合条件的元素。

数组过滤时如何处理空值或undefined？

在实际应用中，数组里可能包含

null

登录后复制

、

undefined

登录后复制

或者空字符串等“假值”。如果你想在过滤的时候把它们也排除掉，可以这样做：

const values = [1, null, 0, 'hello', undefined, ''];

const truthyValues = values.filter(value => value);

console.log(truthyValues); // 输出: [1, "hello"]

登录后复制

这里，回调函数直接返回

value

登录后复制

本身。在JavaScript里，

null

登录后复制

、

undefined

登录后复制

、

登录后复制

、

''

登录后复制

(空字符串) 这些值在布尔上下文中会被认为是

false

登录后复制

，其他值会被认为是

true

登录后复制

。所以，

filter()

登录后复制

会把所有“真值”保留下来。

当然，如果你想更精确地控制哪些值被过滤掉，可以写更复杂的回调函数：

const values = [1, null, 0, 'hello', undefined, ''];

const validValues = values.filter(value => value !== null && value !== undefined && value !== '');

console.log(validValues); // 输出: [1, 0, "hello"]

登录后复制

这个例子里，我们明确地排除了

null

登录后复制

、

undefined

登录后复制

和空字符串。注意，

登录后复制

在这里被保留了下来，因为它不是

null

登录后复制

、

undefined

登录后复制

或空字符串。

如何使用filter()方法过滤对象数组？

如知AI笔记

如知笔记——支持markdown的在线笔记，支持ai智能写作、AI搜索，支持DeepseekR1满血大模型

查看详情

filter()

登录后复制

方法不仅可以用来过滤数字数组，还可以用来过滤对象数组。比如，你有一个用户对象数组，想找出所有活跃用户：

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

const activeUsers = users.filter(user => user.isActive);

console.log(activeUsers);
// 输出:
// [
//   { id: 1, name: 'Alice', isActive: true },
//   { id: 3, name: 'Charlie', isActive: true }
// ]

登录后复制

在这个例子里，回调函数接收一个

user

登录后复制

对象作为参数，然后返回

user.isActive

登录后复制

。只有

isActive

登录后复制

属性为

true

登录后复制

的

user

登录后复制

对象才会被保留到

activeUsers

登录后复制

数组里。

如果过滤条件更复杂，比如你想找出所有名字包含字母"a"的活跃用户，可以这样做：

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

const filteredUsers = users.filter(user => user.isActive && user.name.toLowerCase().includes('a'));

console.log(filteredUsers);
// 输出:
// [
//   { id: 1, name: 'Alice', isActive: true }
// ]

登录后复制

这个例子里，回调函数使用了

&&

登录后复制

运算符来组合两个条件：

user.isActive

登录后复制

必须为

true

登录后复制

，并且

user.name

登录后复制

必须包含字母"a"（忽略大小写）。

除了filter()方法，还有其他数组过滤方法吗？

虽然

filter()

登录后复制

方法是最常用的数组过滤方法，但JavaScript还提供了其他一些方法，可以用来实现类似的功能。

```
map()
```
登录后复制
和
reduce()
登录后复制
: 虽然
```
map()
```
登录后复制
主要用于转换数组元素，
```
reduce()
```
登录后复制
主要用于将数组归约为单个值，但它们也可以结合使用来实现过滤。这种方法通常比
```
filter()
```
登录后复制
更复杂，但在某些特定场景下可能更灵活。
```
for
```
登录后复制
循环: 最基本的方法是使用
```
for
```
登录后复制
循环遍历数组，然后手动将符合条件的元素添加到新的数组里。这种方法虽然比较繁琐，但可以完全控制过滤过程。

例如，使用

for

登录后复制

循环实现上面的“找出所有活跃用户”的例子：

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

const activeUsers = [];
for (let i = 0; i < users.length; i++) {
  if (users[i].isActive) {
    activeUsers.push(users[i]);
  }
}

console.log(activeUsers);
// 输出:
// [
//   { id: 1, name: 'Alice', isActive: true },
//   { id: 3, name: 'Charlie', isActive: true }
// ]

登录后复制

总的来说，