filter 和 map 做比较

博客对高阶函数 map 和 filter 进行了比较。通过代码示例展示了二者的使用,filter 是从原数组中过滤出符合条件的元素形成新数组,而 map 是对原数组每个元素进行处理后返回新数组,且二者都不会修改原数组的引用。

高阶函数做比较

  • filter

    let a = [1,2,3];
    let b = a.filter((item)=>{
    item = item*2
    return item > 4;
    });
    console.log(‘bbbbb’,b,a); => b = [3], a = [1, 2, 3]

  • map

    let a = [1,2,3];
    let b = a.filter((item)=>{
    item = item*2
    return item;
    });
    console.log(‘bbbbb’,b,a); => b = [2, 4, 6], a = [1, 2, 3]

filter 返回的数组是从原数组中过滤出来,只从原数组中过滤
map 返回新数组,但不会修改原数组的引用

### JavaScript 中 `filter()` `map()` 方法的区别对比 `filter()` `map()` 是 JavaScript 数组中常用的两个高阶函数,它们都用于对数组元素进行操作,但其目的使用场景有明显区别。 #### 功能差异 `map()` 方法用于创建一个新数组,其结果是对原数组的每个元素执行一次提供的函数[^3]。它会遍历整个数组,并返回与原始数组长度相同的新数组,其中每个元素都是回调函数的返回值。例如: ```javascript const numbers = [1, 2, 3]; const doubled = numbers.map(x => x * 2); console.log(doubled); // [2, 4, 6] ``` 而 `filter()` 方法则用于创建一个新数组,包含所有通过测试的元素。它不会修改原始数组,而是根据提供的条件筛选出符合条件的元素组成新数组[^5]。例如: ```javascript const numbers = [1, 2, 3, 4, 5]; const evens = numbers.filter(x => x % 2 === 0); console.log(evens); // [2, 4] ``` #### 链式调用顺序优化 在链式调用时,应优先考虑性能优化。由于 `filter()` 可以减少后续处理的数据量,因此先使用 `filter()` 再使用 `map()` 能够提高效率。例如: ```javascript // 更高效的写法:先筛选再转换(减少 map 操作次数) const result = bigArray.filter(x => x > 10).map(x => x * 2); // 低效写法(会先对所有元素执行转换) const inefficientResult = bigArray.map(x => x * 2).filter(x => x > 20); ``` #### 处理稀疏数组的行为差异 对于稀疏数组,`map()` 会保留空位,而 `filter()` 则会跳过空位。例如: ```javascript const sparse = [1, , , 4]; // map 保留空位 const mapSparse = sparse.map(x => x * 2); console.log(mapSparse); // [2, <2 empty items>, 8] // filter 跳过空位 const filterSparse = sparse.filter(x => true); console.log(filterSparse); // [1, 4] ``` #### 对假值的处理能力 `filter()` 可以用于移除数组中的假值(如 `false`、`null`、`undefined`、`''`、`0` 等),例如: ```javascript const mixed = [0, 1, false, 2, '', 3]; const truths = mixed.filter(Boolean); // [1, 2, 3] ``` 相比之下,`map()` 不具备这种筛选能力,主要用于数据转换。 #### 总结选择指南 - 如果需要对数组中的每个元素进行转换并保持数组长度不变,应使用 `map()`。 - 如果需要根据特定条件从数组中筛选出子集,则应使用 `filter()`。 - 在链式调用中,建议优先使用 `filter()` 以减少后续处理的数据量。 - 对于稀疏数组包含假值的情况,需注意两者行为差异,合理选择方法[^1]。
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值