本記事では、JavaScriptのオブジェクトをコピーする方法について解説しています。
JavaScriptの学習におすすめ書籍
1冊ですべて身につくJavaScript入門講座
メリット
- 誰でも分かるように嚙み砕いて説明してくれる
- アニメーションの知識が深く学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
全プログラマー必見！
変数名/関数名にもう悩まない！
変数名/関数名にもう悩まない！
リーダブルコード
メリット
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 （2023/07/23 02:48時点 | Amazon調べ）
ポチップ
目次
オブジェクトのコピー
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,}}