ホームページ > 記事 > ウェブフロントエンド > JavaScript でオブジェクトのクローンを作成するにはどうすればよいですか?

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

藏色散人オリジナル: 2019-04-02 09:54:102458ブラウズ

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

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

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 メソッドを使用します。 <pre class="brush:php;toolbar:false"><!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></pre>関連する推奨事項: "

javascript チュートリアル

"この記事は、JavaScript でオブジェクトのクローンを作成する方法についてです。困っている友人の役に立てば幸いです。

以上がJavaScript でオブジェクトのクローンを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JavaScript 高階関数の使用法の概要次の記事：JavaScript 高階関数の使用法の概要

続きを見る