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