js里forEach与map循环的区别及如何用

forEach与map循环有什么区别呢,又该如何使用呢,其实存在即必要,也不用管什么底层代码的写法,理解浅一点,因为map循环会开辟新的空间存储数据,理论会慢一点,但如果你真的需要时你即使使用f...

forEach与map循环有什么区别呢,又该如何使用呢,其实存在即必要,也不用管什么底层代码的写法,理解浅一点,因为map循环会开辟新的空间存储数据,理论会慢一点,但如果你真的需要时你即使使用forEach也会自己去开辟空间。


<script type="text/javascript">
	    	let arr1=[1,2,3,4,5,6];
			let data1 = arr1.forEach((data)=>{
				return data*data
			})
			
			let arr2=[1,2,3,4,5,6];
			let data2 = arr2.map((data)=>{
				return data*data
			})
			console.log('------第一个区别,forEach没有return返回值,返回为undefined,map正常-------')
			console.log(data1)
			console.log(data2)
			
			// 看下数据有没有改变
			let arr3=[1,2,3,4,5,6];
			let data3 = arr3.forEach((data)=>{
				data+='44'
			})
			
			let arr4=[1,2,3,4,5,6];
			let data4 = arr4.map((data)=>{
				data+='55'
			})
			console.log('------看下arr1 与 arr2数据发现没有被改变------')
			console.log(arr3)
			console.log(arr4)
			
			
			// map与forEach都有三个参数,分别是当前数据,索引值与当前循环的数组
			let arr5=[1,2,3,4,5,6];
			arr5.forEach((data,index,arr)=>{
				arr[index]*=arr[index]
			})
			
			let arr6=[1,2,3,4,5,6];
			arr6.map((data,index,arr)=>{
				arr[index]*=arr[index]
			})
			console.log('------都改变了原始数据-------')
			console.log(arr5)
			console.log(arr6)
			
			
			// 当成普通for循环用是肯定没问题的
			let arr7=[1,2,3,4,5,6];
			let arr8=[1,2,3,4,5,6];
			arr7.forEach((data,index,arr)=>{
				arr7[index]*=arr7[index]
			})
			arr8.forEach((data,index,arr)=>{
				arr8[index]*=arr8[index]
			})
			console.log('----------当成普通for循环使用---------')
			console.log(arr7)
			console.log(arr8)
			
	    </script>


输出:

attachments-2021-07-0UtZW7uD60f4ff110f5a1.png


总结:

从以上例子可以看出map与forEach循环基本没有太大的区别,当然这是在不考虑底层实现原理的前提,其实我们也没有必要纠结这两个谁快谁慢,测试执行速度也没什么太大意义,因为我们要考虑这两种循环的设计初衷,存在既有必要,map循环就是比forEach多出了return值,也不用管底层怎么实现,如果需要在不改变原始数据并需要得出一个改变后的新数据,那么就用map,相反则forEach

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
admin
admin

633 篇文章

作家榜 »

  1. admin 633 文章
  2. 粪斗 185 文章
  3. 王凯 92 文章
  4. 廖雪 78 文章
  5. 牟雪峰 12 文章
  6. 李沁雪 9 文章
  7. 全易 2 文章
  8. thc1214 0 文章