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

JavaScriptでオブジェクトを浅くコピー（シャローコピー）する方法をわかりやすく解説

JavaScriptでオブジェクトを浅いコピー（シャローコピー）したい場合、ライブラリUnderscore.jsが提供する_.extend()メソッドを利用できます。このメソッドは、1つ以上のソースオブジェクトが持つすべてのプロパティを宛先（destination）オブジェクトへコピーし、その宛先オブジェクトを返します。

ここで重要なのは、コピーが参照（reference）ベースで行われるという点です。つまり、ネストされたオブジェクトや配列の中身そのものは複製されず、元データへの参照が引き継がれます。これこそが「浅いコピー」と呼ばれる所以です。

構文

_.extend(object*);

_.extend()は複数のオブジェクトを引数として受け取ることができ、その数に制限はありません。最初のオブジェクトが宛先となり、以降のオブジェクトのプロパティが順番にマージされていきます。

例1：3つのオブジェクトをマージする

次の例では、3つの独立したオブジェクトを浅いコピーによって1つに統合し、結果を出力しています。

<html>
<body>
<script
    src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/0.10.0/lodash.min.js"></script>
</head>
<body>
    <script>
    var res = JSON.stringify(_.extend(
        {name: 'Ram', designation: "content developer"},
        {age: 50},
        {salary: 1200000}));
        document.write((res));
    </script>
</body>
</html>

出力結果

{"name":"Ram","designation":"content developer","age":50,"salary":1200000}

各オブジェクトが持っていたプロパティ（name、designation、age、salary）がすべて1つのオブジェクトに統合されているのが確認できます。

例2：別の組み合わせでマージする

<html>
<body>
<script
    src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/0.10.0/lodash.min.js"></script>
</head>
<body>
    <script>
        var res = JSON.stringify(_.extend(
            {name: 'Ram', designation: "content developer"},
            {age: 50,salary: 1200000},
            {country: "India"}));
        document.write((res));
    </script>
</body>
</html>

出力結果

{"name":"Ram","designation":"content developer","age":50,"salary":1200000,"country":"India"}

補足：モダンな代替手段

現在のJavaScriptでは、ライブラリに頼らなくても、標準のObject.assign()メソッドやスプレッド構文を使って同じように浅いコピーを実現できます。

const merged = Object.assign({}, obj1, obj2);
// または
const merged = {...obj1, ...obj2};

ただし、これらも同様に「浅いコピー」である点には注意が必要です。ネストされたオブジェクトまで完全に複製したい場合は、structuredClone()など深いコピー（ディープコピー）向けの手法を検討しましょう。

  1. JavaScriptで2つのオブジェクトをマージする方法を解説

    JavaScriptでは、スプレッド構文（...）を使うことで、2つのオブジェクトを簡単に1つにマージ（結合）できます。各オブジェクトの前に「...」を付けて新しいオブジェクトリテラル内に展開するだけで、すべてのプロパティが統合されたオブジェクトが生成されます。以下に、2つのJavaScriptオブジェクトをマージするコードの例を示します。コード例<!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=dev

  2. JavaScriptでオブジェクトにreduceメソッドを適用する方法

    JavaScriptのreduce()メソッドは本来配列向けのメソッドのため、オブジェクトにそのまま適用することはできません。そこで、Object.values()メソッドを使ってオブジェクトの値を配列として取り出し、その配列に対してreduce()を適用します。 以下は、JavaScriptでオブジェクトの値にreduceメソッドを適用するコード例です。 コード例 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content