JavaScript中复制对象或数组，使其在数据改变后不影响原数据属性或元素的方法

​
在JavaScript中，对象是通过引用传递的，而不是通过值传递的。这意味着当你将一个对象赋值给另一个变量时，它们实际上引用的是同一个对象，而不是创建一个新的对象副本。因此，如果你修改了拷贝对象的属性，源对象的相应属性也会发生变化。

要解决这个问题，你可以使用一些方法来创建对象的副本，确保修改副本对象的属性不会影响源对象的属性。下面是几种常见的方法：

1. 使用Object.assign()方法：

const objA = { prop: 1 };
const objB = Object.assign({}, objA);
objB.prop = 2;
console.log(objA.prop); // 输出1
console.log(objB.prop); // 输出2

2. 使用扩展运算符（…）：

const objA = { prop: 1 };
const objB = { ...objA };
objB.prop = 2;
console.log(objA.prop); // 输出1
console.log(objB.prop); // 输出2

3. 使用JSON.parse()和JSON.stringify()方法：

const objA = { prop: 1 };
const objB = JSON.parse(JSON.stringify(objA));
objB.prop = 2;
console.log(objA.prop); // 输出1
console.log(objB.prop); // 输出2

如果你想修改数组中的对象，而不影响原始对象，可以使用类似的方法来创建数组的副本。下面是几种常见的方法：

1. 使用Array.from()方法：

const arrA = [{ prop: 1 }, { prop: 2 }, { prop: 3 }];
const arrB = Array.from(arrA, obj => ({ ...obj }));
arrB[0].prop = 4;
console.log(arrA[0].prop); // 输出1
console.log(arrB[0].prop); // 输出4

2. 使用map()方法：

const arrA = [{ prop: 1 }, { prop: 2 }, { prop: 3 }];
const arrB = arrA.map(obj => ({ ...obj }));
arrB[0].prop = 4;
console.log(arrA[0].prop); // 输出1
console.log(arrB[0].prop); // 输出4

3. 使用JSON.parse()和JSON.stringify()方法：

const arrA = [{ prop: 1 }, { prop: 2 }, { prop: 3 }];
const arrB = JSON.parse(JSON.stringify(arrA));
arrB[0].prop = 4;
console.log(arrA[0].prop); // 输出1
console.log(arrB[0].prop); // 输出4

这些方法都可以创建原始数组的副本，确保修改副本数组中的对象不会影响原始数组中的对象。根据你的需求选择适合的方法即可。

原文引自： https://devv.ai/search?threadId=d4apqk6j83r4

​