浅谈forEach和map循环区别

前言

在JavaScript编程中，循环是不可或缺的工具，可以有效处理和操作数组中的各个元素，JavaScript提供了多种循环方法，其中包括foreach循环和map循环，这两者都是数组常用方法，但他们目的和用法不同，下来详细讲讲这两者不同处

forEach

特点

• 遍历数组中的每个元素

• 为每个元素都执行回调函数

• 无返回值

      var a = [1,2,3,4];
  	var b = a.forEach((item,index)=>{
  		//执行item，index相关代码
  	})
  	console.log(b); //undefined
  

  • 主要用于迭代数组并执行某些操作，但不返回一个新数组。当你只是想对数组的每个元素执行操作，而不关心结果时，如打印每个元素。可以使用forEach循环当前数组。

map

特点

• 遍历数组中的每个元素

• 通过对每个函数调用函数，将每个元素处理为一个新元素，并添加到一个新数组中

• 会返回一个新的数组

  	var c = [1,2,3,4];
  	var d = c.map((item)=>{
  		return item*2
  	});
  	console.log(d);//[2,4,6,8]
  

  • 迭代数组，并对每个元素执行某些操作，然后返回一个新数组，该数组包含与原始数组相同数量的元素（可能已被修改）。当你想基于当前数组再创建一个新数组，比如将当前数组所有元素都*2，可以使用map循环当前数组。

注意

forEach: 不直接改变原始数组，但可以在回调中更改原始数组。

• 当你使用 forEach [遍历数组]时，它不会自动更改数组的内容。但是，在 forEach 的[回调函数]中，你可以手动修改原始数组。

• 1.foreach不会自动更改数组

  	var e = [1,2,3,4];
  	e.forEach((item)=>{
  		item*2
  	})
  	console.log(e);//[1,2,3,4] 
  

• 2.在foreach回调中手动修改数组

  	var f = [1,2,3,4];
  	f.forEach((item,index)=>{
  		f[index] = item*2
  	});
  	console.log(f);//[2,4,6,8] 
  

  • 当前代码使用数组的索引来修改原始数组 f。因此，数组的内容已经更改。