Як клонувати масив об’єктів у 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 ().

Причина у вашої глибокої копії є проблеми в тому, що ви закінчуєте циркулярні посилання на об'єкт. Глибока піде так глибоко, наскільки вона може пройти, і якщо у вас є коло, воно триватиме нескінченно, поки браузер не зникне.

Якщо структура даних не може бути представлена ​​як спрямований ациклічний графік, я не впевнений, що ви зможете знайти універсальний метод глибокого клонування. Циклічні графіки містять багато складних кутових випадків, і оскільки це не звичайна операція, я сумніваюся, хтось написав повне рішення (якщо це навіть можливо - це може бути! Але я не маю часу намагатися написати суворий доказ зараз.). Я знайшов кілька хороших коментарів до цього питання на цій сторінці .

Якщо вам потрібна глибока копія масиву об’єктів із круговими посиланнями, я вважаю, що вам доведеться зашифрувати свій власний метод для обробки вашої спеціалізованої структури даних, наприклад, що це багатопрохідний клон:

1. У першому раунді зробіть клон усіх об'єктів, які не посилаються на інші об'єкти в масиві. Слідкуйте за походженням кожного об’єкта.
2. На другому раунді з'єднайте об'єкти разом.

Поки ваші об’єкти містять вміст, який може серіалізувати JSON (немає функцій, немає Number.POSITIVE_INFINITYтощо), не потрібно жодних циклів для клонування масивів або об'єктів. Ось чистий однорядний розчин ванілі.

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, просто перетворіть ваш об'єкт у JSON за допомогою jQuery $.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 працює добре, просто потрібно вказати, що ви клонуєте масив, а не об’єкт ( відзначте [] замість {} як параметр методу розширення ):

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

Як зазначив Даніель Лев, циклічні графіки мають певні проблеми. Якби у мене була ця проблема, я б або додав спеціальнуclone() методи до проблемних об'єктів, або запам'ятав, які об'єкти я вже скопіював.

Я б це зробив зі змінною, copyCountяка збільшується на 1 щоразу, коли ви копіюєте свій код. Копіюється об'єкт, менший copyCountза поточний процес копіювання. Якщо ні, на копію, яка вже існує, слід посилатися. Це обумовлює необхідність посилання від оригіналу до його копії.

Є ще одна проблема: пам'ять. Якщо у вас є ця посилання від одного об'єкта до іншого, швидше за все, браузер не може звільнити ці об’єкти, оскільки на них завжди кудись посилаються. Вам доведеться зробити другий пропуск, де ви встановили всі копії-посилання на Null. (Якщо ви це зробите, вам не доведеться мати, copyCountале булева isCopiedбуде досить, оскільки ви можете скинути значення у другому проході.)

Array.slice можна використовувати для копіювання масиву або частини масиву .. http://www.devguru.com/Technologies/Ecmascript/Quickref/Slice.html Це буде працювати з рядками та номерами .. - зміна рядка в один масив не впливав би на інший - але об’єкти все ще просто копіюються посиланням, тому зміни на посилаються об'єкти в одному масиві впливатимуть на інший масив.

Ось приклад менеджера скасування скасування JavaScript, який може бути корисним для цього: 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 (ваш {} або []))

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 і робить код повільним) і фрагмент (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);

Це глибоко копіює масиви, об'єкти, нульові та інші скалярні значення, а також глибоко копіює будь-які властивості на неродні функції (що досить рідко, але можливо). (Для ефективності ми не намагаємось копіювати нечислові властивості на масиви.)

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.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 string.TheJSON.parse() метод аналізує рядок 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) Використання функції clone () Mootools для клонування об'єктів

Я думаю, що вдалося написати загальний метод глибокого клонування будь-якої структури JavaScript, головним чином використовуючи Object.createякий підтримується у всіх сучасних браузерах. Код такий:

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.

Залежно від того, чи є у вас підкреслення або 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