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

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

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

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

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

1. 深拷贝
   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，原始对象未受影响
   

2. 使用不可变数据结构

   使用诸如 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