js map修改数组

注意用红框里面的那一句话，一直以来，我也是觉得map()方法是不会改变原始数组的（面试的时候被问过），直到在实际项目中，被同事的代码坑过不止一次：

这段代码不难理解，相信有时候你也会看到这样类似的代码。先不用管 traniningexpList代表什么意思，按照菜鸟教程的说法， traniningexpList是不会被改变的，然而情况真的是这样子吗？别急，我们写一段代码测试一下。

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]

可以看到，item虽然重新被赋值成了item * 3，但最后打印的结果显示arr并没有被改变。但事情并没有那么简单，我们再来测试一下当数组为对象数组的情况。

const arr = [
  { name: 'Tom', age: 16 },
  { name: 'Aaron', age: 18 },
  { name: 'Denny', age: 20 }
]
const result = arr.map(item => {
  item.age = item.age + 2;  // 将他们的年龄都加2
  return item
});
console.log('arr', arr);//"[{"name":"Tom","age":18},{"name":"Aaron","age":20},{"name":"Denny","age":22}]"
console.log('result', result);//[{"name":"Tom","age":18},{"name":"Aaron","age":20},{"name":"Denny","age":22}]"

可以看到，原始数组 arr竟然被改变了! 通过上面的例子我们可以得出结论，“map()不会改变原始数组”这句话并不严谨。而应该是“ 当数组中元素是值类型，map不会改变原数组；当是引用类型，则可以改变原数组”。（这句话参考了掘金上的一篇文章： forEach、map、filter、find、sort、some等易错点整理）

下面再贴一下MDN上关于map方法的解释：

map 不修改调用它的原数组本身 （当然可以在 callback 执行时改变原数组）。

这就结束了吗？大家有没有发现，其实我们上面的代码，都有一个共同的特点，那就是直接修改了每个item的属性（如果item是一个对象），这是导致原数组的改变的根本原因，但是在实际项目中，我们是不建议这么做的！

map方法体现的是数据不可变的思想。该思想认为所有的数据都是不能改变的，只能通过生成新的数据来达到修改的目的，因此直接对数组元素或对象属性进行操作的行为都是不可取的。

正确的做法应该是声明一个新变量来存储map的结果，而不是去修改原数组。

const arr1 = [
  { name: 'Tom', age: 16 },
  { name: 'Aaron', age: 18 },
  { name: 'Denny', age: 20 }
]
const result1 = arr1.map(item => ({
  ...item,
  age: item.age + 2
}));
console.log('arr1', arr1);
console.log('result1', result1);

完。

转载于:https://juejin.im/post/5cb044c6e51d456e442ff302

猜你喜欢