js过滤数组的核心方法是使用filter()，它通过回调函数判断每个元素是否符合条件并返回新数组；filter()不改变原数组，仅保留回调返回true的元素，例如可用来筛选偶数、排除null/undefined等假值或根据对象属性如isactive筛选对象；处理空值时可通过直接返回value过滤假值，或用严格条件排除特定值如null、undefined、空字符串；过滤对象数组时，可在回调中结合多个条件，如user.isactive && user.name.tolowercase().includes(‘a’)；除filter()外，也可用map()与reduce()组合或for循环实现类似功能，但filter()最简洁常用，其他方法适用于需复杂操作或性能优化的场景。
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
、
0
、
''
(空字符串) 这些值在布尔上下文中会被认为是
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
和空字符串。注意，
0
在这里被保留了下来，因为它不是
null
、
undefined
或空字符串。
如何使用filter()方法过滤对象数组？
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 }
// ]
总的来说，
filter()
方法是最简洁、最常用的数组过滤方法。 如果需要更复杂的过滤逻辑，或者需要同时进行转换和归约操作，可以考虑使用
map()
和
reduce()
。 如果对性能有极致要求，或者需要完全控制过滤过程，可以使用
for
循环。
选择哪种方法取决于具体的应用场景和个人偏好。
暂无评论内容