数组map和forEach比较
问题来源:面试过程中,面试官问我数组方法map和forEach有什么区别?
本人遂答:map会返回新数组,forEach不会。
面试官微微一笑,“还有呢?”
"没有了吧"
面试官:“两者会不会改变原数组?”
我:“不会”
“确定?”
“嗯。。。”
“回去等通知吧”
遂懵逼,不服,尝试一波。
- 普通基本类型数组
let arr = [1, 2, 3 , 4]
let arrmap = arr.map(item => {
item = item+1
return item
})
console.log(arr)
console.log(arrmap)
let arrEach = arr.forEach(item => {
item = item+1
return item
})
console.log(arr)
console.log(arrEach)
// 输出
// console.log(arr) [1, 2, 3, 4]
// console.log(arrmap) [2, 3, 4, 5]
// console.log(arr) [1, 2, 3, 4]
// console.log(arrEach) undefined
两个方法对item赋值并没有改变原数组。
- 引用类型数组修改直接赋值
let arr3 = [
{value:1},
{value:2},
{value:3},
{value:4},
]
let arr3map = arr3.map(item => {
item = {
name: 'change'
}
return item
})
console.log(arr3)
console.log(arr3map)
let arr3Each = arr3.forEach(item => {
item = {
name: 'change'
}
return item
})
console.log(arr3)
console.log(arr3Each)
// 输出
// console.log(arr3) [{"value": 1},{"value": 2},{ "value": 3},{"value": 4}]
// console.log(arr3map) [{name: 'change'},{name: 'change'},{name: 'change'},{name: 'change'}]
// console.log(arr3) [{"value": 1},{"value": 2},{ "value": 3},{"value": 4}]
// console.log(arr3Each) undefined
直接修改引用对象,forEach和map方法也不会修改原数组。
- 引用类型数组修改子属性
let arr2 = [
{value:1},
{value:2},
{value:3},
{value:4},
]
let arr2map = arr2.map(item => {
item.value = item.value+1
return item
})
console.log(arr2)
console.log(arr2map)
// 输出
// console.log(arr2) [{"value": 2},{"value": 3},{"value": 4},{"value": 5}]
// console.log(arr2map) [{"value": 2},{"value": 3},{"value": 4},{"value": 5}]
map方法修改了原数组,莫非面试官说的是这种情况?
let arr2 = [
{value:1},
{value:2},
{value:3},
{value:4},
]
let arr2Each = arr2.forEach(item => {
item.value = item.value+1
return item
})
console.log(arr2)
console.log(arr2Each)
// 输出
// console.log(arr2) [{"value": 2},{"value": 3},{"value": 4},{"value": 5}]
// console.log(arr2Each) undefined
forEach方法同样也改变了原数组
结论
所以map和forEach中的值都是浅拷贝,相同的操作下map和forEach对原数组的影响是一样,并不存在map不会改变原数组,forEach会改变原数组一说。