JavaScript でオブジェクトのクローンを作成するにはどうすればよいですか?-jsチュートリアル-php.cn

JavaScript でオブジェクトのクローンを作成するにはどうすればよいですか?

藏色散人

リリース： 2019-04-02 09:54:10

オリジナル

2527 人が閲覧しました

各プロパティをループし、新しいオブジェクトに複製します。 JSON メソッドをソースオブジェクトとして使用する場合は、JSON が安全である必要があります。したがって、ソースオブジェクトを JSON に変換できない場合に安全に保つために、例外処理が必要です。 object.assign メソッドは浅いクローン作成のみを実行します。これは、ネストされたプロパティが引き続き参照によって複製されることを意味します。

JavaScript でオブジェクトのクローンを作成するにはどうすればよいですか?

注意: 浅いクローン作成: 単純型は値によって渡され、オブジェクト型は参照によって渡されます。ディープクローン作成: すべての要素または属性が完全にコピーされ、元のオブジェクトから完全に分離されます。つまり、新しいオブジェクトに対する変更はすべて元のオブジェクトに反映されません。

JavaScript オブジェクトのクローンを作成するには、次のようにいくつかの方法があります。

例 1: 1 つの方法は、ソースオブジェクトのプロパティを反復処理し、すべてのプロパティをコピーすることです。対象オブジェクトに 1 つずつ追加します。シンプルですが、あまり使用されません。

<!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>

ログイン後にコピー

出力:

ボタンをクリックする前

JavaScript でオブジェクトのクローンを作成するにはどうすればよいですか?

##ボタンをクリックした後

JavaScript でオブジェクトのクローンを作成するにはどうすればよいですか?

#例 2

: この例では JSON を使用します。このメソッドを使用する場合、ソースオブジェクトは 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>

ログイン後にコピー

例 3

: このメソッドは、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>

ログイン後にコピー

関連する推奨事項: "javascript チュートリアル "この記事は、JavaScript でオブジェクトのクローンを作成する方法についてです。困っている友人の役に立てば幸いです。 
以上がJavaScript でオブジェクトのクローンを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。