前端数组遍历的 “六把钥匙”:解锁 forEach、map、filter、some、every、find 六法核心差异(一)

25 阅读2分钟

数组方法三类记忆法(前端高频必记)

一、遍历执行类:forEach()(无返回值)

核心:单纯遍历数组,执行回调操作,不产生返回值(类似for循环的简化版)。能获取每一项item和索引index,仅用于 “做操作”(如打印、修改外部变量)

const arr = [123];
// 箭头函数简写:遍历打印每一项及索引
arr.forEach((item, index) => {
    console.log(`索引${index}${item}`))
}; 
//索引0:1
//索引1:2
//索引2:3

二、处理转换类:filter()map()(返回新数组)

核心:基于原数组处理,返回新数组(不修改原数组),兼具遍历能力。

1. filter():筛选符合条件的元素(“过滤”) 新数组仅包含回调返回true的元素,长度可能小于原数组。

const arr = [123];
// 过滤出不等于2的元素const newArr = arr.filter(item => item !== 2);
console.log(newArr); 
// [1, 3](原数组不变)

2. map():映射转换每一项(“一对一转换”)新数组长度与原数组一致,元素为回调返回的转换后的值。

const arr = [123];
// 每一项拼接字符串
const newArr1 = arr.map(item => `${item}映射后`); 
console.log(newArr1); 
// ["1映射后", "2映射后", "3映射后"]

三、条件判断类:some()every()find()(返回特定值)

核心:基于条件判断,返回布尔值或具体元素,找到结果后可能提前终止遍历。

1. some():判断 “是否存在至少 1 个符合条件的元素”(返回boolean

const arr = [123];
// 数组中是否有值为2的元素?
console.log(arr.some(item => item === 2));
// true(找到即停)

2. every():判断 “是否所有元素都符合条件”(返回boolean

const arr = [123];
// 数组中所有元素都是2吗?
console.log(arr.every(item => item === 2)); 
// false(有一个不符合即停)

3. find():返回 “第一个符合条件的元素”(无则返回undefined

const data = [  
{id:1,name:'haha'},  
{id:2,name:'hehe'}
];
// 找到id=1的对象
console.log(data.find(v => v.id === 1)); 
// {id:1, name:'haha'}(找到即停)

总结:按需选用 —— 遍历用forEach,转换 / 筛选用map/filter,判断 / 查找用some/every/find,效率更高!

微信公众号:

公众号二维码.jpg

微信号.png

QQ群.jpg