二.forEach与map的区别

1.相同点

1）都是循环遍历数组中的每一项；

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

3）每次执行匿名函数时都有三个参数：item(当前项)、index(数组)、arr(原数组)

2.区别

1）forEach没有返回值，map有返回值

2）如果数组元素是基本类型，forEach会改变原数组，map不会改变原数组；如果数组元素是引用类型，则都会改变原数组

基本数据类型：

let arr = [ 1,2,3,4]
let arr1 = arr.map((item)=>{
  return item * 2
})
console.log('基本数据类型 map:',arr, arr1)

//输出："基本数据类型 map:", [1, 2, 3, 4], [2, 4, 6, 8]
//输出可见：map不改变原数组，会返回一个新数组

let arr = [ 1,2,3,4]
let arr1 = arr.forEach((item)=>{
item = item * 2
})
console.log('基本数据类型 forEach:',arr, arr1)

//输出："基本数据类型 forEach:", [1, 2, 3, 4], undefined
//输出可见：forEach不会改变原数组，不会返回新数组

引用数据类型：

let arr = [
{ name: 'Yulia', age: 26 },
{ name: 'Claude', age: 30 },
]
let arr1 = arr.map((item)=>{
item.age = 1
return item
})
console.log('引用数据类型 map 原数组', arr)
console.log('引用数据类型 map 返回数据', arr1)

//输出： 
//"引用数据类型 map 原数组", [{ age: 1, name: "Yulia" }, { age: 1, name: "Claude" }]
//输出：
//"引用数据类型 map 返回数据", [{ age: 1, name: "Yulia" }, { age: 1, name: "Claude" }]

//输出可见：引用类型map会改变原数组，也会返回一个新数组
//不改变原数组的情况下返回新数组：
let list = [
{ name: 'Yulia', age: 26 },
{ name: 'Claude', age: 30 },
]
let list2 = list.map((item)=>{
return { ...item, age: 2 }
})
console.log('引用数据类型 map 原数组', list)
console.log('引用数据类型 map 返回数据', list2)

//输出： 
//"引用数据类型 map 原数组", [{ age: 26, name: "Yulia" }, { age: 30, name: "Claude" }]
//输出：
//"引用数据类型 map 返回数据", [{ age: 2, name: "Yulia" }, { age: 2, name: "Claude" }]

let arr = [
{ name: 'Yulia', age: 26 },
{ name: 'Claude', age: 30 },
]
let arr1 = arr.forEach((item)=>{
    item = {...item, age: 3}
})
console.log('引用数据类型 map 原数组', arr)
console.log('引用数据类型 map 返回数据', arr1)

//输出： 
//"引用数据类型 forEach 原数组", [{ age: 26, name: "Yulia" }, { age: 30, name: "Claude" }]
//输出：
//"引用数据类型 forEach 返回数据", undefined

//输出可见：引用类型forEach修改整个对象不会改变原数组，不会返回任何数据
//改变原数组的情况：修改对象中的某个属性
let list = [
{ name: 'Yulia', age: 26 },
{ name: 'Claude', age: 30 },
]
let list2 = list.forEach((item)=>{
    item.age = 3
})
console.log('引用数据类型 forEach 原数组', list)
console.log('引用数据类型 forEach 返回数据', list2)

//输出： 
//"引用数据类型 forEach 原数组", [{ age: 3, name: "Yulia" }, { age: 3, name: "Claude" }]
//输出：
//"引用数据类型 forEach 返回数据", undefined