JavaScript数组遍历的七种方法详解
作者：红色的小鳄鱼
本文聚焦 JavaScript 中最核心的 7 个数组遍历方法,从功能定义、参数、返回值、是否改原数组、实战示例五个维度拆解,帮你彻底分清不同场景该用哪种方法,需要的朋友可以参考下
一、forEach ()：纯遍历执行操作
遍历数组的每一个元素，并为每个元素执行一次指定的回调函数（无返回值，仅做 “执行操作”）。
const arr = [1, 2, 3];
// 遍历打印每个元素和索引
arr.forEach((item, index) => {
console.log(`索引${index}的值：${item}`);
});
// 输出：
// 索引0的值：1
// 索引1的值：2
// 索引2的值：3
// 注意：forEach无法通过break/return中断遍历（return仅跳过当前次循环）
arr.forEach(item => {
if (item === 2) return; // 仅跳过2，不会终止遍历
console.log(item); // 输出1、3
});
仅需遍历数组执行操作（如打印、修改外部变量、DOM 操作），不需要返回新数组 / 值的场景。
二、map ()：遍历并返回新数组
遍历数组，为每个元素执行回调函数，将回调的返回值收集成一个新数组返回（新数组长度和原数组完全一致）。
const newArr = arr.map((item, index, array) => {
// 处理逻辑，返回新值
return 处理后的值;
}, thisArg);
const arr = [1, 2, 3];
// 数组元素翻倍
const doubleArr = arr.map(item => item * 2);
console.log(doubleArr); // [2, 4, 6]
console.log(arr); // [1,2,3]（原数组不变）
// 处理对象数组
const users = [{ name: '张三', age: 20 }, { name: '李四', age: 25 }];
const userNames = users.map(item => item.name);
console.log(userNames); // ['张三', '李四']
需要基于原数组生成一个新数组（如数据格式转换、值计算），且新数组长度和原数组一致的场景。
三、filter ()：筛选符合条件的元素
遍历数组，筛选出回调返回 true的元素，将这些元素组成新数组返回（新数组长度≤原数组）。
const newArr = arr.filter((item, index, array) => {
// 返回布尔值，true则保留当前元素
return 条件表达式;
}, thisArg);
const arr = [1, 2, 3, 4, 5];
// 筛选偶数
const evenArr = arr.filter(item => item % 2 === 0);
console.log(evenArr); // [2, 4]
// 筛选对象数组
const users = [
{ name: '张三', age: 20 },
{ name: '李四', age: 25 },
{ name: '王五', age: 17 }
];
// 筛选成年用户
const adultUsers = users.filter(item => item.age >= 18);
console.log(adultUsers); // [{name: '张三', age:20}, {name: '李四', age:25}]
需要从数组中 “过滤 / 筛选” 出符合条件的元素（如筛选列表、过滤无效数据）。
四、reduce ()：聚合数组为单个值
遍历数组，将每个元素依次传入回调函数，通过 “累加器” 将数组聚合为单个值（数字、对象、数组等），是最灵活的遍历方法。
const result = arr.reduce((accumulator, currentValue, currentIndex, array) => {
// 聚合逻辑，返回新的累加器值
return 新的accumulator;
}, initialValue);
const arr = [1, 2, 3, 4];
// 示例1：求和（基础用法）
const sum = arr.reduce((acc, cur) => acc + cur, 0);
console.log(sum); // 10
// 示例2：求数组最大值
const max = arr.reduce((acc, cur) => acc > cur ? acc : cur, arr[0]);
console.log(max); // 4
// 示例3：聚合对象数组（统计总年龄）
const users = [{ name: '张三', age: 20 }, { name: '李四', age: 25 }];
const totalAge = users.reduce((acc, cur) => acc + cur.age, 0);
console.log(totalAge); // 45
// 示例4：将数组转为对象
const arr2 = ['a', 'b', 'c'];
const obj = arr2.reduce((acc, cur, index) => {
acc[`key${index}`] = cur;
return acc;
}, {});
console.log(obj); // {key0: 'a', key1: 'b', key2: 'c'}
需要将数组 “汇总” 为单个值（求和、求最值、统计），或转换为对象 / 嵌套结构的场景。
五、every ()：判断所有元素是否满足条件
遍历数组，检查所有元素是否都满足回调的条件，只要有一个不满足就返回 false（短路遍历：找到不满足的元素立即停止）。
const isAllPass = arr.every((item, index, array) => {
return 条件表达式;
}, thisArg);
const arr = [2, 4, 6, 8];
// 判断是否全是偶数
const isAllEven = arr.every(item => item % 2 === 0);
console.log(isAllEven); // true
const arr2 = [2, 4, 7, 8];
const isAllEven2 = arr2.every(item => item % 2 === 0);
console.log(isAllEven2); // false（7不满足，遍历到7就停止）
// 判断对象数组所有元素是否成年
const users = [{ age: 20 }, { age: 25 }, { age: 17 }];
const isAllAdult = users.every(item => item.age >= 18);
console.log(isAllAdult); // false
需要验证 “数组所有元素都符合条件”（如表单验证、全选判断）。
六、some ()：判断是否有元素满足条件
遍历数组，检查是否存在至少一个元素满足回调的条件，只要找到一个满足就返回 true（短路遍历：找到满足的元素立即停止）。
const isHasPass = arr.some((item, index, array) => {
return 条件表达式;
}, thisArg);
const arr = [1, 3, 5, 8];
// 判断是否有偶数
const hasEven = arr.some(item => item % 2 === 0);
console.log(hasEven); // true（遍历到8就停止）
const arr2 = [1, 3, 5, 7];
const hasEven2 = arr2.some(item => item % 2 === 0);
console.log(hasEven2); // false
// 判断对象数组是否有未成年
const users = [{ age: 20 }, { age: 25 }, { age: 17 }];
const hasMinor = users.some(item => item.age < 18);
console.log(hasMinor); // true
需要验证 “数组中存在至少一个符合条件的元素”（如判断是否有选中项、是否有异常数据）。
七、find ()：查找第一个符合条件的元素
遍历数组，返回第一个满足回调条件的元素；若没有找到，返回 undefined（短路遍历：找到后立即停止）。
const targetItem = arr.find((item, index, array) => {
return 条件表达式;
}, thisArg);
const arr = [1, 2, 3, 4, 5];
// 查找第一个大于3的元素
const target = arr.find(item => item > 3);
console.log(target); // 4
// 查找对象数组中的元素
const users = [
{ id: 1, name: '张三' },
{ id: 2, name: '李四' },
{ id: 3, name: '王五' }
];
// 根据id查找用户
const user = users.find(item => item.id === 2);
console.log(user); // {id: 2, name: '李四'}
// 找不到返回undefined
const user2 = users.find(item => item.id === 10);
console.log(user2); // undefined
需要从数组中 “查找单个元素”（如根据 ID 找数据、找第一个符合条件的项）。
总结
- 无返回值仅执行操作：用forEach；
- 生成同长度新数组：用map；
- 筛选元素生成新数组：用filter；
- 聚合为单个值：用reduce；
- 判断全满足条件：用every；
- 判断是否有满足条件：用some；
- 查找第一个满足条件的元素：用find。
所有方法均不修改原数组，且支持短路遍历（every/some/find）的方法能提升性能，实际开发中优先根据 “返回值类型” 选择对应方法。
以上就是JavaScript数组遍历的七种方法详解的详细内容，更多关于JavaScript数组遍历方法的资料请关注脚本之家其它相关文章！