JavaScriptでディープクローンする方法

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

オブジェクトを複製する複製関数を作成する方法はありますか？複製時の状態は同じですがo、JSで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など）を提供するという規則を設定することです。cloneNodeDOMに対して何が行われているのか。

あなたが決める。

非常に単純な方法、多分単純すぎる：

var cloned = JSON.parse(JSON.stringify(objectToClone));

JSON.parse(JSON.stringify())それはJSONデータのためのものだったとしてディープコピーJavascriptのオブジェクトへの組み合わせは、無効ハックです。undefinedまたはの値はサポートされていません。JavaScriptオブジェクトをJSONに「ストリング化」（マーシャリング）するときfunction () {}、nullそれらの値は無視されます。

より良い解決策は、ディープコピー機能を使用することです。以下の関数はオブジェクトをディープコピーし、サードパーティライブラリ（jQuery、LoDashなど）を必要としません。

function copy(aObject) {
  if (!aObject) {
    return aObject;
  }

  let v;
  let bObject = Array.isArray(aObject) ? [] : {};
  for (const k in aObject) {
    v = aObject[k];
    bObject[k] = (typeof v === "object") ? copy(v) : v;
  }

  return bObject;
}

循環参照を持つオブジェクトでも機能するES6関数を次に示します。

function deepClone(obj, hash = new WeakMap()) {
    if (Object(obj) !== obj) return obj; // primitives
    if (hash.has(obj)) return hash.get(obj); // cyclic reference
    const result = obj instanceof Set ? new Set(obj) // See note about this!
                 : obj instanceof Map ? new Map(Array.from(obj, ([key, val]) => 
                                        [key, deepClone(val, hash)])) 
                 : obj instanceof Date ? new Date(obj)
                 : obj instanceof RegExp ? new RegExp(obj.source, obj.flags)
                 // ... add here any specific treatment for other classes ...
                 // and finally a catch-all:
                 : obj.constructor ? new obj.constructor() 
                 : Object.create(null);
    hash.set(obj, result);
    return Object.assign(result, ...Object.keys(obj).map(
        key => ({ [key]: deepClone(obj[key], hash) }) ));
}

// Sample data
var p = {
  data: 1,
  children: [{
    data: 2,
    parent: null
  }]
};
p.children[0].parent = p;

var q = deepClone(p);

console.log(q.children[0].parent.data); // 1

セットとマップに関する注意

セットとマップのキーを処理する方法は議論の余地があります。これらのキーは多くの場合プリミティブです（この場合、議論はありません）が、オブジェクトにすることもできます。その場合、問題は次のようになります。これらのキーを複製する必要がありますか？

これが行われるべきであると主張することができるので、それらのオブジェクトがコピーで変更された場合、元のオブジェクトは影響を受けず、その逆も同様です。

一方has、キーを設定/マップする場合、少なくともどちらかが変更される前に、オリジナルとコピーの両方でこれが当てはまる必要があります。（複製プロセス中に作成されたため）コピーが以前に発生したことのないキーを持つSet / Mapである場合は奇妙です。確かに、指定されたオブジェクトがオブジェクトであるかどうかを知る必要があるコードにとって、これはあまり役に立ちません。そのSet / Mapにキーを入力するかどうか。

お気づきのように、私はセカンドオピニオンのほうが多いです。セットとマップのキーは、同じままであるはずの値（多分参照）です。

このような選択肢は、他の（おそらくカスタムの）オブジェクトにも表示されます。クローンされたオブジェクトが特定のケースでどのように動作することが期待されるかに大きく依存するため、一般的な解決策はありません。

Underscore.jsのcontribライブラリライブラリは、呼び出された関数があるスナップショットを深いクローンオブジェクトこと

ソースからの抜粋：

snapshot: function(obj) {
  if(obj == null || typeof(obj) != 'object') {
    return obj;
  }

  var temp = new obj.constructor();

  for(var key in obj) {
    if (obj.hasOwnProperty(key)) {
      temp[key] = _.snapshot(obj[key]);
    }
  }

  return temp;
}

ライブラリがプロジェクトにリンクされたら、関数を呼び出すだけで

_.snapshot(object);

これは私が使っているディープクローニングの方法です。すばらしいと思います。

function deepClone (obj) {
    var _out = new obj.constructor;

    var getType = function (n) {
        return Object.prototype.toString.call(n).slice(8, -1);
    }

    for (var _key in obj) {
        if (obj.hasOwnProperty(_key)) {
            _out[_key] = getType(obj[_key]) === 'Object' || getType(obj[_key]) === 'Array' ? deepClone(obj[_key]) : obj[_key];
        }
    }
    return _out;
}

他の人がこの質問や同様の質問に言及しているように、「オブジェクト」のクローン作成は、一般的な意味で、JavaScriptには疑わしいものです。

しかし、私が「データ」オブジェクトと呼ぶオブジェクトのクラスがあります。つまり、{ ... }リテラルや単純なプロパティ割り当てから単純に構築されたオブジェクト、またはクローンを作成するのが妥当なJSONからデシリアライズされたオブジェクトです。ちょうど今日、私はサーバーから受け取ったデータを5倍に人工的に膨らませて、大きなデータセットで何が起こるかをテストしたかったのですが、オブジェクト（配列）とその子は、正しく機能するために別個のオブジェクトである必要がありました。クローニングにより、これを実行してデータセットを増やすことができました：

return dta.concat(clone(dta),clone(dta),clone(dta),clone(dta));

データオブジェクトのクローンを作成することが多いもう1つの場所は、送信する前にデータモデルのオブジェクトから状態フィールドを削除するホストにデータを送信することです。たとえば、「_」で始まるすべてのフィールドを、オブジェクトが複製されるときにオブジェクトから削除したい場合があります。

これは、サポートする配列と、複製するメンバーを選択するセレクター（「パス」文字列を使用してコンテキストを決定する）を含め、これを一般的に行うために作成したコードです。

function clone(obj,sel) {
    return (obj ? _clone("",obj,sel) : obj);
    }

function _clone(pth,src,sel) {
    var ret=(src instanceof Array ? [] : {});

    for(var key in src) {
        if(!src.hasOwnProperty(key)) { continue; }

        var val=src[key], sub;

        if(sel) {
            sub+=pth+"/"+key;
            if(!sel(sub,key,val)) { continue; }
            }

        if(val && typeof(val)=='object') {
            if     (val instanceof Boolean) { val=Boolean(val);        }
            else if(val instanceof Number ) { val=Number (val);        }
            else if(val instanceof String ) { val=String (val);        }
            else                            { val=_clone(sub,val,sel); }
            }
        ret[key]=val;
        }
    return ret;
    }

null以外のルートオブジェクトを想定し、メンバーを選択しない場合の最も単純で妥当なディープクローンソリューションは次のとおりです。

function clone(src) {
    var ret=(src instanceof Array ? [] : {});
    for(var key in src) {
        if(!src.hasOwnProperty(key)) { continue; }
        var val=src[key];
        if(val && typeof(val)=='object') { val=clone(val);  }
        ret[key]=val;
        }
    return ret;
    }

Los-Dashは、現在Underscore.jsのスーパーセットであり、ディープクローン機能がいくつかあります。

• _.cloneDeep(object)

• _.cloneDeepWith(object, (val) => {if(_.isElement(val)) return val.cloneNode(true)})

  2番目のパラメーターは、複製された値を生成するために呼び出される関数です。

著者自身の答えから：

lodash underscore ビルドは、アンダースコアの最新の安定バージョンとの互換性を確保するために提供されています。

以下の関数は、javascriptオブジェクトをディープクローンする最も効率的な方法です。

function deepCopy(obj){
    if (!obj || typeof obj !== "object") return obj;

    var retObj = {};

    for (var attr in obj){
        var type = obj[attr];

        switch(true){
            case (type instanceof Date):
                var _d = new Date();
                _d.setDate(type.getDate())
                retObj[attr]= _d;
                break;

            case (type instanceof Function):
                retObj[attr]= obj[attr];
                break;

            case (type instanceof Array):
                var _a =[];
                for (var e of type){
                    //_a.push(e);
                    _a.push(deepCopy(e));
                }
                retObj[attr]= _a;
                break;

            case (type instanceof Object):
                var _o ={};
                for (var e in type){
                    //_o[e] = type[e];
                    _o[e] = deepCopy(type[e]);
                }
                retObj[attr]= _o;
                break;

            default:
                retObj[attr]= obj[attr];
        }
    }
    return retObj;
}

var obj = {
    string: 'test',
    array: ['1'],
    date: new Date(),
    object:{c: 2, d:{e: 3}},
    function: function(){
        return this.date;
    }
};

var copyObj = deepCopy(obj);

console.log('object comparison', copyObj === obj); //false
console.log('string check', copyObj.string === obj.string); //true
console.log('array check', copyObj.array === obj.array); //false
console.log('date check', copyObj2.date === obj.date); //false
console.log('object check', copyObj.object === obj.object); //false
console.log('function check', copyObj.function() === obj.function()); //true

このような関数は、もはや現実には必要ありません。これは単なる学術的な興味です。

純粋に演習として、これはより機能的な方法です。ガードブロックをそこに追加することを提案したので、これは@tfmontagueの回答の拡張です。しかし、私がES6に強いられ、すべてのものを機能化しているように感じているのを見て、これが私の短気なバージョンです。配列をマッピングしてオブジェクトを削減する必要があるため、ロジックが複雑になりますが、変更は回避されます。

const cloner = (x) => {
    const recurseObj = x => (typeof x === 'object') ? cloner(x) : x
    const cloneObj = (y, k) => {
        y[k] = recurseObj(x[k])
        return y
    }
    // Guard blocks
    // Add extra for Date / RegExp if you want
    if (!x) {
        return x
    }
    if (Array.isArray(x)) {
        return x.map(recurseObj)
    }
    return Object.keys(x).reduce(cloneObj, {})
}
const tests = [
    null,
    [],
    {},
    [1,2,3],
    [1,2,3, null],
    [1,2,3, null, {}],
    [new Date('2001-01-01')], // FAIL doesn't work with Date
    {x:'', y: {yx: 'zz', yy: null}, z: [1,2,3,null]},
    {
        obj : new function() {
            this.name = "Object test";
        }
    } // FAIL doesn't handle functions
]
tests.map((x,i) => console.log(i, cloner(x)))

Mapには特別な扱いが必要であることに気付いたので、このスレッドのすべての提案を使用すると、コードは次のようになります。

function deepClone( obj ) {
    if( !obj || true == obj ) //this also handles boolean as true and false
        return obj;
    var objType = typeof( obj );
    if( "number" == objType || "string" == objType ) // add your immutables here
        return obj;
    var result = Array.isArray( obj ) ? [] : !obj.constructor ? {} : new obj.constructor();
    if( obj instanceof Map )
        for( var key of obj.keys() )
            result.set( key, deepClone( obj.get( key ) ) );
    for( var key in obj )
        if( obj.hasOwnProperty( key ) )
            result[key] = deepClone( obj[ key ] );
    return result;
}

すべての答えへの私の追加

deepCopy = arr => {
  if (typeof arr !== 'object') return arr
  if(arr.pop) return [...arr].map(deepCopy)
  const copy = {}
  for (let prop in arr)
    copy[prop] = deepCopy(arr[prop])
  return copy
}

これは、配列、オブジェクト、およびプリミティブで機能します。2つの走査方法を切り替える二重再帰アルゴリズム：

const deepClone = (objOrArray) => {

  const copyArray = (arr) => {
    let arrayResult = [];
    arr.forEach(el => {
        arrayResult.push(cloneObjOrArray(el));
    });
    return arrayResult;
  }

  const copyObj = (obj) => {
    let objResult = {};
    for (key in obj) {
      if (obj.hasOwnProperty(key)) {
        objResult[key] = cloneObjOrArray(obj[key]);
      }
    }
    return objResult;
  }

  const cloneObjOrArray = (el) => {
    if (Array.isArray(el)) {
      return copyArray(el);
    } else if (typeof el === 'object') {
      return copyObj(el);
    } else {
      return el;
    }
  }

  return cloneObjOrArray(objOrArray);
}

再帰を利用して、deepCopyを作成できます。配列、オブジェクト、オブジェクトの配列、関数付きオブジェクトのコピーを作成できます。必要に応じて、マップなどの他のタイプのデータ構造の関数を追加できます。

function deepClone(obj) {
         var retObj;
        _assignProps = function(obj, keyIndex, retObj) {
               var subType = Object.prototype.toString.call(obj[keyIndex]);
               if(subType === "[object Object]" || subType === "[object Array]") {
                    retObj[keyIndex] = deepClone(obj[keyIndex]);
               }
               else {
                     retObj[keyIndex] = obj[keyIndex];
               }
        };

        if(Object.prototype.toString.call(obj) === "[object Object]") {
           retObj = {};
           for(key in obj) {
               this._assignProps(obj, key, retObj);
           }
        }
        else if(Object.prototype.toString.call(obj) == "[object Array]") {
           retObj = [];
           for(var i = 0; i< obj.length; i++) {
              this._assignProps(obj, i, retObj);
            }
        };

        return retObj;
    };

immutableJSを使用する

import { fromJS } from 'immutable';

// An object we want to clone
let objA = { 
   a: { deep: 'value1', moreDeep: {key: 'value2'} } 
};

let immB = fromJS(objA); // Create immutable Map
let objB = immB.toJS(); // Convert to plain JS object

console.log(objA); // Object { a: { deep: 'value1', moreDeep: {key: 'value2'} } }
console.log(objB); // Object { a: { deep: 'value1', moreDeep: {key: 'value2'} } }

// objA and objB are equalent, but now they and their inner objects are undependent
console.log(objA === objB); // false
console.log(objA.a === objB.a); // false
console.log(objA.moreDeep === objB.moreDeep); // false

またはlodash / merge

import merge from 'lodash/merge'

var objA = {
    a: [{ 'b': 2 }, { 'd': 4 }]
};
// New deeply cloned object:
merge({}, objA ); 

// We can also create new object from several objects by deep merge:
var objB = {
    a: [{ 'c': 3 }, { 'e': 5 }]
};
merge({}, objA , objB ); // Object { a: [{ 'b': 2, 'c': 3 }, { 'd': 4, 'e': 5 }] }

これは循環参照を使用して、私のために働きます

 //a test-object with circular reference :
 var n1 = {   id:0,   text:"aaaaa",   parent:undefined} 
 var n2 = {  id:1,   text:"zzzzz",   parent:undefined } 
 var o = { arr:[n1,n2],   parent:undefined } 
 n1.parent = n2.parent = o;
 var obj = {   a:1,   b:2,   o:o }
 o.parent = obj;

 function deepClone(o,output){ 

     if(!output) output = {};  
     if(o.______clone) return o.______clone;
     o.______clone = output.______clone = output;

   for(var z in o){

     var obj = o[z];
     if(typeof(obj) == "object") output[z] = deepClone(obj)
     else output[z] = obj; 
    }

   return output;
}

console.log(deepClone(obj));

var newDate = new Date（this.oldDate）; 私はoldDateを関数に渡してthis.oldDateからnewDateを生成していましたが、this.oldDateも変更していたため、そのソリューションを使用して機能しました。

このソリューションは、[... target]または{... target}を使用する場合の再帰の問題を回避します

function shallowClone(target) {
  if (typeof a == 'array') return [...target]
  if (typeof a == 'object') return {...target}
  return target
}

/* set skipRecursion to avoid throwing an exception on recursive references */
/* no need to specify refs, or path -- they are used interally */
function deepClone(target, skipRecursion, refs, path) {
  if (!refs) refs = []
  if (!path) path = ''
  if (refs.indexOf(target) > -1) {
    if (skipRecursion) return null
    throw('Recursive reference at ' + path)
  }
  refs.push(target)
  let clone = shallowCopy(target)
  for (i in target) target[i] = deepClone(target, refs, path + '.' + i)
  return clone
}