Analyse d'exemples de code pour copier des tableaux et des objets JavaScript

Cet article présente principalement les connaissances pertinentes sur la copie d'un tableau JavaScript et d'un objet. A une très bonne valeur de référence. Jetons-y un coup d'œil avec l'éditeur ci-dessous

1 Type de données

Au sens étroit, JS. Toutes les données sont divisées en deux types principaux : les types de base et les types de référence. Les types de base incluent Undefined, Null, Boolean, Number et String. Le type de référence est Object, et le plus communément. Array utilisé, Date, RegExp, Function, etc. appartiennent tous au type Classe d'objet.

L'une des différences entre les données de base et les données de référence est que lors de la copie d'une variable, les données de base copient une nouvelle copie indépendante, tandis que les données de référence copient une référence à la variable d'origine. Voici un exemple :

// 基本类型数据的复制
var a = 10;
var b = a; // b = 10
a = 20; // a = 20, b = 10
// 引用类型数据的复制
var m = [1, 2];
var n = m;
m[0] = 10;
console.log(n[0]); // 10

Si je souhaite copier la valeur du type référence lui-même au lieu de la référence, la méthode ci-dessus ne peut évidemment pas être utilisée.

2. Copie superficielle du tableau

La copie superficielle signifie que lorsqu'un objet (tableau) est copié, la valeur de son champ de référence ne sera pas copiée, mais copiée Une référence au champ correspondant. Par exemple :

var src = [
 'alpha',
 ['bravo', 'chalie']
];
var dest = [];
for (var i = 0; i < src.length; i++) {
 dest[i] = src[i];
}
//此时，如果改变src中的引用字段，dest中相应的字段也会被改变
src[1].push(&#39;delta&#39;);
console.log(dest[1]); // [&#39;bravo&#39;, &#39;chalie&#39;, &#39;delta&#39;]

La copie superficielle est généralement utilisée pour les tableaux unidimensionnels, c'est-à-dire lorsqu'il n'y a pas de type référence dans le tableau. Les méthodes de copie superficielle couramment utilisées sont :

méthode concat

 var src = ['alpha', 'bravo'],
  dest = [];
 dest = dest.concat(src);

la méthode concat est plus couramment utilisée dans la fusion de tableaux, telle que :

 var a = ['alpha', 'bravo'],
  b = ['chalie', 'delta'],
  combine;
 combine = a.concat(b);

Il convient de souligner en particulier que lorsque concat est utilisé pour fusionner des tableaux, il copie tous les éléments de deux (ou plus) tableaux vers un nouvel objet. Pour les grands tableaux, la surcharge est relativement élevée. Une meilleure façon est de copier les éléments de ce dernier tableau dans le tableau précédent :

 var src = ['alpha', 'bravo'],
  dest = ['chalie', 'delta'];
 Array.prototype.push.apply(src, dest);

méthode slice

méthode slice peut Retours éléments sélectionnés dans un tableau existant, renvoyant un nouveau tableau.

 var src = ['alpha', 'bravo'],
 var dest = src.slice(0);

3. Copie superficielle d'objets

Une copie superficielle d'objets peut être réalisée en utilisant le parcours for-in, et un objet plus pratique est fourni dans es6 . méthode assign().

 var src = {name: 'fox', age: 20},
  dest = null;
 dest = Object.assign({}, src);

Vous pouvez également utiliser $.extend dans jQuery, _.extend en trait de soulignement, etc. pour copier des objets.

4. Copie profonde

La copie superficielle a des scénarios d'application limités. Dans la plupart des cas, nous espérons copier l'objet dans une copie complète, ce qui nécessite. l'utilisation d'opérateurs typeof ou instanof pour déterminer le type de chaque champ. Si un champ est de type basique, il peut être copié directement. Si un champ est de type référence, le jugement ci-dessus doit être effectué sur tous les champs du champ, ce qui nous permet d'envisager facilement d'utiliser la récursion pour implémenter cette fonction.

function deep_copy(src, dest) {
 for (var p in src) {
  if (Array.isArray(src[p]) || src[p] instanceof Object) {
   dest[p] = Array.isArray(src[p]) ? [] : {};
   arguments.callee(dest[p], src[p]);
  }else {
   dest[p] = src[p];
  }
 }
}

json :

 function deep_copy_in_json(src) {
  return JSON.parse(JSON.stringify(src));
 }

attributs de l'objet d'origine seront seront perdus après l'opération. Seront perdus, comme les propriétés du constructeur et certaines méthodes du prototype d'objet.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!