js中forEache()和Map()的区别

Posted 2021-09-11 我想月薪过万

定义剖析

我们首先来看一看MDN上对Map和ForEach的定义：

forEach(): 针对每一个元素执行提供的函数(executes a provided function once for each array element)。

map(): 创建一个新的数组，其中每一个元素由调用数组中的每一个元素执行提供的函数得来(creates a new array with the results of calling a provided function on every element in the calling array)。

案例演示

案例一：使用 forEach() 来操作一个数组

参数剖析

//原数组
let arr_one = [7,8,9]

//value：必需。当前元素  index：可选。当前元素的索引值 arr：可选。当前元素所属的数组对象
arr_one.forEach((value,index,arr)=>{
    console.log(value,index,arr)
})

运行结果如下：

操作元素

//原数组
var arr_one = [7,8,9]

arr_one.forEach((value,index)=>{
    //将原数据 的每个元素 加2
    arr_one[index] += 2
})

console.log(arr_one)

运行结果如下：

也就是说：forEach() 通过回调函数处理原数组数据，无返回值

案例二：使用 map() 来操作一个数组

参数剖析

//原数组
let arr_one = [7,8,9]

//value：必需。当前元素  index：可选。当前元素的索引值 arr：可选。当前元素所属的数组对象
let arr_new = arr_one.map((value,index,arr)=>{
    console.log(value,index,arr)
})

运行结果如下：

 操作元素

//原数组
let arr_one = [7,8,9]

//value：必需。当前元素  index：可选。当前元素的索引值 arr：可选。当前元素所属的数组对象
let arr_new = arr_one.map((value,index,arr)=>{
    return value+2
})

console.log(arr_new)

运行结果如下：

也就是说：map() 通过回调函数处理原数组数据，通过返回值的方式放到一个新数组中，原数组不变