如何在vue中不参考复制json object？

Question

在我的组件中，我声明了一些这样的数据：

data() {
    return {
        defaultValue: {json object with some structure},
        activeValue: {}
        ...

并在组件方法中复制此值：

this.activeValue = this.defaultValue

但问题是，在更改this.activeValue值后， this.defaultValue也发生了变化。

如果我使用Object.freeze(this.defaultValue)并尝试更改this.activeValue我得到错误 - object 不可写。

我如何复制数据但没有参考？

Answer 1

如果你有简单的 object，最快最简单的方法就是使用 JSON.parse 和 JSON.stringify；

const obj = {};

const objNoReference = JSON.parse(JSON.stringify(obj));

Answer 2

this.activeValue = { ...this.defaultValue }

如果您没有嵌套的 object，使用 ES6 扩展运算符将帮助您进行复制。 如果使用等号 = 等号，它不会创建新的 object，它只会创建一个引用当前 object 的变量（如浅拷贝）。

做一个完整的深拷贝，即使它是嵌套的 object, go ：

 const objNoReference = JSON.parse(JSON.stringify(obj));

正如猫头鹰所建议的那样。

单击以阅读更多内容以更好地理解该概念

Answer 3

比使用 JSON.parse, JSON.stringify 更好的方法是：

this.activeValue = {...this.defaultValue}

但某些浏览器 (IE) 本身并不支持此功能，除非与转译器 (babel) 一起使用

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

更新

考虑到您最初的问题是关于 Vue 中的一种方式，vue 中还有一个本机方法：

this.activeValue = Vue.util.extend({}, this.defaultValue)

至于这个答案。

希望这可以帮助！

Answer 4

您可以使用 'JSON.parse and stringify' 或在lodash （下划线、ramda ...）

Answer 5

对象是通过引用分配和复制的。

所有通过复制引用的操作（如添加/删除属性）都在同一个 object 上执行。

要制作“real copy” （克隆），我们可以使用Object.assign进行所谓的“shallow copy” （嵌套对象通过引用进行复制）。

对于“deep cloning” ，请使用loadash库中的 _.cloneDeep(obj)。

Answer 6

还有一个简单的解决方案是将defaultValue: {json object with some structure}与JSON.stringify(defaultValue)在字符串变量中：

var x = JSON.stringify(this.defaultValue);

如果您再次需要它为 JSON object，您可以使用 JSON.parse() 获得它：

var newObject = JSON.parse(x);

object 参考也被破坏了，如果defaultValue值的内容被更改， x将保持不变。

Answer 7

JSON stringify&parse 方法存在一些问题，例如将日期对象转换为字符串。 它也不能处理特殊的数据类型，如Map 、 Set 、 function等......这很容易出现未来的错误。

我使用下面的方法来深拷贝一个 object。

记住！ 这不是克隆的完整应用。 还有更多的数据类型需要处理，比如Blob 、 RegExp等......

  const deepClone = (inObject) => {
            let outObject, value, key

            if (typeof inObject !== "object" || inObject === null) 
                return inObject
            
            if (inObject instanceof Map) {
                outObject = new Map(inObject);
                for ([key, value] of outObject)
                    outObject.set(key, deepClone(value))
            } else if (inObject instanceof Set) {
                outObject = new Set();
                for (value of inObject)
                    outObject.add(deepClone(value))
            } else if (inObject instanceof Date) {
                outObject = new Date(+inObject)
            } else {
                outObject = Array.isArray(inObject) ? [] : {}
                for (key in inObject) {
                    value = inObject[key]
                    outObject[key] = deepClone(value)
                }
            }
            return outObject
        }