极简三分钟ES6 - 数组遍历

基础循环遍历

for 循环

最原始的方式：通过索引逐项访问数组

const fruits = ["🍎", "🍌", "🍊"];
for (let i = 0; i < fruits.length;  i++) {
  console.log(fruits[i]);  // 依次输出苹果、香蕉、橘子 
}

其特点

• 可随时用 break 中断循环
• 可通过 continue 跳过当前项

功能型遍历（返回新数组）

1、map()：映射新数组

作用：对每个元素加工后生成新数组（原数组不变）

const nums = [1, 2, 3];
const doubled = nums.map(n  => n * 2); // [2, 4, 6]

场景：数据转换（如价格翻倍）

2、filter()：过滤子集

作用：筛选符合条件的元素

const scores = [80, 45, 90, 60];
const passed = scores.filter(s  => s >= 60); // [80, 90, 60]

场景：搜索符合条件的项（如及格成绩）

条件判断型遍历

1、some()：是否存在满足条件的项

作用 ：只要有一项满足即返回 true

const hasBanana = fruits.some(fruit  => fruit === "🍌"); // true

2、every()：是否所有项都满足条件

作用 ：全部满足才返回 true

const allPassed = [80, 75, 90].every(s => s > 60); // true

两者区别：

• some：像"或"运算（一人达标就通过）
• every：像"与"运算（全员达标才通过）

搜索定位型遍历

1、find()：找首个符合条件的元素

作用 ：返回元素值（找不到时返回 undefined）

const users = [
  {id: 1, name: "小明"},
  {id: 2, name: "小红"}
];
const user = users.find(u  => u.id  === 2); // {id:2, name:"小红"}

2、findIndex()：找首个符合条件的索引

作用 ：返回位置（找不到时返回 -1）

const index = users.findIndex(u => u.name === "小红"); // 1

场景：精确查找数据位置

聚合计算遍历（reduce()）

作用：将数组压缩为单个值（如求和、拼接）

const sum = [1, 2, 3].reduce((total, num) => total + num, 0); // 6

场景：数据汇总（如购物车总价）

ES6简洁遍历语法

1、for...of 循环

直接获取元素值 （比传统 for 更简洁）

for (const fruit of fruits) {
  console.log(fruit);  // , ,  
}

优势：无需操作索引，避免越界错误

2、forEach()：替代 for 循环

作用：遍历执行操作（无返回值）

fruits.forEach(fruit => console.log(fruit));

注意 ：无法用 break 中断循环

特殊遍历方法

keys() / values() / entries()

获取索引或键值对（常用于 Map 结构）

for (const index of fruits.keys())  {
  console.log(index);  // 0, 1, 2
}

场景：需要同时操作索引和值的场景

遍历方法对比总结

方法	返回值	是否修改原数组	典型场景
map()	新数组	❌	数据批量转换
filter()	过滤后数组	❌	条件筛选
some()	布尔值	❌	检查是否存在符合项
reduce()	聚合结果	❌	累加/拼接/统计
find()	首个匹配元素	❌	精确查找对象
forEach()	无	❌	遍历执行操作（无中断）
for...of	-	❌	简洁遍历元素

如何选择

• 要新数组 → map（加工）、filter（过滤）
• 要检查条件 → some（任一）、every（全部）
• 要找单个元素 → find（取值）、findIndex（找位置）
• 要汇总计算 → reduce
• 只遍历不返回 → forEach 或 for...of

牢记

选择大于努力，方法虽多，各有其用