Maison > interface Web > js tutoriel > le corps du texte

Quelle est la différence entre la copie profonde et la copie superficielle dans JS

WBOY
Libérer: 2024-02-18 10:26:06
original
401 Les gens l'ont consulté

Quelle est la différence entre la copie profonde et la copie superficielle dans JS

Quelle est la différence entre la copie profonde et la copie superficielle en JS ? Des exemples de code spécifiques sont nécessaires

En JavaScript, il existe deux méthodes de copie d'objets : la copie superficielle et la copie profonde. Une copie superficielle copie uniquement l'adresse de référence d'un objet, tandis qu'une copie profonde crée une copie complètement indépendante.

La copie superficielle consiste à copier l'adresse de référence de l'objet d'origine vers le nouvel objet. Ils pointent vers le même espace mémoire. Lorsque les propriétés de l'un des objets sont modifiées, les propriétés correspondantes de l'autre objet seront également modifiées. C'est parce qu'ils partagent la même adresse mémoire.

La copie approfondie consiste à créer un tout nouvel objet et à copier tous les attributs de l'objet d'origine vers le nouvel objet un par un. Le nouvel objet et l'objet d'origine n'ont aucune influence l'un sur l'autre. Même si vous modifiez les propriétés d'un objet, les propriétés de l'autre objet ne seront pas affectées.

Ci-dessous, j'illustrerai la différence entre la copie superficielle et la copie profonde à travers des exemples de code spécifiques.

Tout d'abord, regardons un exemple de copie superficielle :

let obj1 = {name: "Alice", age: 20};
let obj2 = obj1;

obj1.age = 21; 

console.log(obj1); // {name: "Alice", age: 21}
console.log(obj2); // {name: "Alice", age: 21}
Copier après la connexion

Dans le code ci-dessus, nous implémentons une copie superficielle en attribuant obj1 à obj2. Lorsque l'attribut age de obj1 est modifié, l'attribut age de obj2 est également modifié car ils pointent vers le même adresse mémoire. obj1赋值给obj2实现了一个浅拷贝。当修改obj1age属性时,obj2age属性也被修改了,这是因为它们指向同一块内存地址。

接下来,我们来看一个深拷贝的示例:

function deepClone(obj) {
    if (obj === null || typeof obj !== 'object') {
        return obj;
    }
    
    let clone = Array.isArray(obj) ? [] : {};
    
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            clone[key] = deepClone(obj[key]);
        }
    }
    
    return clone;
}

let obj1 = {name: "Alice", age: 20};
let obj2 = deepClone(obj1);

obj1.age = 21;

console.log(obj1); // {name: "Alice", age: 21}
console.log(obj2); // {name: "Alice", age: 20}
Copier après la connexion

在上述代码中,我们定义了一个deepClone函数,用于实现深拷贝。该函数首先判断传入的参数是否为null或不是对象类型,如果是则直接返回,否则创建一个与传入对象类型相同的空对象clone。然后通过遍历原对象的属性,递归调用deepClone函数对每个属性进行深拷贝,并赋值给相应的clone属性。最后返回新对象clone

通过使用deepClone函数,我们实现了对obj1的深拷贝。即使修改了obj1age属性,但obj2age

Ensuite, regardons un exemple de copie profonde :

rrreee

Dans le code ci-dessus, nous définissons une fonction deepClone pour implémenter la copie profonde. Cette fonction détermine d'abord si le paramètre transmis est nul ou n'est pas un type d'objet. Si tel est le cas, elle renvoie directement. Sinon, elle crée un objet vide clone du même type que l'objet transmis. . Ensuite, en parcourant les propriétés de l'objet d'origine, en appelant récursivement la fonction deepClone pour copier en profondeur chaque propriété, et l'attribuer à la propriété clone correspondante. Enfin, le nouvel objet clone est renvoyé. 🎜🎜En utilisant la fonction deepClone, nous implémentons une copie complète de obj1. Même si l'attribut age de obj1 est modifié, l'attribut age de obj2 reste inchangé car ils sont deux complètement objets indépendants. 🎜🎜En résumé, la copie superficielle ne copie que l'adresse de référence de l'objet, tandis que la copie profonde crée une copie complètement indépendante. La copie approfondie peut garantir que l'objet d'origine ne sera pas affecté lors de la modification de l'objet de copie et convient à la copie d'objets avec des structures imbriquées. Il convient de noter que dans le développement réel, la copie approfondie peut entraîner une surcharge importante en termes de performances, il est donc nécessaire de choisir une méthode de copie appropriée en fonction de la situation réelle. 🎜

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!