Клонирование объекта в javascript

Ниже сначала регистрируется 0, а затем регистрируется 1. Как сохранить копию объекта, а не ссылку на него?

debug.log(vi.details.segment);
vi.nextSegment = vi.details;
vi.nextSegment.segment++;
debug.log(vi.details.segment);

javascript arrays object jquery clone
person Matrym    schedule 19.03.2011    source источник

Ответы (7)


arrow_upward
142
arrow_downward

Чтобы клонировать объект в jQuery:

var vi.nextSegment = jQuery.extend({}, vi.details);

ПРИМЕЧАНИЕ. Вышеприведенное является поверхностной копией: любые вложенные объекты или массивы будут скопированы по ссылке, то есть любые изменения, внесенные вами в vi.nextSegment.obj[prop], будут отражены в vi.details.obj[prop]. Если вам нужен совершенно новый объект, полностью отделенный от оригинала, вам потребуется сделать глубокую копию (передайте true в качестве первого параметра):

var vi.nextSegment = jQuery.extend(true, {}, vi.details);

Подробнее о расширении см. здесь.

person Mike Lewis    schedule 19.03.2011
comment
Это не глубокая копия. var a = {b: [1, 2]}; $.extend({}, a).b[0] = 'test'; и a.b[0] будут изменены на 'test'. Чтобы сделать глубокую копию, укажите true в качестве первого аргумента: $.extend(true, {}, a); - person Reid; 19.03.2011
comment
Одна хитрость, которая меня только что достала: jQuery.extend(true, {}, obj); создаст копию. jQuery.extend(true, obj, {}); не будет. - person worldsayshi; 22.04.2013
comment
@worldsayshi : Хотел бы я увидеть твой комментарий раньше. От этого неделями болит голова. Большое спасибо. - person nicolas; 10.10.2014
comment
блестяще, ребята! Как раз то, что мне было нужно! - person curveball; 10.03.2017

arrow_upward
34
arrow_downward

Взгляните на сообщение: Каков наиболее эффективный способ клонирования объекта JavaScript

Согласно ответу Джона Резига:

// Shallow copy
var newObject = jQuery.extend({}, oldObject);

// Deep copy
var newObject = jQuery.extend(true, {}, oldObject);

Дополнительную информацию можно найти в документации jQuery.

person Scoobler    schedule 19.03.2011

arrow_upward
8
arrow_downward

Это сработало лучше для меня, клонируя объект с помощью jQuery "parseJSON()" и "JSON.stringify()"

$.ajax({
  url: 'ajax/test.html',
  dataType: 'json',
  success: function(data) {
    var objY = $.parseJSON(JSON.stringify(data));
    var objX = $.parseJSON(JSON.stringify(data));
  }
});

Клонирование объекта данных в objX и objY - это два разных объекта, вам не нужно связываться с проблемой "по ссылке"

Грациас!

person Mecalito    schedule 21.03.2011
comment
вы можете сделать это без jquery, используя встроенный метод JSON.parse - person MarkosyanArtur; 24.03.2017

arrow_upward
7
arrow_downward

Другой способ клонирования объекта:

newObj = JSON.parse(JSON.stringify(oldObj));

Но будьте осторожны, если он содержит даты. В этом случае JSON.parse вернет date.toString() вместо даты.

person MarkosyanArtur    schedule 24.09.2015

arrow_upward
3
arrow_downward

Вот как я копирую элементы несколько раз:

Сначала у меня есть шаблон:

<div class="forms-container">
    <div class="form-template">
        First Name <input>
         .. a lot of other data ...
        Last Name <input>
     <div>
     <button onclick="add_another();">Add another!</button>
<div>

Теперь JavaScript:

function add_another(){
    jQuery(".form-template").clone().appendTo(".forms-container");
}
person Francisco Corrales Morales    schedule 10.04.2015

arrow_upward
2
arrow_downward

Попробуйте Immutable.js :

Поскольку jQuery в основном имеет дело с DOM Elements, он может не подходить для этой работы. Immutable.js — это библиотека 56 kb (minified), созданная Facebook.

// roughly implementing
import Immutable from 'immutable'
//
const oldObj = { foo: 'bar', bar: 'baz' }
// create a map from the oldObj and then convert it to JS Object
const newObj = Immutable.Map(oldObj).toJS()

Таким образом, вы бы фактически клонировали newObj из oldObj. По сути, если у вас еще нет Map, нам нужно сначала создать Map. Карта похожа на blue-print, с которой мы работаем, чтобы создать copies.

Использованная литература :

Главная – Неизменяемый

Документы – неизменяемые документы

GitHub – Immutable@GitHub

Удачи.

person Aakash    schedule 08.02.2017

arrow_upward
0
arrow_downward

Если вам нужно сохранить исходный объект, но вам нужно переопределить данные с помощью новых параметров, вы можете передать несколько объектов в $.extend (jQuery) с true для первого параметра:

var opts_default = {opt1: true, opt2: false};
var opts_new = {opt1: false};
var opts_final = $.extend(true, {}, opts_default, opts_new);
person Guillaume    schedule 23.06.2020