Apprenez à fusionner et cloner des objets en JavaScript dans un seul article

Cet article vous présentera comment fusionner et cloner des objets en JavaScript. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Les valeurs primitives et de référence (objets) se comportent très différemment lorsque l'on souhaite les copier.

Valeur primitive

Nous supposons qu'une variable name est associée à une valeur primitive (nombre, chaîne, booléen, indéfini et nul). Si nous copions cette variable name vers une autre variable name2 , toute modification de la variable d'origine n'affectera pas la deuxième variable puisqu'il s'agit de valeurs d'origine.

let name="前端小智";
let name2= name;
console.log (name, name2); // 前端小智, 前端小智
name="王大冶";
console.log (name,name2); // 王大冶 前端小智

Valeur de référence

Cependant, si nous faisons la même chose avec une valeur de type référence, toutes les modifications que nous apportons à une variable seront également reflétées dans l'autre dans une variable car les deux variables pointent vers le même objet.

Array

Pour copier un tableau, la méthode slice() est utilisée pour créer une nouvelle copie du tableau. Cette copie peut être modifiée indépendamment sans affecter le tableau d'origine.

Si aucun argument n'est passé, il crée une copie exacte du tableau, mais des nombres peuvent également être transmis comme arguments. Si un seul nombre est passé, il déterminera la valeur de l'index à partir duquel nous voulons copier, tandis que si deux nombres sont passés, il marquera le début et la fin.

// 示例1
const names = ['前端小智', '王大冶', '小力'];
const names2 = names;
console.log(names, names2);
// ["前端小智", "王大冶", "小力"] 
// ["前端小智", "王大冶", "小力"] 

// 示例2
names2[2] = '前端小力';
console.log(names, names2);
//  ["前端小智", "王大冶", "前端小力"] 
//  ["前端小智", "王大冶", "前端小力"] 

// 示例3
const name2 = names.slice();
names[2] = '我是隔壁老智';
console.log(name2, names2)
// ["前端小智", "王大冶", "前端小力"]
//  ["前端小智", "王大冶", "我是隔壁老智"]

Objet

La même chose se produit lorsque la valeur de référence est un objet, toute modification d'une de ses propriétés affectera les deux variables. Pour cloner un objet, utilisez la méthode Object.assign() , qui copie les valeurs de toutes les propriétés énumérables d'un ou plusieurs objets source vers l'objet cible, mais cette méthode ne fait qu'une copie superficielle de l'objet.

// 示例1
const names = {
  name: '前端小智',
  surname: '隔壁老智'
}

const names2 = names;
console.log(names, names2) // 打印结果是一模一样的

// 示例2
names2.surname ='隔壁老王';
console.log(names, names2)

// {name: "前端小智", surname: "隔壁老王"}
// {name: "前端小智", surname: "隔壁老王"}

// 示例3
const names3 = Object.assign({}, names);
names3.surname = '隔壁老色P';
console.log(names, names3)

// {name: "前端小智", surname: "隔壁老王"}
// {name: "前端小智", surname: "隔壁老色P"}

Pour faire une copie complète d'un objet, vous devez utiliser d'autres méthodes.

Comme nous l'avons dit, la méthode Object.assign() ne fonctionne que comme une copie superficielle (c'est-à-dire lorsque notre objet n'a pas d'autres objets comme propriétés). Dans ces cas, une copie complète de l'objet doit être réalisée.

Contrairement à la copie superficielle, la copie profonde copie chaque objet enfant de manière récursive jusqu'à ce que tous les objets impliqués aient été copiés.

Quelles méthodes pouvons-nous utiliser pour faire une copie complète d'un objet ?

JSON.parse(JSON.stringify(obj))

Cette méthode utilise JSON.stringify() pour convertir l'objet en chaîne, puis JSON.parse() Reconvertir en objet. Cette méthode fonctionne pour les objets simples, mais pas si les propriétés de l'objet sont des fonctions.

const names = {
  name: '前端小智',
  surname: '隔壁老智',
  social: {
    wx: '大迁世界',
    url: 'www.lsp.com'
  }
}
const names2 = JSON.parse(JSON.stringify(names));
names2.social.url = 'www.baidu.com';
console.log(names, names2);

/** 
{
  name: "前端小智"
  social: {wx: "大迁世界", url: "www.lsp.com"}
  surname: "隔壁老智"
}
*/

/** 
{
  name: "前端小智"
  social: {wx: "大迁世界", url: "www.baidu.com"}
  surname: "隔壁老智"
}
*/

Deep Copy

Une autre façon très intéressante et élégante de copier en profondeur des objets consiste à utiliser des fonctions récursives.

Nous créons une fonction deepClone(object) et lui passons l'objet que nous voulons cloner en paramètre. À l'intérieur de la fonction, une variable locale clone sera créée, qui est un objet vide dans lequel chaque propriété qui sera clonée à partir de l'objet de départ y sera ajoutée.

Idées concrètes :

• Si la propriété n'est pas un objet, clonez-la simplement et ajoutez-la au nouvel objet cloné.
• Si la propriété est un objet, exécutez à nouveau la fonction deepClone（value） et passez la valeur de la propriété (objet dans ce cas) comme argument et répétez le même processus.

function deepClone(object) {
  var clone = {};
  for (var key in object) {
    var value = object[key];
    if (typeof(value) !== 'object') {
      clone[key] = value;
    } else {
      clone[key]=deepClone(value);
    }
  }
  return clone;
} 

deepClone({value1:1,value2:{value3:2}});
//{value1:1,value2:{value3:2}}
deepClone({value1:1,value2:{value3:{value3b:3}}});
//{value1:1,value2:{value3:{value3b:3}}}

Adresse originale en anglais : https://www.ma-o.org/en/programming/javascript/the-javascript-asign-method-to-merge-and-clone -objets

Auteur : Luigi Nori

Traducteur : Front-end Xiaozhi

Pour plus de connaissances liées à la programmation, veuillez visiter : Vidéo de programmation ! !

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!