JS 数组魔法：map 和 filter 怎么用？

JS 数组魔法：map 和 filter 怎么用？

生活中的例子 01

电商网站：把所有商品价格打 8 折显示（map）。

生活中的例子 02

社交软件：只显示在线的好友列表（filter）。

生活中的例子 03

待办清单：筛选出所有“已完成”的任务（filter）。

新手入门指南

COPY

别再傻傻写循环了，来试试 map 和 filter！

嘿，朋友！如果你刚开始学 JavaScript，你可能经常对着一大堆数据发愁。比如，你有一个很长的用户列表，想把他们的名字都变成大写，或者想把不及格的分数挑出来。

很多新手的反应是：“我知道！用 for 循环！”

虽然 for 循环没问题，但在现代前端开发里，我们有更帅气、更简洁的方法：map 和 filter。今天我们就来把它们彻底搞懂。

1. The Hook：工厂流水线

闭上眼睛想象一下，你是一家食品加工厂的老板，面前有一条传送带，上面全是未处理的土豆。

• 如果你想做薯片： 你需要对传送带上的每一个土豆进行切片、油炸。出来的结果数量没变，但土豆变成了薯片。这就是 `map`（映射） —— 每一个都处理，变个样出来。
• 如果你想挑出大土豆： 你需要在传送带上装个筛子，把小土豆扔掉，只留下大土豆。出来的结果数量变少了，但原本的大土豆还是大土豆，没有变样。这就是 `filter`（过滤） —— 按条件筛选，留下的都是精华。

2. 它们到底是啥？

• `map()`：它会创建一个新数组，数组里的每个元素都是经过你刚才写的函数“加工”过的。
• `filter()`：它也会创建一个新数组，里面只包含那些通过你测试（返回 true）的元素。

3. 代码实战：来看看怎么用

别怕代码，我们看个超简单的例子。

第一招：Map (全员变身)

假设我们有一组商品价格，双十一来了，老板说统统打五折！

const 原始价格 = [100, 200, 50, 300];

// 以前你可能这样写：
// let 打折价格 = [];
// for(let i = 0; i < 原始价格.length; i++) {
//   打折价格.push(原始价格[i] * 0.5);
// }

// 现在用 map，只需一行！
const 打折价格 = 原始价格.map(price => price * 0.5);

console.log(打折价格); 
// 输出: [50, 100, 25, 150]

看，map 自动帮你遍历了数组，把每个 price 都乘了 0.5，然后打包成一个新数组给你。

第二招：Filter (优胜劣汰)

现在，我们想从刚才的打折商品里，找出那些仍然超过 60 块钱的“贵族商品”。

// 接着上面的数据
const 还是太贵了 = 打折价格.filter(price => price > 60);

console.log(还是太贵了); 
// 输出: [100, 150] 
// (因为 50 和 25 都被无情地淘汰了)

filter 会问每一个数字：“你大于 60 吗？” 如果是，就留下来；如果不是，就拜拜。

4. 新手最容易掉的坑

这里有个千万要注意的地方：它们不会改变原始数组！

新手经常写出这样的代码：

const numbers = [1, 2, 3];
numbers.map(n => n * 2); // 这里虽然计算了，但你没接住它！
console.log(numbers);    // 输出: [1, 2, 3] ... 咦？怎么没变？

这就好比你做好了薯片，但是没拿袋子装起来，直接扔地上了。map 和 filter 都会返回一个全新的数组，你需要用一个变量（比如 const newResult = ...）把它存起来。

5. 总结一下

记住这两句口诀：

• 想要大家一起变身（数量不变），用 `map`。
• 想要按条件挑挑拣拣（数量变少），用 `filter`。

学会这两个方法，你的代码就像是从手洗衣服进化到了全自动洗衣机，既省力又干净！快去你的代码里试试吧！