javascript - Javascript Array Map 意外更改了原始数组值

Question

我有创建对象的构造函数

我初始化了一个名为 的数组arr1，调用该函数来生成起始值。

我映射arr1到做arr2

但是我的原件arr1被改变了。为什么是这样？是因为我在初始化数组和事件循环时进行了异步回调吗？

作为参考，我试图从我之前关于画布的帖子中获取想法进行重构

function point(x,y){
  return {x,y}
}

arr1 = [point(1,2), point(3,4)];
console.log(arr1, "arr1");

arr2 = arr1.map(b=>{
  b.x = b.x+2;
  b.y = b.y+2;
  return b;
})
console.log(arr1, "arr1");
console.log(arr2, "arr2");

标签： javascriptarrays

Answer 1

在您的map回调中，您正在直接更改每个对象的属性 ( b)...

b.x = b.x+2;
b.y = b.y+2;

我怀疑你追求的是更不可变的东西

const arr2 = arr1.map(({x, y}) => ({
  x: x + 2,
  y: y + 2
}))

这将创建一个具有 +2 值的新数组，而根本不修改原始数组。

function point(x,y){
  return {x,y}
}

const arr1 = [point(1,2), point(3,4)];
console.log('arr1', arr1);

const arr2 = arr1.map(({x, y}) => ({
  x: x + 2,
  y: y + 2
}))

console.info('arr1', arr1);
console.info('arr2', arr2);