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

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>

输出：

总结：

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