两种对象赋值方式避坑

做一个项目（vue2）的时候输入框（el-input）绑定了一个值，这个值应该是字符串类型的，但是后端需要传进去一个数字类型的，所以我在调接口传值的时候需要手动把它变为数字类型，像下面这样，我怕不小心修改了原对象的值，所以我定义了一个新的数组，通过修改这个新数组的值来达到上面的效果

但是我发现！我改了新对象里面的值之后，原对象里面的值也随之发生改变了，因为我是这么进行赋值操作的，我是大傻春

      let _queryParam = this.queryParam
      _queryParam.userType = Number(this.queryParam.userType)

后来我才知道：

这行代码执行的是引用赋值，它并没有创建 this.queryParam 的一个新副本；相反，它仅仅是将 _queryParam 变量设置为指向 this.queryParam 所引用的同一个对象。因此，如果之后通过 _queryParam 或 this.queryParam 修改了对象的属性，这些更改将在这两个变量中都是可见的，因为它们引用的是同一个对象。

之后我改成了下面这样就成功了：

      let _queryParam = { ...this.queryParam }
      _queryParam.userType = Number(this.queryParam.userType)

对这段代码的解释如下：

这行代码使用对象展开运算符来创建一个 this.queryParam 的浅拷贝。这意味着它会创建一个新的对象，并将 this.queryParam 中的所有可枚举属性复制到新对象中。然而，重要的是要注意，这种拷贝是浅层的：如果 this.queryParam 的某个属性值是一个对象或数组，那么新对象中的对应属性将仍然引用相同的对象或数组。因此，对于这种嵌套的对象或数组，修改它们的内容将影响原始对象和新对象中的对应属性（因为它们引用的是同一个嵌套对象或数组）。

总结来说：

• 第一行代码没有进行拷贝，而是创建了一个新的变量来引用同一个对象。
• 第二行代码创建了一个新对象，并将原始对象的属性复制到新对象中，但这种拷贝是浅层的，对于嵌套的对象或数组不会创建副本。