当前位置: 首页 > 面试题库 >

如何在javascript中进行深度克隆

谷梁德容
2023-03-14
问题内容

您如何深度克隆Javascript对象?

我知道有很多基于类似的框架的功能JSON.parse(JSON.stringify(o))$.extend(true, {}, o)但是我不想使用类似的框架。

创建深度克隆的最优雅或最有效的方法是什么。

我们确实关心诸如克隆数组之类的边缘情况。不打破原型链,处理自我参考。

我们不在乎是否支持DOM对象的复制,因为.cloneNode存在该原因。

正如我主要想在node.js使用V8引擎的ES5功能中使用深度克隆一样。

[编辑]

在有人建议我之前,先通过原型继承对象创建副本与 克隆 副本之间存在明显的区别。前者使原型链一团糟。

[进一步编辑]

阅读完您的答案后,我发现了一个令人讨厌的发现,即克隆整个对象是非常危险且困难的游戏。以以下基于闭包的对象为例

var o = (function() {
     var magic = 42;

     var magicContainer = function() {
          this.get = function() { return magic; };
          this.set = function(i) { magic = i; };
     }

      return new magicContainer;
}());

var n = clone(o); // how to implement clone to support closures

有什么方法可以编写用于克隆对象的克隆函数,在克隆时具有相同的状态,但是如果不在oJS中编写JS解析器就无法更改其状态。

现实世界中不再需要这种功能。这仅仅是学术上的兴趣。


问题答案:

这实际上取决于您要克隆的内容。这是真正的JSON对象还是JavaScript中的任何对象?如果您想进行任何克隆,可能会给您带来麻烦。哪个麻烦
我将在下面解释它,但是首先,是一个代码示例,该示例克隆对象文字,任何基元,数组和DOM节点。

function clone(item) {
    if (!item) { return item; } // null, undefined values check

    var types = [ Number, String, Boolean ], 
        result;

    // normalizing primitives if someone did new String('aaa'), or new Number('444');
    types.forEach(function(type) {
        if (item instanceof type) {
            result = type( item );
        }
    });

    if (typeof result == "undefined") {
        if (Object.prototype.toString.call( item ) === "[object Array]") {
            result = [];
            item.forEach(function(child, index, array) { 
                result[index] = clone( child );
            });
        } else if (typeof item == "object") {
            // testing that this is DOM
            if (item.nodeType && typeof item.cloneNode == "function") {
                result = item.cloneNode( true );    
            } else if (!item.prototype) { // check that this is a literal
                if (item instanceof Date) {
                    result = new Date(item);
                } else {
                    // it is an object literal
                    result = {};
                    for (var i in item) {
                        result[i] = clone( item[i] );
                    }
                }
            } else {
                // depending what you would like here,
                // just keep the reference, or create new object
                if (false && item.constructor) {
                    // would not advice to do that, reason? Read below
                    result = new item.constructor();
                } else {
                    result = item;
                }
            }
        } else {
            result = item;
        }
    }

    return result;
}

var copy = clone({
    one : {
        'one-one' : new String("hello"),
        'one-two' : [
            "one", "two", true, "four"
        ]
    },
    two : document.createElement("div"),
    three : [
        {
            name : "three-one",
            number : new Number("100"),
            obj : new function() {
                this.name = "Object test";
            }   
        }
    ]
})

现在,让我们讨论开始克隆REAL对象时可能遇到的问题。我现在说的是关于您通过执行类似操作创建的对象

var User = function(){}
var newuser = new User();

当然,您可以克隆它们,这不是问题,每个对象都公开构造函数属性,并且可以使用它来克隆对象,但是它并不总是有效。您也可以for in对这个对象做简单的事情,但是它朝着相同的方向发展-麻烦。我还在代码中包含了克隆功能,但if( false )语句未将其包含在内。

那么,为什么克隆会很痛苦呢?好吧,首先,每个对象/实例都可能具有某种状态。您永远无法确定您的对象没有私有变量,如果是这种情况,通过克隆对象,您就可以破坏状态。

想象没有状态,那很好。然后我们还有另一个问题。通过“构造函数”方法进行克隆将给我们带来另一个障碍。这是一个参数依赖项。您永远无法确定创建此对象的人没有这样做,

new User({
   bike : someBikeInstance
});

在这种情况下,您很不走运,可能在某些上下文中创建了someBikeInstance,并且该上下文对于克隆方法而言是未知的。

那么该怎么办?您仍然可以执行for in解决方案,并将此类对象像普通对象文字一样对待,但也许根本不克隆此类对象,而只是传递该对象的引用是一种主意吗?

另一个解决方案是-
您可以设置一个约定,必须克隆的所有对象都应自己实现这一部分,并提供适当的API方法(例如cloneObject)。cloneNode正在为DOM
做些什么。

你决定。



 类似资料:
  • 我正在尝试将应用程序深入链接到我的网站,但我不知道如何让它进入计算机上的常规旧Instagram,然后再进入Android或iOS设备上的应用程序。我知道这些链接有效,因为我单独尝试过。

  • 本文向大家介绍JavaScript浅层克隆与深度克隆示例详解,包括了JavaScript浅层克隆与深度克隆示例详解的使用技巧和注意事项,需要的朋友参考一下 1 相关知识点 浅克隆就是将栈内存中的引用复制一份,赋给一个新的变量,本质上两个指向堆内存中的同一地址,内容也相同,其中一个变化另一个内容也会变化。 深克隆就是创建一个新的空对象,开辟一块内存,然后将原对象中的数据全部复制过去,完全切断两个对象

  • 我有以下XML文件,希望使用PugiXML库将其解析为C++: 我用C++创建了一个图结构。现在的任务是从XML文件到C++图结构。这是我目前为止最好的尝试: 这段代码的问题在于它只处理XML节点“graph”。并不是所有的孩子都能接受。我发现一个可能的解决方案是使用深度优先遍历XML树。您可以在这里找到相应的文档(查找“Simple Walker”示例)。现在我被困住了,我不知道如何实现“简单的

  • 问题内容: 在尝试了几种实现方式以进行深度比较并复制可序列化的JSON对象之后,我注意到最快的往往是: 不过,我觉得这很欺骗。就像我会发现一些困扰我未来的问题。使用这些可以吗? 问题答案: JavaScript不保证键的顺序。 如果以相同的顺序输入它们,则这种方法在大多数情况下会起作用,但并不可靠。 同样,对于深度相等但以不同顺序输入其键的对象,它将返回false:

  • 问题内容: 在Objective-C中,可以通过以下方式进行深度复制: 如何在Swift中进行深度复制? 问题答案: 深拷贝 您的示例不是在StackOverflow上讨论的深层副本。获得对象的真实深层副本通常需要 迅速复制 该协议是提供对象副本的Objective- C方法,因为一切都是指针,并且您需要一种管理任意对象副本生成的方法。对于Swift中的任意对象副本,您可以提供一个便利的初始化程序

  • deepClone 对象深度克隆 注意 由于JS对象包括的范围非常广,加上ES6又有众多的新特性,很难、也没必要做到囊括所有的类型和情况,这里说的"对象",指的是普通的对象,不包括修改对象原型链, 或者为"Function","Promise"等的情况,请留意。 场景: 我们平时可能会遇到需要通过console.log打印一个对象,至执行打印的时刻,此对象为空,后面的逻辑中对此对象进行了修改赋值,