赋值操作，等号左右两边数据同时变化？表格修改弹框数据改变，列表数据同时改变？

本文主要是介绍赋值操作，等号左右两边数据同时变化？表格修改弹框数据改变，列表数据同时改变？，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

首先，赋值操作（使用=）通常不会导致等号左右两侧的变量值发生变化，赋值操作是将等号右侧的变量值赋值给左侧变量，左侧变量发生改变，右侧不会改变，这类赋值操作指的是 值复制。

然而，若等号两侧的变量指向同一个对象（引用类型，如数组、对象等），那么对其中一个变量进行修改会影响另一个，这是因为她们引用的是同一个内存地址，赋值操作是复制了内存地址，而非对象本身，这类赋值操作指的是 引用复制。

在JS的数据类型，通常基本类型（数字、字符串、Boolean）赋值操作都是值复制，引用类型（对象、数组等）赋值操作是引用复制。

怎么解决表格修改弹框数据改变，列表数据同时改变的问题呢（引用复制）？

深拷贝
a. 使用 JSON.parse(), JSON.stringify()

let originalObj = { nested: { value: 1 } };
let copiedObj = JSON.parse(JSON.stringify(originalObj));copiedObj.nested.value = 2;
console.log(originalObj.nested.value); // 输出：1，原始对象未受影响

注意，上述方法有局限性，它不能处理函数、循环引用、undefined、Symbol、BigInt、Date、RegExp等非JSON格式兼容的值

b.使用第三方库（如 lodash、immer、clone-deep 等）

import cloneDeep from 'lodash/cloneDeep';let originalObj = { nested: { value: 1 } };
let copiedObj = cloneDeep(originalObj);copiedObj.nested.value = 2;
console.log(originalObj.nested.value); // 输出：1，原始对象未受影响

c.自定义递归深拷贝函数

function deepCopy(obj) {if (obj === null || typeof obj !== 'object') {return obj;}if (obj instanceof Date) {return new Date(obj);}if (obj instanceof RegExp) {return new RegExp(obj);}let copy = Array.isArray(obj) ? [] : {};for (let key in obj) {if (obj.hasOwnProperty(key)) {copy[key] = deepCopy(obj[key]);}}return copy;
}let originalObj = { nested: { value: 1 } };
let copiedObj = deepCopy(originalObj);copiedObj.nested.value = 2;
console.log(originalObj.nested.value); // 输出：1，原始对象未受影响

使用不可变数据结构

使用诸如 immutable-js、immer 等库提供的不可变数据结构。这些库在内部实现深拷贝的同时，提供了更高效的变更操作，能够在不改变原始数据的前提下返回一个新的状态。这对于React、Redux等需要频繁比较状态差异的应用尤其有用。
```
import produce from 'immer';let originalState = { nested: { value: 1 } };
let nextState = produce(originalState, draft => {draft.nested.value = 2;
});console.log(originalState.nested.value); // 输出：1，原始状态未受影响
console.log(nextState.nested.value); // 输出：2
```