基础循环遍历
for
循环
最原始的方式:通过索引逐项访问数组
js
const fruits = ["🍎", "🍌", "🍊"];
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]); // 依次输出苹果、香蕉、橘子
}
其特点
- 可随时用
break
中断循环 - 可通过
continue
跳过当前项
功能型遍历(返回新数组)
1、map()
:映射新数组
作用:对每个元素加工后生成新数组(原数组不变)
js
const nums = [1, 2, 3];
const doubled = nums.map(n => n * 2); // [2, 4, 6]
场景:数据转换(如价格翻倍)
2、filter()
:过滤子集
作用:筛选符合条件的元素
js
const scores = [80, 45, 90, 60];
const passed = scores.filter(s => s >= 60); // [80, 90, 60]
场景:搜索符合条件的项(如及格成绩)
条件判断型遍历
1、some()
:是否存在满足条件的项
作用 :只要有一项满足即返回 true
js
const hasBanana = fruits.some(fruit => fruit === "🍌"); // true
2、every()
:是否所有项都满足条件
作用 :全部满足才返回 true
js
const allPassed = [80, 75, 90].every(s => s > 60); // true
两者区别:
some
:像"或"运算(一人达标就通过)every
:像"与"运算(全员达标才通过)
搜索定位型遍历
1、find()
:找首个符合条件的元素
作用 :返回元素值(找不到时返回 undefined
)
js
const users = [
{id: 1, name: "小明"},
{id: 2, name: "小红"}
];
const user = users.find(u => u.id === 2); // {id:2, name:"小红"}
2、findIndex()
:找首个符合条件的索引
作用 :返回位置(找不到时返回 -1
)
js
const index = users.findIndex(u => u.name === "小红"); // 1
场景:精确查找数据位置
聚合计算遍历(reduce()
)
作用:将数组压缩为单个值(如求和、拼接)
js
const sum = [1, 2, 3].reduce((total, num) => total + num, 0); // 6
场景:数据汇总(如购物车总价)
ES6简洁遍历语法
1、for...of
循环
直接获取元素值 (比传统 for
更简洁)
js
for (const fruit of fruits) {
console.log(fruit); // , ,
}
优势:无需操作索引,避免越界错误
2、forEach()
:替代 for 循环
作用:遍历执行操作(无返回值)
js
fruits.forEach(fruit => console.log(fruit));
注意 :无法用 break
中断循环
特殊遍历方法
keys()
/ values()
/ entries()
获取索引或键值对(常用于 Map 结构)
js
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
牢记
选择大于努力,方法虽多,各有其用