js数组中filter方法的使用

JavaScript 中的 filter() 方法用于创建一个新数组，包含通过指定条件的所有元素，原数组不会被修改，体现了函数式编程的“不可变性”原则。以下是详细说明：

基本语法arr.filter(callback(element, index, array), thisArg)

callback：测试每个元素的函数，返回 true 则保留元素，false 则过滤。
element：当前遍历的元素。
index（可选）：当前元素的索引。
array（可选）：调用 filter 的原数组。
thisArg（可选）：执行 callback 时的 this 值。

常见使用场景

筛选数字找出所有大于 10 的数：
const numbers = [5, 10, 15, 20];const bigNumbers = numbers.filter(n => n > 10); // [15, 20]
处理对象数组筛选年龄大于 18 的用户：
const users = [ { name: 'Alice', age: 25 }, { name: 'Bob', age: 17 }, { name: 'Charlie', age: 30 }];const adults = users.filter(user => user.age >= 18); // 包含 Alice 和 Charlie 的新数组
去重或排除特定值去掉 null、undefined 或空字符串：
const mixedArray = [1, null, 'hello', '', undefined, 2];const cleaned = mixedArray.filter(item => item != null && item !== ''); // [1, 'hello', 2]

链式调用

filter 常与 map、sort 等方法结合使用，实现复杂数据处理。例如：

const names = users .filter(user => user.age >= 18) // 先筛选成人用户 .map(user => user.name); // 再提取姓名// 结果：['Alice', 'Charlie']注意事项

不修改原数组：每次调用返回新数组，原数组保持不变。
空数组处理：若无元素满足条件，返回空数组 []。

示例总结// 示例1：筛选偶数const nums = [1, 2, 3, 4];const evens = nums.filter(n => n % 2 === 0); // [2, 4]// 示例2：结合索引过滤const words = ['apple', 'banana', 'cherry'];const shortWords = words.filter((word, index) => index < 2); // ['apple', 'banana']

filter() 方法简洁高效，是日常开发中处理数组数据的核心工具之一。

您可能感兴趣问答

Collapsible

热门标签

热点问答