本記事では、JavaScriptのオブジェクトをコピーする方法について解説しています。
ITエンジニア特化の転職サイト!
自社内開発求人に強い【クラウドリンク】
JavaScriptの学習におすすめ参考書
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで
オブジェクトのコピー
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,}}