Maison > Article > interface Web > Comment cloner des objets en JavaScript ?

Comment cloner des objets en JavaScript ?

藏色散人original: 2019-04-02 09:54:102458parcourir

En parcourant chaque propriété et en les clonant vers un nouvel objet. L’utilisation de méthodes JSON comme objets source doit être sécurisée pour JSON. Par conséquent, une gestion des exceptions est nécessaire pour le protéger dans les cas où l'objet source ne peut pas être converti en JSON. La méthode object.assign effectue uniquement un clonage superficiel. Cela signifie que les propriétés imbriquées sont toujours clonées par référence.

Remarque, clonage superficiel : les types simples sont passés par valeur et les types d'objets sont passés par référence. Clonage profond : tous les éléments ou attributs sont entièrement copiés et complètement séparés de l'objet d'origine, ce qui signifie que toutes les modifications apportées au nouvel objet ne seront pas reflétées dans l'objet d'origine.

Il existe plusieurs façons de cloner un objet JavaScript, comme suit :

Exemple 1 : Une méthode consiste à parcourir les propriétés de l'objet source et à copier toutes les propriétés. à l'objet cible un par un. C'est simple, mais pas souvent utilisé.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body style = "text-align:center;">
<h1 style = "color:green;" >
    js克隆对象
</h1>
<p id="demo2">sourceObject = {a:1, b:2, c:3};</p>
<button onClick="fun()">click
</button>
<p id="demo"></p>
<script>
    function fun(){
        const sourceObject = {a:1, b:2, c:3};
        let tO = {};
        for (let prop in sourceObject) {
            if (sourceObject.hasOwnProperty(prop)) {
                tO[prop] = sourceObject[prop];
            }
        }
        document.getElementById("demo").innerHTML =
            "targetObject a = "+tO.a+", b = " + tO.b+", c = "+tO.c;
    }
</script>
</body>
</html>

Sortie :

Avant de cliquer sur le bouton

Comment cloner des objets en JavaScript ?

Après avoir cliqué sur le bouton

Comment cloner des objets en JavaScript ?

Exemple 2 : Cet exemple utilise JSON. En utilisant cette méthode, l’objet source doit être sécurisé JSON.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
    js克隆对象
</h1>
<p id="demo2">sourceObject = {a:1, b:2, c:3};</p>
<button onClick="fun()">click
</button>
<p id="demo"></p>
<script>
    function fun(){
        const sourceObject = {a:1, b:2, c:3};
        let tO = {};
        tO = JSON.parse(JSON.stringify(sourceObject));
        document.getElementById("demo").innerHTML =
            "targetObject a = "+tO.a+", b = " + tO.b+", c = "+tO.c;
    }
</script>
</body>
</html>

Exemple 3 : Cette méthode utilise la méthode Object.assign.

<!DOCTYPE html>   
<html>   
    <head>  
        <meta charset="UTF-8">
        <title></title> 
    </head>  
    <body style = "text-align:center;">   
    
        <h1 style = "color:green;" >   
           js克隆对象 
        </h1>   
        <p id="demo2">sourceObject = {a:1, b:2, c:3};</p>     
        <button onClick="fun()">click 
        </button> 
       <p id="demo"></p>  
  
        <script> 
        function fun(){ 
          const sourceObject = {a:1, b:2, c:3}; 
          let tO = {}; 
          tO = Object.assign({}, sourceObject); 
          document.getElementById("demo").innerHTML =  
            "targetObject a = "+tO.a+", b = " + tO.b+", c = "+tO.c; 
          } 
        </script>  
    </body>   
</html>

Recommandations associées : "Tutoriel Javascript"

Cet article concerne la méthode de clonage d'objets en javascript. J'espère qu'il sera utile aux amis qui en ont besoin. il!

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!

Déclaration：

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

Article précédent：Introduction à l'utilisation des fonctions d'ordre supérieur JavaScriptArticle suivant：Introduction à l'utilisation des fonctions d'ordre supérieur JavaScript

Articles Liés

Voir plus