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

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

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

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

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

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

参考書が苦手な人はUdemyの動画がおすすめ
ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)

動画情報
作成者	CodeMafia
学習時間	19.5時間
受講者数	28,547人
レビュー	(5,025件)

動画の詳細はこちら

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,}}