Jak sklonować tablicę obiektów w JavaScript?

... gdzie każdy obiekt ma również odniesienia do innych obiektów w tej samej tablicy?

Kiedy po raz pierwszy wpadłem na ten problem, pomyślałem o czymś takim

var clonedNodesArray = nodesArray.clone()

istniałby i szukał informacji na temat klonowania obiektów w javascript. Znalazłem pytanie na StackOverflow (odpowiedział ten sam @JohnResig) i wskazał, że z jQuery możesz zrobić

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

sklonować obiekt. Próbowałem tego jednak, to tylko kopiuje odwołania do obiektów w tablicy. Więc jeśli ja

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

wartości zarówno nodesArray [0], jak i clonedNodesArray [0] okażą się „zielone”. Potem spróbowałem

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

który głęboko kopiuje obiekt, ale dostałem komunikaty o „ zbyt dużej rekurencji ” i „ przepełnieniu stosu kontrolnego ” odpowiednio od Firebug i Opera Dragonfly.

Jak byś to zrobił? Czy to coś, czego nawet nie należy robić? Czy istnieje sposób wielokrotnego użytku w JavaScript?

Problem z płytką kopią polega na tym, że wszystkie obiekty nie są klonowane. Podczas gdy odniesienia do każdego obiektu są unikalne w każdej tablicy, gdy ostatecznie go złapiesz, masz do czynienia z tym samym obiektem, co poprzednio. Nie ma nic złego w sposobie sklonowania ... ten sam wynik wystąpiłby przy użyciu Array.slice ().

Powodem, dla którego twoja głęboka kopia ma problemy, jest to, że kończysz się na okrągłych odnośnikach do obiektów. Głębokość zejdzie tak głęboko, jak to możliwe, a jeśli masz koło, będzie jeździć nieskończenie, dopóki przeglądarka nie zemdleje.

Jeśli struktury danych nie można przedstawić jako ukierunkowanego wykresu acyklicznego, nie jestem pewien, czy będziesz w stanie znaleźć uniwersalną metodę głębokiego klonowania. Cykliczne wykresy dostarczają wielu skomplikowanych przypadków narożnych, a ponieważ nie jest to powszechna operacja, wątpię, aby ktokolwiek napisał pełne rozwiązanie (jeśli to w ogóle możliwe - może nie być! Ale nie mam czasu, aby spróbować teraz napisać rygorystyczny dowód). Na tej stronie znalazłem kilka dobrych komentarzy na ten temat .

Jeśli potrzebujesz głębokiej kopii tablicy obiektów z referencjami cyklicznymi, uważam, że będziesz musiał kodować własną metodę obsługi specjalnej struktury danych, tak aby była to klon wieloprzebiegowy:

1. W pierwszej rundzie utwórz klon wszystkich obiektów, które nie odwołują się do innych obiektów w tablicy. Śledź pochodzenie każdego obiektu.
2. W drugiej rundzie połącz obiekty ze sobą.

Tak długo, jak obiekty zawierają treści serializowane przez JSON (bez funkcji, nie Number.POSITIVE_INFINITYitp.), Nie ma potrzeby, aby pętle klonowały tablice lub obiekty. Oto jedno-liniowe rozwiązanie czysto waniliowe.

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

Podsumowując poniższe komentarze, podstawową zaletą tego podejścia jest to, że klonuje również zawartość tablicy, a nie tylko samą tablicę. Podstawowymi wadami jest ograniczenie pracy tylko nad treściami serializowanymi w JSON i jego wydajność (która jest znacznie gorsza niż slicepodejście oparte na podejściu).

Rozwiązałem klonowanie tablicy obiektów za pomocą Object.assign

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

lub nawet krótszy ze składnią rozprzestrzeniania

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

Jeśli wszystko, czego potrzebujesz, to płytka kopia, naprawdę łatwym sposobem jest:

new_array = old_array.slice(0);

Najlepszy i najbardziej aktualny sposób wykonania tego klonu jest następujący:

Korzystanie z ...operatora rozprzestrzeniania ES6.

Oto najprostszy przykład:

var clonedObjArray = [...oldObjArray];

W ten sposób rozkładamy tablicę na poszczególne wartości i umieszczamy ją w nowej tablicy za pomocą operatora [].

Oto dłuższy przykład pokazujący różne sposoby jego działania:

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} ]

To działa dla mnie:

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

A jeśli potrzebujesz głębokiej kopii obiektów w tablicy:

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

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

Mapa utworzy nową tablicę ze starego (bez odniesienia do starej), a wewnątrz mapy utworzysz nowy obiekt i przejdziesz przez właściwości (klucze) i przypiszesz wartości ze starego obiektu Array do odpowiednich właściwości do nowego obiektu.

Spowoduje to utworzenie dokładnie tej samej tablicy obiektów.

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

Mogę mieć prosty sposób na zrobienie tego bez konieczności bolesnej rekurencji i nie znając wszystkich drobniejszych szczegółów przedmiotowego obiektu. Korzystając z jQuery, po prostu przekonwertuj swój obiekt na JSON za pomocą jQuery $.toJSON(myObjectArray), a następnie weź łańcuch JSON i oceń go z powrotem na obiekt. BAM! Gotowe i gotowe! Problem rozwiązany. :)

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

Odpowiadam na to pytanie, ponieważ wydaje się, że nie istnieje proste i jednoznaczne rozwiązanie problemu „klonowania tablicy obiektów w 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

To rozwiązanie iteruje wartości tablic, a następnie iteruje klucze obiektów, zapisując je do nowego obiektu, a następnie wypychając ten nowy obiekt do nowej tablicy.

Zobacz jsfiddle . Uwaga: proste .slice()lub [].concat()niewystarczające dla obiektów w tablicy.

Rozszerzenie JQuery działa dobrze, wystarczy określić, że klonujesz tablicę zamiast obiektu ( zwróć uwagę na [] zamiast {} jako parametr metody ext ):

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

Ta metoda jest bardzo prosta i możesz modyfikować swój klon bez modyfikowania oryginalnej tablicy.

// 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'}]

Jak wspomniał Daniel Lew, wykresy cykliczne mają pewne problemy. Gdybym miał ten problem, dodałbym specjalne clone()metody do problematycznych obiektów lub pamiętam, które obiekty już skopiowałem.

Zrobiłbym to ze zmienną, copyCountktóra zwiększa się o 1 za każdym razem, gdy kopiujesz swój kod. Obiekt, który ma niższy copyCountniż bieżący proces kopiowania, jest kopiowany. Jeśli nie, należy powołać się na kopię, która już istnieje. Dlatego konieczne jest połączenie z oryginału do jego kopii.

Nadal jest jeden problem: pamięć. Jeśli masz to odniesienie od jednego obiektu do drugiego, prawdopodobnie przeglądarka nie może zwolnić tych obiektów, ponieważ zawsze są one skądś odwoływane. Będziesz musiał wykonać drugie przejście, w którym ustawisz wszystkie odwołania do kopii na Null. (Jeśli to zrobisz, nie będziesz musiał miećcopyCount logicznej, ale wystarczy boolean isCopied, ponieważ możesz zresetować wartość w drugim przebiegu).

Tablicy.slice można użyć do skopiowania tablicy lub jej części. Http://www.devguru.com/Technologies/Ecmascript/Quickref/Slice.html To działałoby z ciągami i liczbami. - zmiana ciągu w jedna tablica nie wpłynie na drugą - ale obiekty są nadal tylko kopiowane przez referencję, więc zmiany w obiektach referencyjnych w jednej tablicy miałyby wpływ na drugą tablicę.

Oto przykład menedżera cofania JavaScript, który może być przydatny w tym przypadku: http://www.ridgway.co.za/archive/2007/11/07/simple-javascript-undo-manager-for-dtos.aspx

Moje podejście:

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

daje mi ładny, czysty, głęboki klon oryginalnej tablicy - żaden obiekt nie odwołuje się do oryginału :-)

lodash ma cloneDeepdo tego celu funkcję:

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

Jeśli chcesz wdrożyć głęboki klon, użyj JSON.parse (JSON.stringify (twój {} lub []))

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);

zapomnij eval () (jest najczęściej wykorzystywaną funkcją JS i powoduje spowolnienie kodu) i slice (0) (działa tylko dla prostych typów danych)

To dla mnie najlepsze rozwiązanie:

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;
};

Byłem bardzo sfrustrowany tym problemem. Najwyraźniej problem powstaje, gdy wyślesz ogólną tablicę do metody $ .extend. Tak więc, aby to naprawić, dodałem mały czek i działa idealnie z tablicami ogólnymi, tablicami jQuery i dowolnymi obiektami.

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);
    },
});

Wywołaj używając:

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

To głęboko kopiuje tablice, obiekty, wartości zerowe i inne wartości skalarne, a także głęboko kopiuje wszelkie właściwości funkcji nienatywnych (co jest dość rzadkie, ale możliwe). (W celu zwiększenia wydajności nie próbujemy kopiować właściwości nienumerycznych do tablic).

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;
}

Korzystam z nowej metody ECMAScript 6 Object.assign :

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

pierwszym argumentem tej metody jest tablica do aktualizacji, przekazujemy pusty obiekt, ponieważ chcemy mieć nowy obiekt.

możemy również użyć tej składni, która jest taka sama, ale krótsza:

let newObject = [...oldObject];

Możemy wynaleźć prostą metodę macierzy rekurencyjnej do klonowania tablic wielowymiarowych. Podczas gdy obiekty w zagnieżdżonych tablicach zachowują odniesienie do odpowiednich obiektów w tablicy źródłowej, tablice tego nie zrobią.

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));

W JavaScript, tablica i kopia obiektu zmieniają wartości początkowe, więc rozwiązaniem jest kopiowanie głębokie.

Głęboka kopia oznacza tworzenie nowej tablicy i kopiowanie wartości, ponieważ cokolwiek się z nią stanie, nigdy nie wpłynie na pierwotną.

JSON.parsei JSON.stringifyjest najlepszym i prostym sposobem na głębokie kopiowanie. JSON.stringify()Metoda konwertuje wartość JavaScript do JSON string.TheJSON.parse() metody analizuje ciąg JSON, konstruowanie wartości JavaScript lub obiekt opisany przez ciąg.

// Deep Clone

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}]

Aby uzyskać więcej informacji: Przeczytaj tutaj

z jQuery:

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

Poniższy kod wykona rekurencyjnie głębokie kopiowanie obiektów i tablicy :

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;
}

Źródło

Kilka eleganckich sposobów głębokiego klonowania w javascript

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

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

1) Waniliowa metoda Javascript do klonowania obiektów

2) Sprytne wykorzystanie biblioteki JSON do głębokiego klonowania obiektów

3) Korzystanie z funkcji $ .extend () jQuery

4) Używanie funkcji klonowania () Mootools do klonowania obiektów

Wydaje mi się, że udało mi się napisać ogólną metodę głębokiego klonowania dowolnej struktury JavaScript, która głównie Object.createjest obsługiwana we wszystkich nowoczesnych przeglądarkach. Kod jest taki:

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;
}

Również do klonowania obiektów zamierzałem po prostu zasugerować ECMAScript 6 reduce():

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

Ale szczerze, jeszcze bardziej podoba mi się odpowiedź @dinodsaurus. Po prostu umieszczam tę wersję tutaj jako inną opcję, ale osobiście będę jej używać map()zgodnie z sugestią @dinodsaurus.

W zależności od tego, czy masz podkreślnik, czy Babel, jest to Benchmark innego sposobu głębokiego klonowania tablicy.

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

Wygląda na to, że babel jest najszybszy.

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