javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JavaScript map()和filter()

JavaScript中map()和filter()的使用区别

作者：胡歌1

map()和filter()都是 JavaScript数组的高阶函数,本文主要介绍了JavaScript中map()和filter()的使用区别,具有一定的参考价值,感兴趣的可以了解一下

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

核心区别对比表

特性map()filter()
用途转换数组元素筛选数组元素
返回值新数组（与原数组长度相同）新数组（长度≤原数组）
回调返回要求返回转换后的元素返回布尔值（决定是否保留元素）
空位处理保留空位（返回undefined）跳过空位
是否修改原数组不修改原数组（纯函数）不修改原数组（纯函数）

代码示例对比

示例数组

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]

总结选择指南

 到此这篇关于JavaScript中map()和filter()的使用区别的文章就介绍到这了,更多相关JavaScript map()和filter()内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

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