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

本記事では、JavaScriptのオブジェクトをコピーする方法について解説しています。

ITエンジニア特化の転職サイト！
自社内開発求人に強い【クラウドリンク】

先輩くん

年収、休日数、労働環境等クラウドリンクが審査し、これらを通過した優良求人情報のみ紹介しているよ！

後輩ちゃん

100％自社内開発の求人だから、SESのように職場環境が変わらないのがいいね！

簡単30秒で無料登録！

JavaScriptの学習におすすめ参考書
改訂新版JavaScript本格入門～モダンスタイルによる基礎から現場での応用まで

本書情報
著者	山田祥寛
発売日	2016/9/30
ページ数	782ページ
Kindle版	○
レビュー (Amazon)	(146件)

ＪａｖａＳｃｒｉｐｔ本格入門モダンスタイルによる基礎から現場での応用まで改訂新版/技術評論社/山田祥寛

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

Contents

1 オブジェクトのコピー
- 1.1 Object.assignメソッド
  - 1.1.1 注意点：ディープコピーされない
- 1.2 JSON.parseメソッドとJSON.stringifyメソッド

オブジェクトのコピー

Object.assignメソッド

オブジェクトをコピーする場合、Object.assignメソッドを使用します。

Object.assign({}, コピーしたいオブジェクト);

Object.assignはオブジェクト同士の結合で使われることが多いメソッドですが、第一引数に空のオブジェクト「{}」を指定し第二引数にコピーしたいオブジェクトを指定することでオブジェクトのコピーをすることができます。

const fruitsObj = {
  id:1,
  name:"apple"
}

const copyObj = Object.assign({},fruitsObj);
copyObj.name = "orange";
console.log(fruitsObj); // -> {id:1, name:"apple"}
console.log(copyObj); // -> {id:1, name:"orange"}

注意点：ディープコピーされない

Object.assignメソッドを使ってオブジェクトは第一階層までの浅いコピーであれば、問題ありませんがオブジェクトの階層が第二階層以上ある時は正しくコピーされません。

const fruitsObj = {
  id:1,
  name:"apple",
  detail: {
    area: "青森",
    price: 200,
  }
}

const copyObj = Object.assign({},fruitsObj);
copyObj.detail.area = "長野";
copyObj.detail.price = "250";
console.log(fruitsObj); // -> {id:1, name:"apple", detail:{area: "長野",price: 250,}}
console.log(copyObj); // -> {id:1, name:"apple", detail:{area: "長野",price: 250,}}

ディープコピーをする場合は、次に解説するObject.assignメソッドとJSON.parseメソッドとJSON.stringifyメソッドを組み合わせた方法でオブジェクトをコピーしてください。

JSON.parseメソッドとJSON.stringifyメソッド

オブジェクトをディープコピーする場合、Object.assignメソッドとJSON.parseメソッドとJSON.stringifyメソッドを使用します。

Object.assign({}, JSON.parse(JSON.stringify(コピーしたいオブジェクト)));

仕組みを解説すると、JSON.stringifyメソッドでJavaScriptオブジェクトを取得しJSON文字列に変換します。次にJSON.parseメソッドでJSON文字列をJavaScriptに変換します。これで第二階層以上のオブジェクトを別物として扱えるようになったので、Object.assignメソッドでオブジェクトをコピーします。

const fruitsObj = {
  id:1,
  name:"apple",
  detail: {
    area: "青森",
    price: 200,
  }
}

const copyObj = Object.assign({}, JSON.parse(JSON.stringify(fruitsObj)));
copyObj.detail.area = "長野";
copyObj.detail.price = "250";
console.log(fruitsObj); // -> {id:1, name:"apple", detail:{area: "青森",price: 200,}}
console.log(copyObj); // -> {id:1, name:"apple", detail:{area: "長野",price: 250,}}