Guinguette Marais Poitevin

この記事では、JavaScriptでオブジェクトのシャロークローン（コピー）を簡単に行う3つの方法を紹介します。

ボーナスとして、クローンのその場でプロパティを更新、追加、削除する方法もご紹介します。 これは、不変的な方法でオブジェクトの更新を行いたい場合に便利です。

注意事項

この記事で紹介したオブジェクトのクローンを作成する3つの方法は、浅いコピーを行います。

浅いコピーとは、実際のオブジェクトだけがコピーされることを意味します。 コピーされたオブジェクトにネストされたオブジェクトが含まれている場合、これらのネストされたオブジェクトはクローン化されません。

1. object spreadを使用したクローン作成

プレーンなJavaScriptオブジェクトをクローン作成する最も簡単な方法は、object spread演算子を呼び出すことです。

const clone = { ...object};

ここで、objectcloneobjectの浅いコピーです。

例えば、heroのオブジェクトのシャローコピーを作成してみましょう。

const hero = { name: 'Batman', city: 'Gotham'};const heroClone = { ...hero};heroClone; // { name: 'Batman', city: 'Gotham' }hero === heroClone; // => false

heroCloneheroheroのすべてのプロパティを含んでいることを意味します。

hero === heroClonefalseheroheroClone は、それにもかかわらず、異なるオブジェクトのインスタンスです。

1.1 オブジェクト スプレッドの利点

オブジェクト スプレッドを使用する直接的な利点は、必要に応じて、その場でクローンされたオブジェクトに新しいプロパティを更新または追加できることです。

heronamerealName を追加してみましょう。

const hero = { name: 'Batman', city: 'Gotham'};const heroEnhancedClone = { ...hero, name: 'Batman Clone', realName: 'Bruce Wayne'};heroEnhancedClone; // { name: 'Batman Clone', city: 'Gotham', realName: 'Bruce Wayne' }

2. オブジェクトレストを使用したクローン作成

オブジェクトを浅くクローンするもう一つの良い方法は、オブジェクトレスト演算子を使用することです：

const { ...clone } = object;

再度、レスト演算子を使用して、heroオブジェクトのコピーを作成してみましょう。

const hero = { name: 'Batman', city: 'Gotham'};const { ...heroClone } = hero;heroClone; // { name: 'Batman', city: 'Gotham' }hero === heroClone; // => false

rest演算子const { ...heroClone } = heroheroCloneheroオブジェクトのコピーが入っています。

2.1 オブジェクトレストのボーナス: クローン化されたプロップをスキップする

オブジェクトレストを使用する際の良いボーナスとして、クローン化の際に特定のプロパティをスキップすることができます。

たとえば、herocityプロパティをスキップします。2.スーパーボーナス: オブジェクトの拡散と復元の組み合わせ

オブジェクトの拡散には、新しいプロパティを更新または追加するというボーナスがあり、オブジェクトの復元には、結果として得られるクローンのプロパティをスキップするというメリットがあります。

これらの利点をすべて引き継ぐために、object spread と rest を 1 つのステートメントにまとめることはできるでしょうか。 はい、できます。

herorealNamecity をスキップしてみましょう。

const hero = { name: 'Batman', city: 'Gotham'};const { city, ...heroClone } = { ...hero, realName: 'Bruce Wayne'};heroClone; // { name: 'Batman', realName: 'Bruce Wayne' }

オブジェクトのスプレッドとレストを組み合わせて、オブジェクトのクローンとプロパティの操作を1つのステートメントで実行できるのは素晴らしいですね。

3. Object.assign()を使ったクローン作成

4.assign()

最後に、Object.assign(target, ...sources)で同じオブジェクトのクローンを作成してみましょう。

const clone = Object.assign({}, object);

実際にObject.assign()heroオブジェクトのクローンオブジェクトを作成してみましょう。

const hero = { name: 'Batman', city: 'Gotham'};const heroClone = Object.assign({}, hero);heroClone; // { name: 'Batman', city: 'Gotham' }hero === heroClone; // => false

Object.assign({}, hero)herohero{}にマージして作成します。

3.1 Object.assign() のボーナス: クローンのプロップを追加または更新する

Object.assign() では、クローンに新しいプロパティを更新または追加することもできます。

heroname プロパティを更新してみましょう。

const hero = { name: 'Batman', city: 'Gotham'};const heroClone = Object.assign({}, hero, { name: 'Batman Clone' });heroClone; // { name: 'Batman Clone', city: 'Gotham' }

Object.assign({}, hero, { name: 'Batman Clone' })は、2つのステップでオブジェクトを作成します。

まず、第2引数のhero{}{ name: 'Batman', city: 'Gotham' }に相当します。

次に、3番目の引数 { name: 'Batman Clone' }name{ name: 'Batman Clone', city: 'Gotham' } が得られます。

4. まとめ

JavaScriptでは、spread演算子、rest演算子、Object.assign()関数を使って、オブジェクトをクローンする3つの良い方法があります。

単にオブジェクトを複製するだけでなく、オブジェクトスプレッドやObject.assign()を使用することで、複製を作成する際にプロパティを追加したり更新したりすることができます。

Rest演算子では、クローン作成時に特定のプロパティをスキップできるというメリットもあります。

さらに素晴らしいことに、オブジェクトの拡散とレストを1つのステートメントにまとめることができますので、オブジェクトのクローンを作成すると同時に、クローン作成時にプロパティを追加、更新、スキップすることができます。

これは、不変性を受け入れて、クローンされたオブジェクトのプロパティをその場で操作できるようにしたい場合に便利です。

他にJavaScriptでオブジェクトをクローンする良い方法があれば教えてください。