JavaScript中如何基于复杂条件过滤数组对象

在JavaScript开发过程中，处理数组对象是非常常见的操作，很多时候我们需要根据多个条件、嵌套属性甚至动态变化的规则来筛选数组中的目标元素，这时候就需要用到合适的过滤方法来实现需求。

基础过滤方法：Array.prototype.filter

JavaScript数组自带的filter方法是过滤数组对象的核心工具，它会遍历数组的每一个元素，将回调函数返回为true的元素组成新数组返回，不会改变原数组。基础的单条件过滤使用起来非常简单，示例如下：

// 基础单条件过滤：筛选年龄大于18的用户
const userList = [
  { id: 1, name: '张三', age: 16 },
  { id: 2, name: '李四', age: 20 },
  { id: 3, name: '王五', age: 22 }
];
const adultUsers = userList.filter(item => item.age > 18);
console.log(adultUsers); // 输出 [{ id: 2, name: '李四', age: 20 }, { id: 3, name: '王五', age: 22 }]

多条件组合过滤

实际开发中往往需要同时满足多个条件，比如既要年龄大于18，又要状态为激活的用户，这时候可以通过逻辑运算符组合多个判断条件：

const userList = [
  { id: 1, name: '张三', age: 16, status: 'active' },
  { id: 2, name: '李四', age: 20, status: 'active' },
  { id: 3, name: '王五', age: 22, status: 'inactive' },
  { id: 4, name: '赵六', age: 25, status: 'active' }
];
// 多条件与：年龄大于18 且 状态为active
const validActiveUsers = userList.filter(item => item.age > 18 && item.status === 'active');
console.log(validActiveUsers); // 输出 [{ id: 2, name: '李四', age: 20, status: 'active' }, { id: 4, name: '赵六', age: 25, status: 'active' }]

// 多条件或：年龄小于18 或 状态为inactive
const specialUsers = userList.filter(item => item.age < 18 || item.status === 'inactive');
console.log(specialUsers); // 输出 [{ id: 1, name: '张三', age: 16, status: 'active' }, { id: 3, name: '王五', age: 22, status: 'inactive' }]

嵌套属性条件过滤

当数组对象的属性存在嵌套结构时，直接访问嵌套属性可能会因为中间属性不存在而报错，这时候需要先做安全判断，或者使用可选链操作符简化代码：

const orderList = [
  { id: 1, user: { name: '张三', address: { city: '北京' } }, amount: 200 },
  { id: 2, user: { name: '李四' }, amount: 300 },
  { id: 3, user: { name: '王五', address: { city: '上海' } }, amount: 150 },
  { id: 4, user: { name: '赵六', address: { city: '北京' } }, amount: 400 }
];
// 筛选收货城市为北京且订单金额大于200的订单
// 使用可选链避免user或address不存在时报错
const beijingHighAmountOrders = orderList.filter(item => {
  return item.user?.address?.city === '北京' && item.amount > 200;
});
console.log(beijingHighAmountOrders); // 输出 [{ id: 4, user: { name: '赵六', address: { city: '北京' } }, amount: 400 }]

动态条件过滤

有些场景下过滤条件不是固定的，而是根据用户的选择动态生成，这时候可以把条件封装成独立的函数，或者动态拼接判断逻辑：

const productList = [
  { id: 1, name: '手机', price: 3000, category: '电子', stock: 10 },
  { id: 2, name: '笔记本', price: 5000, category: '电子', stock: 5 },
  { id: 3, name: '水杯', price: 50, category: '日用品', stock: 20 },
  { id: 4, name: '耳机', price: 200, category: '电子', stock: 0 }
];
// 动态条件配置，用户可以选择过滤的维度和值
const filterConfig = {
  category: '电子',
  minPrice: 100,
  maxPrice: 4000,
  hasStock: true
};
// 根据动态配置生成过滤逻辑
const filteredProducts = productList.filter(item => {
  // 分类匹配
  if (filterConfig.category && item.category !== filterConfig.category) return false;
  // 价格区间匹配
  if (filterConfig.minPrice && item.price < filterConfig.minPrice) return false;
  if (filterConfig.maxPrice && item.price > filterConfig.maxPrice) return false;
  // 库存匹配
  if (filterConfig.hasStock && item.stock <= 0) return false;
  return true;
});
console.log(filteredProducts); // 输出 [{ id: 1, name: '手机', price: 3000, category: '电子', stock: 10 }]

复杂条件的性能优化

当数组长度非常大，且过滤条件比较复杂时，频繁的遍历和判断可能会影响性能，可以通过以下方式优化：

• 将不会改变的判断条件提前提取，避免每次遍历都重复计算
• 如果过滤条件中存在多个互斥的判断，优先把命中率高的条件放在前面，减少后续判断的执行次数
• 如果需要对同一个数组做多次不同条件的过滤，可以考虑先对数组做预处理，提取常用判断的缓存值

下面是一个简单的优化示例，提前提取固定配置值，减少重复访问：

const largeList = []; // 假设这是一个包含上万条数据的数组
const targetCategory = '电子';
const minPrice = 100;
// 提前定义固定值，避免每次遍历都访问对象属性
const filterFn = item => item.category === targetCategory && item.price > minPrice;
const result = largeList.filter(filterFn);

JavaScript数组过滤复杂条件filter方法对象处理修改时间：2026-07-17 19:00:31