.forEach() 和 .map()的使用及区别是什么？
forEach()和map()方法通常用于遍历Array元素
定义
- forEach(): 针对每一个元素执行提供的函数(executes a provided function once for each array element)。除了抛出异常以外，没有办法中止或跳出 forEach() 循环。如果你需要中止或跳出循环，forEach() 方法不是应当使用的工具。
- map(): 创建一个新的数组，其中每一个元素由调用数组中的每一个元素执行提供的函数得来(creates a new array with the results of calling a provided function on every element in the calling array)。map 方法会给原数组中的每个元素都按顺序调用一次 callback 函数。callback 每次执行后的返回值（包括 undefined）组合起来形成一个新数组。 callback 函数只会在有值的索引上被调用；那些从来没被赋过值或者使用 delete 删除的索引则不会被调用。
forEach()方法
参数：item数组中的当前项，index当前项的索引，第三个参数原始数组；
案例：
<template>
<div id="app">
<button @click="getForEach">forEach方法</button>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
}
},
mounted(){
},
methods:{
getForEach(){
const numbers = [1, 2, 3, 4, 5];
// 使用 forEach()
//基本使用
numbers.forEach((item,index,data) => {
console.log(item,index,data)
})
//forEach返回值是什么呢？是否有返回值？
let res = numbers.forEach((item,index,data) => {
console.log(item,index,data)
})
console.log('返回值',res); // undefined
//forEach方法会不会更改原数组呢？或者怎么改变原数组呢？
let list = [
{ id:1,name:'末晨曦吖' },
{ id:2,name:'黎明前的黑暗' },
]
list.forEach((item,index,data) => {
if(item.id == 1){
item.name = '风带不走落寞' //可以更改原数组
// item = { id:1,name:'风带不走落寞' } //不可以更改原数组
}
})
console.log('是否更改原数组',list);
}
}
}
</script>
<style scoped>
</style>
map()方法
参数：item数组中的当前项，index当前项的索引，第三个参数原始数组；
<template>
<div id="app">
<button @click="getMap">map方法</button>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
}
},
mounted(){
},
methods:{
getMap(){
const array = [12,24,27,23,26];
const res = array.map((item,index,data) => {
data[index] = item*10; //可更改原数组，但返回值全部为undefined
// return item * 2
})
console.log('原数组',array);
console.log('改变后的数组',res);
}
}
}
</script>
<style scoped>
</style>
由于forEach()返回undefined，所以我们需要传递一个空数组来创建一个新的转换后的数组。map()方法不存在这样的问题，它直接返回新的转换后的数组。在这种情况下，建议使用map()方法。
链接其他方法
map()方法输出可以与其他方法(如reduce()、sort()、filter())链接在一起，以便在一条语句中执行多个操作。
另一方面，forEach()是一个终端方法，这意味着它不能与其他方法链接，因为它返回undefined。
<template>
<div id="app">
<button @click="getMapLink">链接其他方法</button>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
}
},
mounted(){
},
methods:{
getMapLink(){
const array = [12,24,27,23,26];
const res = array.map((item,index,data) => {
return item
}).reduce((total, value) => total + value)
console.log(res);
},
}
}
</script>
<style scoped>
</style>
总结:
- forEach()方法不会返回执行结果，而是undefined。forEach() 被调用时，不会改变原数组，也就是调用它的数组（尽管 callback 函数在被调用时可能会改变原数组）。
- map()方法会分配内存空间存储新数组并返回，map 不修改调用它的原数组本身（当然可以在 callback 执行时改变原数组）。
