本文详细解析前端JavaScript中for、forEach和map三种遍历方式的使用场景与差异。通过代码示例展示forEach不支持break及异步等待的特性，以及map在生成新数组、数据清洗、属性增删改和异步请求同步化处理中的应用，并对比了传统for循环与forEach的性能表现，帮助开发者根据实际需求选择最优遍历方案。
title: 前端不同类型的for循环遍历——foreach、map date: 2025-01-04 11:02:17 tags: javascript
前端不同类型的for循环遍历
在实际开发中，后端返回的数据结构往往无法直接满足前端展示或逻辑处理的需求。例如，数据对象中的值被用作了键名，或者需要根据数组中某个对象的特定属性来筛选或定位目标对象。此时，高效的数组遍历方法显得尤为重要。
一、for与foreach
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 计算for循环遍历所需要的相关的时间的长短
let arrs = [...Array(99999999).keys()]
let total = 0
let time = 0
let starTime = Date.now()
for (let index = 0; index < arrs.length; index++) {
total++
}
let endTime = Date.now();
time = endTime-starTime;
console.log("for循环遍历共计消耗时间："+ time+"ms");
total = 0
starTime = Date.now()
arrs.forEach(element => {
total++
});
endTime = Date.now();
time = endTime-starTime;
console.log("foreach循环遍历共计消耗时间："+ time+"ms");
</script>
</body>
</html>
通过实际测试可以发现，不同遍历方式的执行效率存在显著差异，具体测试结果如下。
注意：
.forEach()方法不支持使用break语句来终止循环，但可以使用return来结束当前迭代。
.forEach()方法不支持异步等待（async/await），它会直接跳过其中的异步同步化请求操作，导致逻辑执行顺序不符合预期。
二、map
1.基础遍历
使用.map方法可以遍历数组，同时获取数组元素、下标以及当前数组本身。
let arr = [1,2,3,4,5,6];
arr.map((item,index,arr)=>{
console.log(item,index,arr);
})
2.简单生成新数组
return语句用于每次返回一个子元素（如果代码简单，也可以省略return），从而避免复杂的push操作。
let arr = [1,2,3,4,5,6];
//item表示当前的元素，index表示下标，arr当前数组的的相关数据
let newArr = arr.map(item=>{
return item*2
})
//2,4,6,8,10,12
console.log(newArr);
3.清洗对象数组数据
操作数组对象中的相关数据，可用于清洗数据
let arr = [{name:"张三",age:18},{name:"李四",age:22},{name:"王五",age:23},]
let newArr = arr.map(item=>{
return item.name
})
//可以仅遍历出了自己想要的属性的数组
console.log(newArr); // ['张三', '李四', '王五']
4.在数组对象中追加属性、更改属性值
…三个点属于es6新特性，就是用来展开对象中的所有属性的简写，我们是可以复写相关的属性的，不影响使用。
let arr = [{name:"张三",age:18},{name:"李四",age:22},{name:"王五",age:23},]
let newArr = arr.map(item=>{
return {
...item,//es6新语法添加所有属性
age:`${item.age}岁`,//更改值
class:1 //添加新属性方法
}
})
console.log(newArr);
简写方法 ，不写return的时候的加上一个小括号来包裹相关的属性。
let newArr = arr.map(item=>({...item,age:`${item.age}岁`,class:1}))
相关的结果如下所示
5.进行属性名称的解构替换
假如说我们要将name这个属性名称改成uname，可以使用map进行相关的解构替换。这样直接使用一个{属性}，可以直接使用，不用再使用item进行相关的调用。
let arr = [{name:"张三",age:18},{name:"李四",age:22},{name:"王五",age:23},]
let newArr = arr.map(({name,age})=>{return{ uname:name,ages:age}})
console.log(newArr);
6.异步请求，同时展示优化
很多时候起哦们去要请求后端接口拿到数据，但是请求接口是异步请求，但是又有相关的需求要同时展示，这个时候就可以利用map添加参数进行异步请求同步化，再使用promise.all一次处理相关的所有数据。
总结
到此这篇关于前端for循环遍历foreach、map使用方法的文章就介绍到这了,更多相关前端for循环遍历foreach、map使用内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！