web-dev-qa-db-fra.com

Cloner un objet en javascript

Les premiers journaux ci-dessous 0, puis les journaux 1. Comment enregistrer une copie de l'objet plutôt qu'une référence à celui-ci?

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

Pour cloner un objet dans jQuery:

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

REMARQUE: Ce qui précède est une copie superficielle: tout objet ou tableau imbriqué sera copié par référence - ce qui signifie toute modification apportée à vi.nextSegment.obj[prop] sera reflété dans vi.details.obj[prop]. Si vous voulez un tout nouvel objet qui est complètement séparé de l'original, vous devrez faire une copie complète (passez true comme premier paramètre):

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

Pour en savoir plus sur extend, voir here.

129
Mike Lewis

Jetez un coup d'œil à l'article: Quel est le moyen le plus efficace de cloner un objet javascript

Selon John Resig réponse:

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

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

Plus d'informations peuvent être trouvées dans le documentation jQuery.

32
Scoobler

Cela fonctionnait mieux pour moi en clonant un objet en utilisant jQuery "parseJSON ()" et "JSON.stringify ()"

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

Le clonage d'un objet de données dans objX & objY sont deux objets différents, vous n'avez pas à vous soucier du problème "par référence"

Gracias!

8
Mecalito

Une autre façon de cloner un objet est

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

Mais faites attention s'il contient des dates. JSON.parse renverra date.toString () au lieu de date dans ce cas.

6
MarkosyanArtur

Voici comment je copie des éléments plusieurs fois:

J'ai d'abord un modèle:

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

Maintenant, le JavaScript:

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

Essayez Immutable.js:

Puisque jQuery traite principalement de DOM Elements, Il peut-être pas est le bon outil pour le travail. Immutable.js Est une bibliothèque 56 kb (minified) créée par 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()

De cette façon, vous auriez effectivement cloné newObj à partir de oldObj. Fondamentalement, si vous n'avez pas déjà un Map, nous devons d'abord créer un Map. La carte est comme un blue-print Avec lequel nous travaillons pour créer copies.

Les références :

Accueil - Immuable

Docs - Docs immuables

GitHub - Immutable @ GitHub

Bonne chance.

2
Akash