javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JavaScript数组与对象过滤

JavaScript数组与对象过滤方法的完全指南

作者：花归去

本文系统介绍了JavaScript中的数组和对象过滤方法,数组过滤包括filter()、find()、findIndex()等常用方法,以及every()和some()等条件检测方法；对象过滤涵盖键值过滤、深度过滤等技巧,文章还提供了高级过滤技巧,需要的朋友可以参考下

一、数组过滤方法

1.filter()— 最常用过滤方法

创建一个新数组，包含通过测试的所有元素。

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

// 基础用法：过滤偶数
const evens = numbers.filter(num => num % 2 === 0);
// 结果: [2, 4, 6]

// 复杂条件：过滤大于3且是偶数的数
const result = numbers.filter(num => num > 3 && num % 2 === 0);
// 结果: [4, 6]

// 对象数组过滤
const users = [
  { name: '张三', age: 25, active: true },
  { name: '李四', age: 30, active: false },
  { name: '王五', age: 28, active: true }
];

const activeUsers = users.filter(user => user.active);
// 结果: [{ name: '张三', age: 25... }, { name: '王五', age: 28... }]

const adults = users.filter(user => user.age >= 28);
// 结果: [{ name: '李四', age: 30... }, { name: '王五', age: 28... }]

参数说明：

array.filter((element, index, array) => {
  // 返回 true 保留元素，false 则过滤掉
});
参数说明
element当前处理的元素（必需）
index当前元素的索引（可选）
array调用 filter 的数组本身（可选）

2.find()— 查找单个元素

返回第一个满足条件的元素，找不到返回 undefined。

const users = [
  { id: 1, name: '张三' },
  { id: 2, name: '李四' },
  { id: 3, name: '王五' }
];

// 查找特定ID的用户
const user = users.find(u => u.id === 2);
// 结果: { id: 2, name: '李四' }

// 查找不存在的返回 undefined
const notFound = users.find(u => u.id === 999);
// 结果: undefined

3.findIndex()— 查找索引

返回第一个满足条件的元素的索引，找不到返回 -1。

const numbers = [10, 20, 30, 40];

const index = numbers.findIndex(num => num > 25);
// 结果: 2 (即30的索引)

// 常用于删除特定元素
const users = [{ id: 1 }, { id: 2 }, { id: 3 }];
const idx = users.findIndex(u => u.id === 2);
if (idx !== -1) users.splice(idx, 1);

4.every()— 全部满足

测试是否所有元素都通过测试，返回布尔值。

const scores = [85, 90, 88, 92];

// 是否全部及格（>=60）
const allPassed = scores.every(score => score >= 60);
// 结果: true

const allExcellent = scores.every(score => score >= 90);
// 结果: false

5.some()— 部分满足

测试是否有至少一个元素通过测试，返回布尔值。

const users = [
  { name: '张三', role: 'admin' },
  { name: '李四', role: 'user' }
];

// 是否存在管理员
const hasAdmin = users.some(u => u.role === 'admin');
// 结果: true

// 是否有未成年人
const ages = [25, 30, 16, 28];
const hasMinor = ages.some(age => age < 18);
// 结果: true

二、对象过滤方法

1. 根据键值过滤对象属性

const user = {
  id: 1,
  name: '张三',
  password: 'secret123',
  email: 'zhangsan@example.com',
  createdAt: '2024-01-01',
  token: 'abc123'
};

// 方法1：解构 + 剩余参数（排除特定字段）
const { password, token, ...safeUser } = user;
console.log(safeUser);
// { id: 1, name: '张三', email: '...', createdAt: '...' }

// 方法2：动态过滤（保留指定字段）
const pick = (obj, keys) => 
  Object.fromEntries(
    Object.entries(obj).filter(([key]) => keys.includes(key))
  );

const publicFields = pick(user, ['id', 'name', 'email']);
// { id: 1, name: '张三', email: '...' }

// 方法3：动态过滤（排除指定字段）
const omit = (obj, keys) => 
  Object.fromEntries(
    Object.entries(obj).filter(([key]) => !keys.includes(key))
  );

const safeData = omit(user, ['password', 'token']);
// { id: 1, name: '张三', email: '...', createdAt: '...' }

2. 深度过滤对象（递归）

// 递归移除所有 null/undefined/空字符串
const cleanObject = (obj) => {
  if (Array.isArray(obj)) {
    return obj.map(cleanObject).filter(item => item != null);
  }
  if (typeof obj === 'object' && obj !== null) {
    return Object.fromEntries(
      Object.entries(obj)
        .filter(([_, v]) => v != null && v !== '')
        .map(([k, v]) => [k, cleanObject(v)])
    );
  }
  return obj;
};

const dirty = {
  a: 1,
  b: null,
  c: '',
  d: { e: 2, f: undefined, g: { h: '', i: 3 } }
};

cleanObject(dirty);
// { a: 1, d: { e: 2, g: { i: 3 } } }

3. 根据值的条件过滤对象

const products = {
  apple: { price: 5, stock: 100 },
  banana: { price: 3, stock: 0 },
  orange: { price: 4, stock: 50 }
};

// 过滤出有库存的商品
const inStock = Object.fromEntries(
  Object.entries(products).filter(([_, product]) => product.stock > 0)
);
// { apple: { price: 5, stock: 100 }, orange: { price: 4, stock: 50 } }

// 过滤出价格低于5的商品
const affordable = Object.fromEntries(
  Object.entries(products).filter(([_, p]) => p.price < 5)
);
// { banana: { price: 3, stock: 0 }, orange: { price: 4, stock: 50 } }

三、高级过滤技巧

1. 多条件组合过滤

const products = [
  { name: 'iPhone', category: '手机', price: 5999, brand: 'Apple' },
  { name: 'iPad', category: '平板', price: 3999, brand: 'Apple' },
  { name: 'Mate60', category: '手机', price: 6999, brand: 'Huawei' },
  { name: 'MatePad', category: '平板', price: 2999, brand: 'Huawei' }
];

// 链式过滤：先按类别，再按品牌，最后按价格
const result = products
  .filter(p => p.category === '手机')
  .filter(p => p.brand === 'Apple')
  .filter(p => p.price < 7000);
// 结果: [{ name: 'iPhone', ... }]

// 或使用单一复杂条件（性能更好）
const result2 = products.filter(p => 
  p.category === '手机' && 
  p.brand === 'Apple' && 
  p.price < 7000
);

2. 模糊搜索/文本过滤

const users = [
  { name: '张三', email: 'zhangsan@test.com' },
  { name: '张三丰', email: 'zhangsanfeng@test.com' },
  { name: '李四', email: 'lisi@test.com' }
];

const searchTerm = 'zhang';

// 不区分大小写的多字段搜索
const filtered = users.filter(user => 
  Object.values(user).some(value => 
    String(value).toLowerCase().includes(searchTerm.toLowerCase())
  )
);
// 结果: 张三 和 张三丰

3. 去重过滤

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

// 方法1：使用 Set（最简单）
const unique1 = [...new Set(numbers)];
// [1, 2, 3, 4]

// 方法2：根据对象属性去重
const users = [
  { id: 1, name: '张三' },
  { id: 2, name: '李四' },
  { id: 1, name: '张三（重复）' }
];

const uniqueById = users.filter((user, index, self) => 
  index === self.findIndex(u => u.id === user.id)
);
// 结果: [{ id: 1, name: '张三' }, { id: 2, name: '李四' }]

4. 分页过滤

const allData = Array.from({ length: 100 }, (_, i) => ({ id: i + 1 }));

const paginate = (data, page, pageSize) => {
  const start = (page - 1) * pageSize;
  return data.slice(start, start + pageSize);
};

const page1 = paginate(allData, 1, 10); // 第1页，每页10条
const page2 = paginate(allData, 2, 10); // 第2页

5. 链式过滤 vs 管道函数

// 创建可复用的过滤管道
const pipe = (...filters) => {
  return (data) => filters.reduce((acc, filter) => acc.filter(filter), data);
};
// 定义过滤函数
const isActive = user => user.active;
const isAdult = user => user.age >= 18;
const isFromCity = city => user => user.city === city;
const users = [
  { name: '张三', age: 25, city: '北京', active: true },
  { name: '李四', age: 30, city: '上海', active: false },
  { name: '王五', age: 17, city: '北京', active: true },
  { name: '赵六', age: 28, city: '北京', active: true }
];
// 组合过滤条件
const activeAdultsInBeijing = pipe(isActive, isAdult, isFromCity('北京'));
const result = activeAdultsInBeijing(users);
// 结果: [{ name: '张三', ... }, { name: '赵六', ... }]

四、性能优化建议

场景推荐方法时间复杂度说明
简单过滤filter()O(n)代码清晰，性能良好
大数据量（>10万）for 循环O(n)比 filter() 快 20-30%
提前终止find() / some()O(k)找到即停，k ≤ n
多次过滤单一复杂条件O(n)减少遍历次数
去重SetO(n)最优方案
对象属性去重MapO(n)优于 findIndex 的 O(n²)

性能优化示例

// 大数据量优化示例
const bigArray = new Array(1000000).fill(0).map((_, i) => i);

// 较慢：filter 链
const slow = bigArray.filter(n => n > 100).filter(n => n % 2 === 0);

// 较快：单一 filter
const fast = bigArray.filter(n => n > 100 && n % 2 === 0);

// 最快：for 循环
const fastest = [];
for (let i = 0; i < bigArray.length; i++) {
  const n = bigArray[i];
  if (n > 100 && n % 2 === 0) fastest.push(n);
}

内存优化建议

// 避免在循环中创建不必要的中间数组
const users = [/* 大量数据 */];
// ❌ 不好：创建多个中间数组
const result = users
  .filter(u => u.active)
  .map(u => ({ ...u, fullName: `${u.firstName} ${u.lastName}` }))
  .filter(u => u.age >= 18);
// ✅ 更好：使用 reduce 一次完成
const result = users.reduce((acc, user) => {
  if (user.active && user.age >= 18) {
    acc.push({
      ...user,
      fullName: `${user.firstName} ${user.lastName}`
    });
  }
  return acc;
}, []);

五、常用工具函数封装

// 通用过滤工具库
const FilterUtils = {
  // 多条件过滤
  multiFilter: (data, conditions) => 
    data.filter(item => conditions.every(cond => cond(item))),

  // 模糊搜索
  fuzzySearch: (data, fields, keyword) => 
    data.filter(item => 
      fields.some(field => 
        String(item[field]).toLowerCase()
          .includes(keyword.toLowerCase())
      )
    ),

  // 范围过滤
  inRange: (data, field, min, max) => 
    data.filter(item => item[field] >= min && item[field] <= max),

  // 对象数组去重
  uniqueBy: (data, key) => 
    data.filter((item, index, self) => 
      index === self.findIndex(t => t[key] === item[key])
    ),

  // 清理空值
  compact: (data) => 
    data.filter(Boolean) // 移除 falsy 值
};

// 使用示例
const users = [
  { name: '张三', age: 25, city: '北京' },
  { name: '李四', age: 30, city: '上海' },
  { name: '王五', age: 28, city: '北京' }
];

// 多条件：北京的成年人
const result = FilterUtils.multiFilter(users, [
  u => u.city === '北京',
  u => u.age >= 18
]);

总结对比表

方法返回类型用途是否改变原数组短路特性适用场景
filter()新数组保留符合条件的元素❌❌需要多个结果
find()元素/undefined查找第一个匹配项❌✅查找单个元素
findIndex()数字索引查找第一个匹配项的索引❌✅需要索引进行操作
findLast()元素/undefined查找最后一个匹配项❌✅从后向前查找
findLastIndex()数字索引查找最后一个匹配项的索引❌✅从后向前找索引
every()Boolean是否全部满足❌✅验证所有元素
some()Boolean是否部分满足❌✅验证存在性
map()新数组转换每个元素❌❌数据转换
reduce()任意值聚合计算❌❌累加、分组等
flatMap()新数组映射后展平一层❌❌一对多转换

ES2023 新增方法

// findLast 和 findLastIndex（从后向前查找）
const numbers = [5, 12, 8, 130, 44];
const lastLarge = numbers.findLast(n => n > 10);
// 结果: 44（从后向前第一个大于10的数）
const lastLargeIndex = numbers.findLastIndex(n => n > 10);
// 结果: 4（44的索引）
// toReversed、toSorted、toSpliced、with（不改变原数组的版本）
const original = [1, 2, 3];
const reversed = original.toReversed();
// original 仍然是 [1, 2, 3]，reversed 是 [3, 2, 1]

常见问题与注意事项

1. 空值处理

// filter 会自动跳过空槽位（稀疏数组）
const sparse = [1, , , 4];
const filtered = sparse.filter(x => x > 0);
// 结果: [1, 4]（空槽位被忽略）
// 但需要注意 undefined 和 null 的区别
const withUndefined = [1, undefined, null, 4];
const cleaned = withUndefined.filter(x => x != null);
// 结果: [1, 4]（保留了数值，移除了 undefined 和 null）

2. 异步过滤

// 异步过滤需要配合 Promise.all 和 map
const asyncFilter = async (arr, predicate) => {
  const results = await Promise.all(arr.map(predicate));
  return arr.filter((_, index) => results[index]);
};
// 使用示例
const numbers = [1, 2, 3, 4, 5];
const isEvenAsync = async (num) => {
  await new Promise(resolve => setTimeout(resolve, 10));
  return num % 2 === 0;
};
const evens = await asyncFilter(numbers, isEvenAsync);
// 结果: [2, 4]（异步版本）

3. 类型守卫与 TypeScript

// TypeScript 类型守卫示例
interface User {
  id: number;
  name: string;
  email?: string;
}
// 使用类型谓词进行类型收窄
function hasEmail(user: User): user is User & { email: string } {
  return user.email !== undefined;
}
const users: User[] = [
  { id: 1, name: '张三', email: 'zhang@test.com' },
  { id: 2, name: '李四' }
];
const usersWithEmail = users.filter(hasEmail);
// usersWithEmail 类型自动推断为 (User & { email: string })[]

通过以上方法，你可以在各种场景下高效、优雅地处理 JavaScript 中的数组和对象过滤需求。根据具体场景选择合适的方法，既能保证代码可读性，又能兼顾性能表现。

以上就是JavaScript数组与对象过滤方法的完全指南的详细内容，更多关于JavaScript数组与对象过滤的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:
阅读全文