JavaScriptfilter筛选数组元素详解

JavaScript 的 `Array.filter()` 是一个强大而直观的数组筛选工具，它通过执行回调函数对每个元素进行条件判断，仅保留返回值为真值的元素，并始终返回一个全新数组而不改变原数据——无论是筛选偶数、按对象属性精确匹配（如年龄大于18的用户），还是组合复杂逻辑（如名字含“小”且价格在100–500区间），它都能简洁高效地实现；其不可变特性更使其成为函数式编程和现代前端框架（如React）中安全更新数据的理想选择。

Array.filter() 是 JavaScript 中最常用、最直观的数组筛选方法，它会遍历原数组，对每个元素执行你提供的回调函数，只保留返回值为 true 的元素，最终返回一个**全新数组**，不修改原数组。

基本用法：传入一个判断函数

回调函数接收三个参数：当前元素（必填）、索引、原数组。通常只需用到第一个参数。

例如，从数字数组中筛选出所有偶数：

const numbers = [1, 2, 3, 4, 5, 6];
const evens = numbers.filter(num => num % 2 === 0);
// → [2, 4, 6]

筛选对象数组：按属性值精确匹配

当处理用户列表、商品数据等对象数组时，可基于某个属性做条件判断。

比如，筛选出年龄大于 18 的用户：

const users = [
  { name: '小明', age: 16 },
  { name: '小红', age: 22 },
  { name: '小刚', age: 19 }
];
const adults = users.filter(user => user.age > 18);
// → [{ name: '小红', age: 22 }, { name: '小刚', age: 19 }]

支持复杂条件：组合逻辑与模糊匹配

filter 回调中可以写任意合法 JS 表达式，包括逻辑运算、字符串方法、甚至调用其他函数。

• 筛选名字包含“小”且年龄不为空的用户：user => user.name.includes('小') && user.age != null
• 筛选价格在 100–500 区间内的商品：item => item.price >= 100 && item.price
• 忽略大小写筛选以 “js” 开头的标签：tag => tag.toLowerCase().startsWith('js')

注意：空数组、undefined 和短路行为

filter 不会跳过空位（稀疏数组中的 empty slot），但会跳过 undefined 或 null 元素（如果它们是真实存在的值）。更重要的是：

• 如果回调函数没写 return，或返回 undefined / null / 0 / false / NaN / ''，该元素会被过滤掉
• 原数组长度不变，filter 总是返回新数组 —— 即使结果为空，也返回 []
• 不改变原数组，适合函数式编程和 React 等场景下的不可变更新

今天关于《JavaScriptfilter筛选数组元素详解》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！