JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのスプレッド演算子でオブジェクトをクローン（複製）する方法

オブジェクトのクローン（複製）とは、ある変数に格納されたオブジェクトを別の変数へコピーすることを指します。しかし、単純に代入演算子（=）を使ってコピーしても、意図した通りには動作しません。本来、クローンを作る目的は、片方の変数に加えた変更がもう片方の変数に影響を与えないようにすることです。ところが代入演算子の場合、両者の変数は同じオブジェクトへの参照を共有するため、一方への変更が必ず他方にも反映されてしまいます。

この問題を解決するために、ES6ではスプレッド演算子が導入されました。

例1：代入演算子でコピーした場合

次の例では、代入演算子を使ってオブジェクトをコピーしています。この場合、元のオブジェクトへの変更がコピー先の変数にもそのまま反映されてしまいます。

<html>
<body>
<script>
    var org = {org1 : "Serveneedy", org2 : "Praveenlatha", org3 : "Redcross" };
    document.write(JSON.stringify("without change org :" + " "+ JSON.stringify(org)));
    var neworg = org;
    org.org1 = "gatesfoundation";
    document.write("</br>");
    document.write(JSON.stringify("with change org :" + " "+ JSON.stringify(org)));
    document.write("</br>");
    document.write(JSON.stringify("change also reflected in neworg :" +" "+JSON.stringify(neworg)));
</script>
</body>
</html>

出力結果

"without change org : {\"org1\":\"Serveneedy\",\"org2\":\"Praveenlatha\",\"org3\":\"Redcross\"}"
"with change org : {\"org1\":\"gatesfoundation\",\"org2\":\"Praveenlatha\",\"org3\":\"Redcross\"}"
"change also reflected in neworg :{\"org1\":\"gatesfoundation\",\"org2\":\"Praveenlatha\",\"org3\":\"Redcross\"}"

var neworg = org; のように代入すると、neworgにはorgと同じオブジェクトへの参照が格納されるだけです。そのため、org.org1 を書き換えると、neworg側でも同じ値が変わってしまっています。これは真のクローンとは言えません。

例2：スプレッド演算子でクローンした場合

次の例ではスプレッド演算子を使用しているため、元のオブジェクトに変更を加えても、クローンされたオブジェクトには一切影響しません。

<html>
<body>
<script>
    var org = {org1 : "Serveneedy", org2 : "Praveenlatha", org3 : "Redcross" };
    document.write(JSON.stringify("without change org :" + " "+ JSON.stringify(org)));
    var neworg = {...org};
    org.org1 = "gatesfoundation";
    document.write("</br>");
    document.write(JSON.stringify("with change org :" + " "+ JSON.stringify(org)));
    document.write("</br>");
    document.write(JSON.stringify("change also reflected in neworg" +" "+JSON.stringify(neworg)));
</script>
</body>
</html>

出力結果

"without change org : {\"org1\":\"Serveneedy\",\"org2\":\"Praveenlatha\",\"org3\":\"Redcross\"}"
"with change org : {\"org1\":\"gatesfoundation\",\"org2\":\"Praveenlatha\",\"org3\":\"Redcross\"}"
"change also reflected in neworg : {\"org1\":\"Serveneedy\",\"org2\":\"Praveenlatha\",\"org3\":\"Redcross\"}"

出力を見ると、org.org1 を "gatesfoundation" に変更しても、スプレッド演算子で作成した neworg の値は元のまま保たれています。{...org} と記述することで、プロパティがすべて展開され、新しい独立したオブジェクトが生成されるからです。

注意点：スプレッド演算子はシャローコピー

スプレッド演算子による複製はシャローコピー（浅いコピー）である点に注意が必要です。オブジェクトの直下のプロパティは独立しますが、ネストされたオブジェクトや配列までは複製されず、参照が共有されたままになります。ネスト構造ごと完全に複製したい場合は、structuredClone() や再帰的なディープコピー処理を検討してください。

  1. JavaScriptスプレッド演算子の使い方を徹底解説！配列の展開と結合の基本

    JavaScriptのスプレッド演算子（...）は、配列を個々の要素へと展開できる便利な構文です。使い方は非常にシンプルで、配列名の前にドット3つ（...）を記述するだけです。 スプレッド演算子の基本構文 [...配列名] この構文により、配列の中身が個別の要素として展開されます。代表的な活用場面は以下の通りです。 複数の配列を結合して、新しい配列を作成する 既存の配列のコピー（シャローコピー）を作る 関数を呼び出す際に、配列の各要素を引数として渡す 実装例：2つの配列をスプレッド演算子で結合する 次のサンプルコードでは、数値の配列 arr1 と文字列の配列 arr2 をスプレッド演算

  2. JavaScriptでURLオブジェクトを作成する方法をわかりやすく解説

    JavaScriptでは、標準組み込みのURLコンストラクタを使うことで、URL文字列からURLオブジェクトを簡単に生成できます。URLオブジェクトを作成すると、プロトコル（protocol）やホスト名（host）、パス（pathname）など、URLを構成する各要素に個別にアクセスできるようになるため、URLの解析や操作がとても便利になります。 URLオブジェクトの作成例 以下は、JavaScriptでURLオブジェクトを作成し、ボタンをクリックするとその各プロパティを画面に表示するサンプルコードです。 <!DOCTYPE html> <html lang="