js中map()方法是否改变原数组

发表于 | 分类于

先说结论：当数组元素是基本数据类型时，map()方法不会改变原数组；当数组元素是引用类型时，map()方法会改变原数组。

定义和用法

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。
注意： map() 不会对空数组进行检测。
注意： map() 不会改变原始数组。

发现问题

数组元素为基本数据类型时使用map()方法：

1
2
3
4
5
// 基本数据类型
const arr = [1, 2, 3]
const newArr = arr.map(item =>  item * 2)
console.log(arr) // [ 1, 2, 3 ]
console.log(newArr) // [ 2, 4, 6 ]

数组元素为引用数据类型时使用map()方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 基本数据类型
const arr = [{
    name: 'a'
}, {
    name: 'b'
}, {
    name: 'c'
}]
const newArr = arr.map(item => {
    item.age = 10
    return item
})
console.log(arr)
// [ { name: 'a', age: 10 }, { name: 'b', age: 10 }, { name: 'c', age: 10 } ]
console.log(newArr)
// [ { name: 'a', age: 10 }, { name: 'b', age: 10 }, { name: 'c', age: 10 } ]

可以看到数组元素为对象时使用map()方法后原数组也跟着变化了，原因是因为基本类型传值是复制，引用类型传值是引用

解决方法

比如数组元素为对象时map()方法中处理函数就返回一个新的对象：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const arr = [{
    name: 'a'
}, {
    name: 'b'
}, {
    name: 'c'
}]
const newArr = arr.map(item => {
    return {
        ...item,
        age: 10
    }
})
console.log(arr)
// [ { name: 'a' }, { name: 'b' }, { name: 'c' } ]
console.log(newArr)
// [ { name: 'a', age: 10 }, { name: 'b', age: 10 }, { name: 'c', age: 10 } ]