JavaScriptでオブジェクトの配列をどのように複製しますか？

...各オブジェクトは、同じ配列内の他のオブジェクトへの参照も持っていますか？

この問題を最初に思いついたとき、私は

var clonedNodesArray = nodesArray.clone()

存在し、JavaScriptでオブジェクトを複製する方法に関する情報を検索します。StackOverflowで質問を見つけました（まったく同じ@JohnResigによって回答されました）。彼はjQueryを使用すると、

var clonedNodesArray = jQuery.extend({}, nodesArray);

オブジェクトを複製します。私はこれを試しましたが、これは配列内のオブジェクトの参照のみをコピーします。だから私が

nodesArray[0].value = "red"
clonedNodesArray[0].value = "green"

nodesArray [0]とclonedNodesArray [0]の両方の値が「緑」になります。それから私は試しました

var clonedNodesArray = jQuery.extend(true, {}, nodesArray);

これはオブジェクトを深くコピーしますが、FirebugとOpera Dragonflyの両方から「再帰が多すぎます」と「コントロールスタックオーバーフロー」のメッセージを受け取りました。

どうしますか これはすべきではないことですか？JavaScriptでこれを行う再利用可能な方法はありますか？

浅いコピーの問題は、すべてのオブジェクトが複製されないことです。各オブジェクトへの参照は各配列で一意ですが、最終的にそれを取得すると、以前と同じオブジェクトを処理します。クローンを作成する方法に問題はありません... Array.slice（）を使用しても同じ結果になります。

ディープコピーに問題があるのは、循環オブジェクト参照が発生するためです。Deepは可能な限り深くなります。円がある場合、ブラウザが気絶するまで無限に動き続けます。

データ構造を有向非巡回グラフとして表現できない場合、ディープクローニングの汎用的な方法を見つけることができるかどうかはわかりません。循環グラフは多くのトリッキーなコーナーケースを提供し、一般的な操作ではないため、完全な解決策を書いた人はいないと思います（それが可能である場合でも、可能ではないかもしれません！このページで問題に関する良いコメントを見つけました。

循環参照を持つオブジェクトの配列のディープコピーが必要な場合は、専用のデータ構造を処理するための独自のメソッドをコーディングする必要があると思います。

1. ラウンド1では、配列内の他のオブジェクトを参照しないすべてのオブジェクトのクローンを作成します。各オブジェクトの原点を追跡します。
2. ラウンド2では、オブジェクトをリンクします。

オブジェクトにJSONシリアル化可能なコンテンツ（関数やなしNumber.POSITIVE_INFINITYなど）が含まれている限り、ループを使用して配列やオブジェクトを複製する必要はありません。これは、純粋なバニラの1行のソリューションです。

var clonedArray = JSON.parse(JSON.stringify(nodesArray))

以下のコメントを要約すると、このアプローチの主な利点は、配列自体だけでなく、配列の内容も複製することです。主な欠点は、JSONシリアル化可能なコンテンツでのみ作業できるという制限と、そのパフォーマンスです（これは、sliceベースのアプローチよりも大幅に劣ります）。

Object.assignを使用してオブジェクトの配列の複製を解決しました

const newArray = myArray.map(a => Object.assign({}, a));

またはスプレッド構文ではさらに短い

const newArray = myArray.map(a => ({...a}));

必要なのが浅いコピーである場合、本当に簡単な方法は次のとおりです。

new_array = old_array.slice(0);

このクローンを作成する最良かつ最新の方法は次のとおりです。

...ES6スプレッド演算子を使用します。

最も単純な例を次に示します。

var clonedObjArray = [...oldObjArray];

このようにして、配列を個々の値に展開し、[]演算子を使用して新しい配列に配置します。

以下に、さまざまな動作を示す長い例を示します。

let objArray = [ {a:1} , {b:2} ];

let refArray = objArray; // this will just point to the objArray
let clonedArray = [...objArray]; // will clone the array

console.log( "before:" );
console.log( "obj array" , objArray );
console.log( "ref array" , refArray );
console.log( "cloned array" , clonedArray );

objArray[0] = {c:3};

console.log( "after:" );
console.log( "obj array" , objArray ); // [ {c:3} , {b:2} ]
console.log( "ref array" , refArray ); // [ {c:3} , {b:2} ]
console.log( "cloned array" , clonedArray ); // [ {a:1} , {b:2} ]

これは私にとってはうまくいきます：

var clonedArray = $.map(originalArray, function (obj) {
                      return $.extend({}, obj);
                  });

配列内のオブジェクトの深いコピーが必要な場合：

var clonedArray = $.map(originalArray, function (obj) {
                      return $.extend(true, {}, obj);
                  });

$.evalJSON($.toJSON(origArray));

マップは古い配列から新しい配列を作成し（古い配列への参照なし）、マップ内で新しいオブジェクトを作成し、プロパティ（キー）を反復処理し、古い配列オブジェクトの値を対応するプロパティに新しいオブジェクトに割り当てます。

これにより、まったく同じオブジェクトの配列が作成されます。

let newArray = oldArray.map(a => {
               let newObject = {};
               Object.keys(a).forEach(propertyKey => {
                    newObject[propertyKey] = a[propertyKey];
               });
               return newObject ;
});

痛みを伴う再帰を行わずに、問題のオブジェクトの詳細をすべて知らなくても、これを行う簡単な方法があるかもしれません。jQueryを使用する場合は、jQueryを使用してオブジェクトをJSONに変換し、$.toJSON(myObjectArray)JSON文字列を取得してオブジェクトに評価します。バム！完了しました！問題が解決しました。:)

var oldObjArray = [{ Something: 'blah', Cool: true }];
var newObjArray = eval($.toJSON(oldObjArray));

「Javascriptでオブジェクトの配列を複製する」という問題に対する単純で明確な解決策がないように思われるので、私はこの質問に答えています。

function deepCopy (arr) {
    var out = [];
    for (var i = 0, len = arr.length; i < len; i++) {
        var item = arr[i];
        var obj = {};
        for (var k in item) {
            obj[k] = item[k];
        }
        out.push(obj);
    }
    return out;
}

// test case

var original = [
    {'a' : 1},
    {'b' : 2}
    ];

var copy = deepCopy(original);

// change value in copy
copy[0]['a'] = 'not 1';

// original[0]['a'] still equals 1

このソリューションは、配列の値を繰り返し、次にオブジェクトキーを繰り返し、後者を新しいオブジェクトに保存してから、その新しいオブジェクトを新しい配列にプッシュします。

jsfiddleを参照してください。注：配列内のオブジェクトについては、単純な.slice()もの[].concat()では不十分です。

jQuery拡張は正常に機能しています。オブジェクトではなく配列を複製することを指定する必要があるだけです（extendメソッドのパラメーターとして、{}ではなく[]に注意してください）。

var clonedNodesArray = jQuery.extend([], nodesArray);

この方法は非常に簡単で、元の配列を変更せずにクローンを変更できます。

// Original Array
let array = [{name: 'Rafael'}, {name: 'Matheus'}];

// Cloning Array
let clone = array.map(a => {return {...a}})

// Editing the cloned array
clone[1].name = 'Carlos';


console.log('array', array)
// [{name: 'Rafael'}, {name: 'Matheus'}]

console.log('clone', clone)
// [{name: 'Rafael'}, {name: 'Carlos'}]

Daniel Lewが述べたように、循環グラフにはいくつかの問題があります。この問題が発生した場合は、特別なclone()、問題のあるオブジェクトにメソッドをすでにコピーしたオブジェクトを覚えておきます。

copyCountコードでコピーするたびに1ずつ増加する変数を使用します。低いオブジェクトcopyCount現在のコピープロセスよりもがコピーされます。そうでない場合は、すでに存在するコピーを参照する必要があります。これにより、オリジナルからそのコピーにリンクする必要があります。

まだ1つの問題があります。それはメモリです。あるオブジェクトから別のオブジェクトへのこの参照がある場合、それらは常にどこかから参照されるため、ブラウザがそれらのオブジェクトを解放できない可能性があります。すべてのコピー参照をNullに設定する2番目のパスを作成する必要があります。（これを行う場合、aを指定する必要はありませんが、2番目のパスで値をリセットできるため、copyCountブール値isCopiedで十分です。）

Array.sliceは...配列の配列または一部をコピーするために使用することができ http://www.devguru.com/Technologies/Ecmascript/Quickref/Slice.html 内の文字列を変更する- 。これは、文字列と数値で動作します1つの配列は他の配列には影響しませんが、オブジェクトは参照によってコピーされるだけなので、1つの配列で参照されているオブジェクトを変更すると、他の配列に影響します。

これは、これに役立つ可能性があるJavaScriptのundoマネージャーの例です。http：//www.ridgway.co.za/archive/2007/11/07/simple-javascript-undo-manager-for-dtos.aspx

私のアプローチ：

var temp = { arr : originalArray };
var obj = $.extend(true, {}, temp);
return obj.arr;

元の配列の素敵でクリーンなディープクローンを取得します。元のオブジェクトに参照されるオブジェクトはありません:-)

lodashはcloneDeepこの目的のために機能します：

var objects = [{ 'a': 1 }, { 'b': 2 }];
var deep = _.cloneDeep(objects);

ディープクローンを実装する場合は、JSON.parse（JSON.stringify（your {}または[]））を使用します。

const myObj ={
    a:1,
    b:2,
    b:3
}

const deepClone=JSON.parse(JSON.stringify(myObj));
deepClone.a =12;
console.log("deepClone-----"+myObj.a);
const withOutDeepClone=myObj;
withOutDeepClone.a =12;
console.log("withOutDeepClone----"+myObj.a);

eval（）を忘れる（JSの最も誤用されている機能であり、コードが遅くなります）およびslice（0）（単純なデータ型でのみ機能します）

これは私にとって最良の解決策です：

Object.prototype.clone = function() {
  var myObj = (this instanceof Array) ? [] : {};
  for (i in this) {
    if (i != 'clone') {
        if (this[i] && typeof this[i] == "object") {
          myObj[i] = this[i].clone();
        } else 
            myObj[i] = this[i];
        } 
    }
  return myObj;
};

私はこの問題にかなり苛立っていました。どうやらこの問題は、ジェネリック配列を$ .extendメソッドに送信するときに発生します。だから、それを修正するために、私は少しチェックを追加しました、そしてそれは一般的な配列、jQuery配列、そしてあらゆるオブジェクトで完全に動作します。

jQuery.extend({
    deepclone: function(objThing) {
        // return jQuery.extend(true, {}, objThing);
        /// Fix for arrays, without this, arrays passed in are returned as OBJECTS! WTF?!?!
        if ( jQuery.isArray(objThing) ) {
            return jQuery.makeArray( jQuery.deepclone($(objThing)) );
        }
        return jQuery.extend(true, {}, objThing);
    },
});

呼び出し：

var arrNewArrayClone = jQuery.deepclone(arrOriginalArray);
// Or more simply/commonly
var arrNewArrayClone = $.deepclone(arrOriginalArray);

これは、配列、オブジェクト、null、およびその他のスカラー値を深くコピーし、ネイティブではない関数のプロパティも深くコピーします（これは非常に一般的ではありませんが、可能です）。（効率のために、配列に数値以外のプロパティをコピーすることは試みません。）

function deepClone (item) {
  if (Array.isArray(item)) {
    var newArr = [];
    for (var i = item.length; i-- > 0;) {
      newArr[i] = deepClone(item[i]);
    }
    return newArr;
  }
  if (typeof item === 'function' && !(/\(\) \{ \[native/).test(item.toString())) {
    var obj;
    eval('obj = '+ item.toString());
    for (var k in item) {
      obj[k] = deepClone(item[k]);
    }
    return obj;
  }
  if (item && typeof item === 'object') {
    var obj = {};
    for (var k in item) {
      obj[k] = deepClone(item[k]);
    }
    return obj;
  }
  return item;
}

新しいECMAScript 6 Object.assignメソッドを使用します。

let oldObject = [1,3,5,"test"];
let newObject = Object.assign({}, oldObject);

このメソッドの最初の引数は更新する配列です。新しいオブジェクトを作成するため、空のオブジェクトを渡します。

この構文を使用することもできます。これは同じですが短いものです。

let newObject = [...oldObject];

多次元配列を複製する単純な再帰的なArrayメソッドを発明できます。ネストされた配列内のオブジェクトは、ソース配列内の対応するオブジェクトへの参照を保持しますが、配列は保持しません。

Array.prototype.clone = function(){
  return this.map(e => Array.isArray(e) ? e.clone() : e);
};

var arr = [ 1, 2, 3, 4, [ 1, 2, [ 1, 2, 3 ], 4 , 5], 6 ],
    brr = arr.clone();
brr[4][2][1] = "two";
console.log(JSON.stringify(arr));
console.log(JSON.stringify(brr));

JavaScriptでは、配列とオブジェクトのコピーが元の値を変更するため、ディープコピーがこれに対するソリューションです。

ディープコピーとは、実際に新しい配列を作成して値をコピーすることを意味します。これは、元の配列に影響が及ぶことはないためです。

JSON.parseそしてJSON.stringifyディープコピーへの最善かつ簡単な方法です。このJSON.stringify()メソッドは、JavaScript値をJSON.parse()JSON文字列に変換します。このメソッドは、JSON文字列を解析し、JavaScript値または文字列で記述されたオブジェクトを構築します。

//ディープクローン

let a = [{ x:{z:1} , y: 2}];
let b = JSON.parse(JSON.stringify(a));
b[0].x.z=0

console.log(JSON.stringify(a)); //[{"x":{"z":1},"y":2}]
console.log(JSON.stringify(b)); // [{"x":{"z":0},"y":2}]

詳しくはこちらをお読みください

jQueryを使って：

var target= [];
$.each(source, function() {target.push( $.extend({},this));});

次のコードは、オブジェクトと配列のディープコピーを再帰的に実行します。

function deepCopy(obj) {
if (Object.prototype.toString.call(obj) === '[object Array]') {
    var out = [], i = 0, len = obj.length;
    for ( ; i < len; i++ ) {
        out[i] = arguments.callee(obj[i]);
    }
    return out;
}
if (typeof obj === 'object') {
    var out = {}, i;
    for ( i in obj ) {
        out[i] = arguments.callee(obj[i]);
    }
    return out;
}
return obj;
}

ソース

JavaScriptでディープクローンを作成するエレガントな方法

https://mootools.net/core/docs/1.6.0/Types/Object

https://scotch.io/bar-talk/copying-objects-in-javascript

1）オブジェクトを複製するためのバニラJavaScriptメソッド

2）オブジェクトをディープクローンするJSONライブラリの巧妙な活用

3）jQueryの$ .extend（）関数を使用する

4）Mootoolsのclone（）関数を使用してオブジェクトを複製する

私Object.createは、すべての最新のブラウザーでサポートされている、主に使用するJavaScript構造をディープクローンする一般的な方法をなんとか書いたと思います。コードは次のとおりです。

function deepClone (item) {
  if (Array.isArray(item)) {
    var newArr = [];

    for (var i = item.length; i-- !== 0;) {
      newArr[i] = deepClone(item[i]);
    }

    return newArr;
  }
  else if (typeof item === 'function') {
    eval('var temp = '+ item.toString());
    return temp;
  }
  else if (typeof item === 'object')
    return Object.create(item);
  else
    return item;
}

オブジェクトの複製についても、ECMAScript 6を提案するだけでしたreduce()。

const newArray=myArray.reduce((array, element)=>array.push(Object.assign({}, element)), []);

しかし率直に言って、私は@dinodsaurusの答えがさらに好きです。私はこのバージョンを別のオプションとしてここに配置していますが、個人的にはmap()@dinodsaurusの提案に従って使用します。

UnderscoreとBabelのどちらを使用しているかに応じて、配列をディープクローンするさまざまな方法のベンチマークを示します。

https://jsperf.com/object-rest-spread-vs-clone/2

バベルが最速のように見えます。

var x = babel({}, obj)

       var game_popularity = [
            { game: "fruit ninja", popularity: 78 },
            { game: "road runner", popularity: 20 },
            { game: "maze runner", popularity: 40 },
            { game: "ludo", popularity: 75 },
            { game: "temple runner", popularity: 86 }
        ];
        console.log("sorted original array before clonning");
        game_popularity.sort((a, b) => a.popularity < b.popularity);
        console.log(game_popularity);


        console.log("clone using object assign");
        const cl2 = game_popularity.map(a => Object.assign({}, a));
        cl2[1].game = "clash of titan";
        cl2.push({ game: "logan", popularity: 57 });
        console.log(cl2);


        //adding new array element doesnt reflect in original array
        console.log("clone using concat");
        var ph = []
        var cl = ph.concat(game_popularity);

        //copied by reference ?
        cl[0].game = "rise of civilization";

        game_popularity[0].game = 'ping me';
        cl.push({ game: "angry bird", popularity: 67 });
        console.log(cl);

        console.log("clone using ellipses");
        var cl3 = [...game_popularity];
        cl3.push({ game: "blue whale", popularity: 67 });
        cl3[2].game = "harry potter";
        console.log(cl3);

        console.log("clone using json.parse");
        var cl4 = JSON.parse(JSON.stringify(game_popularity));
        cl4.push({ game: "home alone", popularity: 87 });
        cl4[3].game ="lockhead martin";
        console.log(cl4);

        console.log("clone using Object.create");
        var cl5 = Array.from(Object.create(game_popularity));
        cl5.push({ game: "fish ville", popularity: 87 });
        cl5[3].game ="veto power";
        console.log(cl5);


        //array function
        console.log("sorted original array after clonning");
        game_popularity.sort((a, b) => a.popularity < b.popularity);
        console.log(game_popularity);


        console.log("Object.assign deep clone object array");
        console.log("json.parse deep clone object array");
        console.log("concat does not deep clone object array");
        console.log("ellipses does not deep clone object array");
        console.log("Object.create does not deep clone object array");


        Output:


        sorted original array before clonning
        [ { game: 'temple runner', popularity: 86 },
        { game: 'fruit ninja', popularity: 78 },
        { game: 'ludo', popularity: 75 },
        { game: 'maze runner', popularity: 40 },
        { game: 'road runner', popularity: 20 } ]
        clone using object assign
        [ { game: 'temple runner', popularity: 86 },
        { game: 'clash of titan', popularity: 78 },
        { game: 'ludo', popularity: 75 },
        { game: 'maze runner', popularity: 40 },
        { game: 'road runner', popularity: 20 },
        { game: 'logan', popularity: 57 } ]
        clone using concat
        [ { game: 'ping me', popularity: 86 },
        { game: 'fruit ninja', popularity: 78 },
        { game: 'ludo', popularity: 75 },
        { game: 'maze runner', popularity: 40 },
        { game: 'road runner', popularity: 20 },
        { game: 'angry bird', popularity: 67 } ]
        clone using ellipses
        [ { game: 'ping me', popularity: 86 },
        { game: 'fruit ninja', popularity: 78 },
        { game: 'harry potter', popularity: 75 },
        { game: 'maze runner', popularity: 40 },
        { game: 'road runner', popularity: 20 },
        { game: 'blue whale', popularity: 67 } ]
        clone using json.parse
        [ { game: 'ping me', popularity: 86 },
        { game: 'fruit ninja', popularity: 78 },
        { game: 'harry potter', popularity: 75 },
        { game: 'lockhead martin', popularity: 40 },
        { game: 'road runner', popularity: 20 },
        { game: 'home alone', popularity: 87 } ]
        clone using Object.create
        [ { game: 'ping me', popularity: 86 },
        { game: 'fruit ninja', popularity: 78 },
        { game: 'harry potter', popularity: 75 },
        { game: 'veto power', popularity: 40 },
        { game: 'road runner', popularity: 20 },
        { game: 'fish ville', popularity: 87 } ]
        sorted original array after clonning
        [ { game: 'ping me', popularity: 86 },
        { game: 'fruit ninja', popularity: 78 },
        { game: 'harry potter', popularity: 75 },
        { game: 'veto power', popularity: 40 },
        { game: 'road runner', popularity: 20 } ]

        Object.assign deep clone object array
        json.parse deep clone object array
        concat does not deep clone object array
        ellipses does not deep clone object array
        Object.create does not deep clone object array