JavaScriptでオブジェクトをコピーする方法

JavaScript は、オブジェクトを操作するためのメソッドを多数提供する強力なプログラミング言語です。 JavaScript では、オブジェクトはキーと値のペアで構成されるデータ構造を指します。場合によっては、オブジェクトを単に参照するのではなく、コピーする必要があることがあります。この記事では、JavaScript でオブジェクトをコピーするさまざまな方法について説明します。

方法 1: Object.assign() を使用する

Object.assign() メソッドを使用して、1 つ以上のソース オブジェクトのすべてのプロパティをターゲット オブジェクトにコピーします。このメソッドはオブジェクトのコピーにも使用できます。

たとえば、従業員情報を含むオブジェクトがあります:

let employee = {
    name: 'John Doe',
    age: 25,
    position: 'Developer'
};

Object.assign() を使用してこのオブジェクトをコピーできます:

let newEmployee = Object.assign({}, employee);

この例では、次を使用します。空のオブジェクトをターゲット オブジェクトとして指定し、それを最初の引数として渡します。ソース オブジェクト (従業員) が 2 番目のパラメータです。このコードを実行すると、従業員オブジェクトのすべてのプロパティと値を含む新しいオブジェクト newEmployee が作成されます。

複数のオブジェクトをコピーする場合は、以下に示すように、オブジェクトを Object.assign() メソッドに順番に渡します。

let newEmployee = Object.assign({}, employee1, employee2, employee3);

方法 2: スプレッド演算子を使用する

スプレッド演算子 (...) は ES6 で導入され、さまざまな場所で使用できます。配列またはオブジェクトでスプレッド演算子を使用して、その要素をスプレッドできます。オブジェクト内でスプレッド演算子を使用して、すべてのプロパティをソース オブジェクトからターゲット オブジェクトにコピーします。

たとえば、スプレッド演算子を使用して従業員オブジェクトをコピーできます:

let newEmployee = { ...employee };

この例では、従業員オブジェクトから展開されたすべてのプロパティを使用して、新しいオブジェクト newEmployee を作成します。ここの「...」はスプレッド演算子の構文です。これは、従業員オブジェクトからすべてのプロパティを抽出し、それらを新しいオブジェクト newEmployee に追加します。この新しいオブジェクトは完全に独立したオブジェクトであり、従業員オブジェクトへの参照ではありません。

方法 3: JSON.parse() および JSON.stringify() を使用する

JavaScript では、JSON.parse() および JSON.stringify() メソッドを使用して、物体 。オブジェクトを JSON 文字列に変換し、その文字列を解析して新しいオブジェクトを作成できます。

たとえば、次のオブジェクトがあります:

let employee = {
    name: 'John Doe',
    age: 25,
    position: 'Developer'
};

JSON.parse() メソッドと JSON.stringify() メソッドを使用して、このオブジェクトをコピーできます:

let newEmployee = JSON.parse(JSON.stringify(employee));

これら2 メソッドの組み合わせは、オブジェクトをコピーする場合に非常に役立ちます。ただし、関数やオブジェクト参照を含む特殊なデータ型、または JSON 文字列に変換できない特殊なデータ型はコピーできない場合があることに注意してください。

方法 4: ディープ コピー方法を使用する

上記の方法のいずれも要件を満たさない場合は、ディープ コピー方法を使用できます。ディープ コピー方法では、オブジェクト参照とサブオブジェクトを含むオブジェクト全体がコピーされます。 Lodash、Underscore.js など、ディープ コピー メソッドを提供するライブラリが多数あります。ここでは、Lodash ライブラリを使用してオブジェクトをコピーする方法を紹介します。

まず、Lodash ライブラリをインストールする必要があります。 Node.js では、次のコマンドを使用してインストールできます。

npm install lodash

ブラウザでは、次の CDN リンクを使用できます。

<script src="https://cdn.jsdelivr.net/lodash/4.17.15/lodash.min.js"></script>

Lodash ライブラリをインストールして導入した後、次のことができます。 cloneDeep() メソッドを使用して、元のオブジェクトのコピーを作成します。

let newObject = _.cloneDeep(originalObject);

この例では、 cloneDeep() メソッドは、originalObject オブジェクトを完全にコピーし、新しいオブジェクト newObject を返します。

結論

上記は、JavaScript でオブジェクトをコピーするさまざまな方法です。各方法には、ニーズに応じて長所と短所があります。これらの方法を使用する前に、各方法がどのように機能するかを理解し、特定の状況にどれが最適かを判断することが重要です。どちらの方法を選択する場合でも、オブジェクト参照をコピーするときとオブジェクト自体をコピーするときを必ず理解してください。

以上がJavaScriptでオブジェクトをコピーする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。