JavaScript 数组怎么遍历

你有没有过这样的经历：手机相册里存了几十张旅行照片，想把所有照片的地点标签挑出来整理成清单；或者外卖软件里的历史订单，想把所有消费金额加起来看看这个月花了多少饭钱？这些场景本质上都是“把一堆数据逐个拿出来处理”，放到编程里，就叫“遍历”——而JavaScript里处理数组遍历，是每个前端开发者刚入门就必须掌握的基础技能，也是日常开发里用得最多的操作之一。

最基础的“逐个拿”：for循环

先讲大家最熟悉的for循环，它就像你整理相册时的“点名式”动作：从第1张照片开始，数到最后一张，一张一张拿出来看。数组在JS里是按顺序存数据的，每个数据都有个编号叫“索引”，从0开始（就像相册的第1页是第0页），for循环的写法正好对应这个逻辑：

先定范围，比如let i = 0（从第0张开始），再定结束条件，比如i < 照片总数</code>（没看完就继续），最后每次看完一张就加1（i++，翻到下一页）。举个实际的小例子：你写了个数组存这周的外卖订单const orders = [25, 32, 18, 40]，想把每个订单金额都打印出来，用for循环就是：

`javascript

for (let i = 0; i < orders.length; i++) {

console.log(第${i+1}单金额：${orders[i]});

}

`

这个方法的好处是灵活，想从中间开始遍历、想跳过某些元素都能改，比如想跳过第2单，只要加个if (i === 1) continue就行，适合需要控制遍历节奏的场景。

专门给数组定制：forEach方法

但如果只是想“把每个元素都处理一遍，不用控制顺序或跳过”，用for循环就有点麻烦了——JS给数组做了个“专用工具”，就是forEach，它就像你把照片交给自动整理机，机器会自动把每一张都拿出来处理，不用你手动数索引。

forEach的用法很简单，只要告诉机器“拿到照片后做什么”就行，不用管具体的遍历过程。比如还是刚才的外卖订单，用forEach写就是：

`javascript

orders.forEach((amount, index) => {

console.log(第${index+1}单金额：${amount});

});

`

这里的amount是每次拿到的订单金额，index是它的位置，就像整理机把照片和它的页码一起递给你。这个方法的好处是代码更简洁，一眼就能看出来是“遍历数组每个元素”，缺点是没法中途停止——比如你想看到第3单就停，forEach做不到，只能用for循环。

想“边遍历边改数组”：map方法

有时候你不只是想“看”数组里的元素，还想把每个元素改完后存成新数组，比如把外卖订单都打9折，变成新的优惠订单。这时候用map就像你给每一张照片加个滤镜，处理完的新照片会自动存到新相册里，不会改原来的相册：

`javascript

const originalOrders = [25, 32, 18, 40];

const discountOrders = originalOrders.map(amount => amount * 0.9);

console.log(discountOrders); // 输出 [22.5, 28.8, 16.2, 36]

`

map会自动把每个元素处理后的结果收集成新数组，原来的originalOrders不会变，适合做“数据转换”的场景，比如把用户输入的数字都转成整数，或者把商品数组里的价格都加10元。

想“挑出符合条件的元素”：filter方法

如果你的需求是“从一堆数据里挑出符合要求的”，比如想把这周消费超过30元的订单找出来，这时候filter就像你整理照片时，只把“地点是海边”的照片挑出来单独放，不符合的自动跳过：

`javascript

const orders = [25, 32, 18, 40];

const bigOrders = orders.filter(amount => amount > 30);

console.log(bigOrders); // 输出 [32, 40]

`

filter会遍历每个元素，只要满足你给的条件（这里是“金额>30”），就会被放到新数组里，剩下的不会被保留，适合做“数据筛选”，比如找分数及格的学生、找库存大于0的商品。

最后要提醒的是，没有绝对“最好用”的遍历方法，就像整理照片时，手动点名适合挑特定的，自动整理机适合全量处理，加滤镜适合改完存新的，挑照片适合筛选——日常开发里，根据自己的需求选就行，不用纠结哪种方法更“高级”，能解决问题的就是好方法。