Comment cloner des objets en JavaScript ?-js tutoriel-php.cn

Comment cloner des objets en JavaScript ?

藏色散人

Libérer： 2019-04-02 09:54:10

original

2473 Les gens l'ont consulté

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.

Comment cloner des objets en JavaScript ?

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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!