当前位置：首页 > java >正文

学习：各种不同类型的for循环遍历，forEach/map/filter/every/some/includes/reduce的详细用法（1）

java 2025/8/19 5:37:17

2025最新前端学习路线（新手入门-＞全栈进阶）-CSDN博客

https://www.bilibili.com/video/BV12c411k7sv/?spm_id_from=333.1007.top_right_bar_window_history.content.click&vd_source=dc9934dadcb14416025bad748d3f42cd

各种类型的for循环遍历，forEach/map/filter/for...in/for....of/every/some/includes/reduce/find的详细用法_for pair in filter-CSDN博客

1.for循环和forEach循环的性能及异步同步化差异

for循环

性能更高：传统的for循环（包括for...of）通常比forEach有更好的性能
原因：
- for循环是语言基本结构，没有函数调用开销
- forEach每次迭代都是一个函数调用，有额外的堆栈操作
适用场景：大数据量或对性能要求高的循环

forEach

更简洁：函数式编程风格，代码更易读
性能稍低：由于是数组方法，每次迭代都涉及函数调用
适用场景：小数据量或代码可读性优先的情况

<script setup>let arrs = [...Array(9999999).keys()]// console.log("数组" + arrs);let total = 0;// 开始时间let startTime = Date.now();// arrs.forEach(item => {// 	if (item == 10) return;// 	total += item;// })for(let i=0; i<arrs.length; i++){if(i==10) break;total+=i;}// 结束时间let endTime = Date.now();let countTime = endTime - startTime;console.log("计数---->" + total);console.log("消耗时间---->" + countTime);
</script>
<template><view class=""></view>
</template>
<style lang="scss" scoped></style>

for

forEach

异步处理差异

for循环

支持异步：可以配合async/await实现同步化异步操作

forEach

不支持同步化异步：即使使用async函数，forEach会并行执行所有异步操作

2.map()方法循环遍历清洗数据和Promise.all组合

Array.prototype.map() - JavaScript | MDN

之前的方式

	let arrs = [1, 2, 3, 4];let newArrs = [];arrs.forEach(item => {newArrs.push(item * 2)})console.log(newArrs);

map方法

let arrs = [1, 2, 3, 4];let newArrs = arrs.map(item => item * 2)console.log(newArrs);

数组对象

	// 数组对象let arrs = [{name:"华为",price:6999},{name:"苹果",price:9888},{name:"小米",price:4999}]let newArrs =  arrs.map(item=>{return item.name})console.log(newArrs);

解构，原有price:6999改为price:“6999元”，并且新增number属性值为888

	let arrs = [{name:"华为",price:6999},{name:"苹果",price:9888},{name:"小米",price:4999}]let newArrs = arrs.map(item=>({...item,price:item.price+"元",number:888}))console.log(newArrs);

将原数组中属性进行更换

	let arrs = [{key:0,content:"篮球"},{key:1,content:"足球"},{key:2,content:"排球"}];let newArrs = arrs.map(({key,content})=>{return {value:key,text:content}})console.log(newArrs);