JavaScript 中 map() 和 filter() 的区别详解

map() 和 filter() 都是 JavaScript 数组的高阶函数，但它们的用途和行为有本质区别：

核心区别对比表

代码示例对比

示例数组

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

map() 示例

// 将每个数字平方
const squares = numbers.map(n => n * n);
console.log(squares); // [1, 4, 9, 16, 25]

// 提取用户名数组
const names = users.map(user => user.name);
console.log(names); // ['Alice', 'Bob', 'Charlie']

// 处理空位
const sparse = [1, , 3];
const mapped = sparse.map(x => x * 2);
console.log(mapped); // [2, , 6]

filter() 示例

// 筛选偶数
const evens = numbers.filter(n => n % 2 === 0);
console.log(evens); // [2, 4]

// 筛选活跃用户
const activeUsers = users.filter(user => user.active);
console.log(activeUsers); 
// [{id:1,name:'Alice',active:true}, {id:3,name:'Charlie',active:true}]

// 处理空位
const sparse = [1, , 3];
const filtered = sparse.filter(x => true);
console.log(filtered); // [1, 3] (空位被跳过)

关键区别详解

1. 用途不同

• map() 用于 转换/映射 数组元素

  // 将温度从摄氏度转换为华氏度
  const celsius = [0, 10, 20];
  const fahrenheit = celsius.map(c => c * 9/5 + 32);
  console.log(fahrenheit); // [32,50,68]

• filter() 用于 筛选 数组元素

  // 筛选正数
  const temps = [-2, 5, -10, 15];
  const positiveTemps = temps.filter(t => t > 0);
  console.log(positiveTemps); //[5,15]

2. 返回值不同

• map() 总是返回 等长数组

  [1, 2, 3].map(x => x * 2); // [2, 4, 6] (长度保持3)

• filter() 返回 可能更短的数组

  [1, 2, 3].filter(x => x > 1); // [2, 3] (长度变为2)

3. 回调函数要求不同

• map() 回调返回 任意类型值

  [1, 2].map(x => ({ value: x })); // 返回对象数组:  [{value:1}, {value:2}]

• filter() 回调必须返回 布尔值

  [1, 2].filter(x => x % 2 === 0); // 必须返回true/false // [2]

组合使用示例

两者常结合使用实现复杂逻辑：

// 获取所有活跃用户的名字
const activeNames = users
  .filter(user => user.active)    // 先筛选
  .map(user => user.name);        // 再转换
console.log(activeNames);         // ['Alice', 'Charlie']

// 计算所有正数的平方根
const numbers = [4, -1, 9, -5, 16];
const positiveRoots = numbers
  .filter(n => n > 0)            // 筛选正数
  .map(n => Math.sqrt(n));       // 计算平方根
console.log(positiveRoots );     // [2, 3, 4]

性能注意事项

• map() 总会遍历所有元素

• filter() 也总会遍历所有元素

• 当链式调用时，考虑顺序优化：

  // 更高效的写法：先筛选再转换（减少map操作次数）
  bigArray.filter(x => x > 10).map(x => x * 2);
  
  // 低效写法（会先对所有元素执行转换）
  bigArray.map(x => x * 2).filter(x => x > 20);

特殊场景处理

处理稀疏数组

const sparse = [1, , , 4];

// map会保留空位
const mapSparse = sparse.map(x => x * 2); 
console.log(mapSparse); // [2, , , 8]

// filter会跳过空位
const filterSparse =sparse.filter(x => true); 
console.log(filterSparse); // [1, 4]

处理数组中的假值

const mixed = [0, 1, false, 2, '', 3];

// filter可以用于移除假值
const truths = mixed.filter(Boolean); // [1, 2, 3]

总结选择指南

• 需要 转换每个元素 → 用 map()

• 需要 基于条件筛选元素 → 用 filter()

• 需要 既筛选又转换 → 组合使用（通常先filter后map）

• 需要 保持数组长度 → 只能用 map()

• 需要 移除特定元素 → 用 filter()