js拓展运算符拷贝问题

项目场景：

项目中分数公式编辑功能，深拷贝数据

---

问题描述

使用React Hooks封装了一个关于分数运算的组件，在接收计算参数props中的parameters对象，oldParams深拷贝对象，更改parameters对象后oldParams的属性值也会随之更改。测试oldParams.current和 parameters 不全等。

  const [, setUpdate] = useReducer((x) => x + 1, 0);
  const changedParams = useRef({} as ComposeParameter);
  const oldParams = useRef({} as ComposeParameter);

  const handleValueChange = (value: number, name: string) => {
    parameters[name].value = value;
    setUpdate();
  };

  useEffect(() => {
    oldParams.current = { ...parameters };
  }, [parameters]);

---

原因分析：

（…）运算符不会对嵌套的数据进行深度拷贝，oldParams.current和 parameters 不全等，但是oldParams.current.xx === parameters.xx 是相等的，由此可见（…）运算符对嵌套对象拷贝的时候类似于浅拷贝。两个对象内存地址不同，但下面的属性指向同一地址。

---

解决方案：

我认为比较简单的方法JSON深拷贝，不然写个深拷贝函数或者重新整理一下数据。

 useEffect(() => {
    oldParams.current = JSON.parse(JSON.stringify(parameters));
  }, [parameters]);