JavaScript中filter() 和find()的区别对比小结

const users = [
  { id: 1, name: 'Alice', active: true },
  { id: 2, name: 'Bob', active: false },
  { id: 3, name: 'Charlie', active: true },
  { id: 4, name: 'David', active: true }
];

// 找出所有活跃用户
const activeUsers = users.filter(user => user.active);
console.log(activeUsers);
// 输出: [
//   {id: 1, name: 'Alice', active: true},
//   {id: 3, name: 'Charlie', active: true},
//   {id: 4, name: 'David', active: true}
// ]

// 没有匹配项时
const noUsers = users.filter(user => user.age > 100);
console.log(noUsers); // 输出: []

// 查找第一个活跃用户
const firstActive = users.find(user => user.active);
console.log(firstActive);
// 输出: {id: 1, name: 'Alice', active: true}

// 没有匹配项时
const notFound = users.find(user => user.age > 100);
console.log(notFound); // 输出: undefined

// 性能测试
const bigArray = Array(1000000).fill(0).map((_, i) => i);

console.time('filter');
bigArray.filter(x => x === 500000); // 会检查所有元素
console.timeEnd('filter'); // 输出: filter: 5.22509765625 ms

console.time('find');
bigArray.find(x => x === 500000); // 找到后立即停止
console.timeEnd('find'); // 输出: find: 2.56298828125 ms

// filter可以继续链式调用
users
  .filter(user => user.active)
  .map(user => user.name)
  .forEach(name => console.log(name));
// 输出: 
// Alice
// Charlie
// David

// find不能链式调用数组方法（因为返回的是元素）
const userName = users.find(user => user.id === 2).name; // 直接访问属性
console.log(userName) //输出: Bob

// 获取所有未完成的任务
const incompleteTasks = tasks.filter(task => !task.completed);

// 结合map使用
const activeUserNames = users
  .filter(user => user.active)
  .map(user => user.name);

// 查找特定用户
const user = users.find(user => user.id === 3);
console.log(user) //输出: { id: 3, name: 'Charlie', active: true },

// 检查是否存在管理员
const hasAdmin = users.find(user => user.role === 'admin') !== undefined;
console.log(hasAdmin ) //输出: false

const found = users.find(u => u.id === 1);
found.name = 'Alex'; // 会修改原数组中的对象
console.log(users) 
//输出: [
//  { id: 1, name: 'Alex', active: true },
//  { id: 2, name: 'Bob', active: false },
//  { id: 3, name: 'Charlie', active: true },
//  { id: 4, name: 'David', active: true }
// ]

const sparse = [1, , 3];
sparse.find(x => true); // 1 (跳过空位)
sparse.filter(x => true); // [1, 3] (跳过空位)

const checker = {
  threshold: 2,
  check(num) { return num > this.threshold; }
};

[1, 2, 3].find(checker.check, checker); // 3