基础！使用map返回一个新的数组要注意哦定义和用法错误示范

110 阅读 0 评论 73 点赞

我是靠谱客的博主炙热紫菜，这篇文章主要介绍基础！使用map返回一个新的数组要注意哦定义和用法错误示范，现在分享给大家，希望可以做个参考。

定义和用法

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

这段话还是比较绕口的，没动脑子的时候，意思就是返回一个新数组呗，结果某次用了map，原变量还没改呢，就发现结果变了，唉呀妈呀，可神奇了。

错误示范

复制代码

1
2
3
4
5
6
7
8
9
let arr = [{a:1,b:2},{a:2,b:3}];
let newArr = arr.map(v => {
    v.a += 1;
    v.b += '1';
    return v
});
console.log(arr); // [{a:2,b:'21'},{a:3,b:'31'}]
console.log(newArr); // [{a:2,b:'21'},{a:3,b:'31'}]
复制代码

随意感受下，很崩溃。

分析

造成这个原因是因为，他返回的数组，就是return了一个处理过的对象啊，那js的引用类型还是毛变化都没有，那个改变(v)，就等于改变了指向同一个地址的v，呵呵了。
那么知道为啥就好办了，首先想到的就是assign
Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
其他的嘛，不加班的那一天再想吧。

复制代码

1
2
3
4
5
6
7
8
9
10
let arr = [{a:1,b:2},{a:2,b:3}];
let newArr = arr.map(v => {
    let v1 = Object.assign({},v);
    v1.a += 1;
    v1.b += '1';
    return v1
});
console.log(arr); // [{a:1,b:2},{a:2,b:3}]
console.log(newArr); // [{a:2,b:'21'},{a:3,b:'31'}]
复制代码