js中map方法到底是否会改变原始数组？

作者：管理员 2019-08-16 16:40:07 分类：JavaScript 阅读（11372） 4

map方法应该还是比较常见的，和forEach、filter齐头并列，不在此说几个方法的区别，只谈此方法我们写代码时候可能遇到的坑。如题：js中map方法到底是否会改变原始数组？

文档api

数组是值类型

1
2
3
4
5
6
7

const arr = [1, 2, 3]
const result = arr.map(item => {
item = item * 3;
return item;
});
console.log('arr', arr); // [1, 2, 3]
console.log('result', result); // [3, 6, 9]

数组值是引用类型，例如对象

1
2
3
4
5
6
7
8
9
10

const arr = [
{ data: 1 },
{ data: 1 },
{ data: 1 }
]
const result = arr.map(item => {
item.data= item.data+ 2;
return item
});
console.log('arr', arr); //原数组被改变，所有item下的data都等于3

小结

我不能说文档不对，否则有人喷子来抬杠。只能说文档描述的有迷惑性，map()不会改变原始数组”这句话并不严谨。而应该是“当数组中元素是值类型，map不会改变原数组；当是引用类型，则可以改变原数组。

map方法体现的是数据不可变的思想。该思想认为所有的数据都是不能改变的，只能通过生成新的数据来达到修改的目的，因此直接对数组元素或对象属性进行操作的行为都是不可取的，个人认为，如果你遇到类似场景，你完全可以使用forEach来替代。如果你执意想用map，又不想违背原数组被改变的初衷，可以考虑下面方法，在原数组上去追加，如下：

1
2
3
4
5
6
7
8
9
10
11

const arr = [
{ data: 1 },
{ data: 1 },
{ data: 1 }
]
const newArry= arr.map(item => ({
...item,
data: item.data+ 2 //不直接通过item.data = item.data+ 2
}));
console.log('arr', arr);
console.log('newArry', newArry);

本站所有文章、图片、资源等如无特殊说明或标注，均为来自互联网或者站长原创，版权归原作者所有；仅作为个人学习、研究以及欣赏！如若本站内容侵犯了原著者的合法权益，可联系我们进行处理，邮箱：343049466@qq.com

赞(14) 打赏

标签：

map方法

上一篇：Es6中padStart()、padEnd()字符串补位方法

下一篇：未知高度div在屏幕上下左右居中fixed固定定位

js中map方法到底是否会改变原始数组？

文档api

数组是值类型

数组值是引用类型，例如对象

小结

相关推荐

共 4 条评论关于"js中map方法到底是否会改变原始数组？"

点击取消