摘要:map和forEach是数组的操作方法,是Vue重要的前置基础知识,在前端领域属于重要的知识点

用途:

遍历数组的方法,用来遍历一个数组并对数组做出操作

相同点:

两者的相同点: (1) 都是循环遍历数组中的每一项

2）每次执行匿名函数都支持三个参数，参数分别为item(当前每一项)，index(索引值)，arr(原数组)一般不写arr这个参数

3）匿名函数中的this都是指向window

(4) 循环次数===数组长度

两者的不同点:

(1) map需要有返回值而forEach不能有返回值

(2) map在遍历数组的过程中会自动创建一个新的空数组,遍历求和时自动将遍历的元素添加到空的数组中,而forEach则只是进行遍数组

(3) map的回调函数的内部返回值return 返回的是新数组,forEach的回调则没有return的返回值

(4) map的方法自身的返回值为 return 之后的映射的数组,而forEach则没有

(5)map进行对数组的操作的时候,最后的结果不影响原数组,而forEach则是对原数组数据的更改

二者的应用场景:

forEach可用于单选多选框的绑定 ` let arr = [ { name:'商品1', select:false }, { name:'商品2', select:true }, { name:'商品3', select:false }, { name:'商品4', select:false }, ]

// 需求： 全选(设置每一个元素的select值为true)
arr.forEach( (item,index) => {
  item.select = true
} )
console.log( arr )

map可用于对数组的批量操作 let arr = [ 20,50,88,60,56 ]

// 箭头函数的函数体只有一行,则可以省略大括号。 此时也必须要省略return
const res =  arr.map( item => item*0.5 )
console.log(res)

` 需求不同应用场景不同,需要灵活运用