【Javascript】JSONオブジェクトの値をコピーする
JSONオブジェクトの値を簡単にコピする方法を考えてみました。
JavascriptにてJsonオブジェクトをコピーして他の処理でも使いたい時に、Object.assign()ではうまくいかなかったので、他のうまいやり方を考えてみました。
以下のような単純なオブジェクトの場合には、Object.assign()で簡単にコピーができます。
var hogehogeOne = {
name: 'ほげほげ'
};
var hogehogeTwo = Object.assgin({}, hogehogeOne);
console.log(hogehogeOne.name);
hogehogeTwo.name = 'ふがふが';
console.log(hogehogeOne.name); // ほげほげと出力
console.log(hogehogeTwo.name); // ふがふがと出力
では以下のオブジェクトをコピーするとどうなるでしょうか？
var hogehogeOne = {
name: 'ほげほげ',
profile: {
age: 20,
from: 'japan'
}
};
var hogehogeTwo = Object.assgin({}, hogehogeOne);
console.log(hogehogeOne.profile.age); // 20と出力
hogehogeTwo.profile.age = 25;
console.log(hogehogeOne.profile.age); // 25と出力
この場合はコピー元のprofileオブジェクトの参照が引き継がれており、hogehogeTwoの変更がhogehogeOneにも反映されてしまっています。
Object.assgin()は、オブジェクトの中のオブジェクトをコピーすることができません。
Object.assgin()を使ってコピーを行うのであれば、オブジェクト内にオブジェクトがあるかどうか判定し、オブジェクトあればさらにそのオブジェクト内にオブジェクトがあるか判定、オブジェクトがなければObject.assgin()を使ってコピーするという一連の流れを再帰的に処理する必要があります。
そんな処理を実装するのは手間なため、視点を変えてみました。
var hogehogeOne = {
name: 'ほげほげ',
profile: {
age: 20,
from: 'japan'
}
};
var hogehogeTwo = JSON.parse(JSON.stringify(hogehogeOne));
console.log(hogehogeOne.profile.age); // 20と出力
hogehogeTwo.profile.age = 25;
console.log(hogehogeOne.profile.age); // 20と出力
console.log(hogehogeTwo.profile.age); // 25と出力
今扱おうとしているのはJSON形式のオブジェクトなので、JSON.stringify()で一旦オブジェクトを文字列に変換し、JSON.parse()で文字列からオブジェクトに変換すれば、オブジェクトのコピーを行うことができます。
少しゴリ押し感が強いですが、簡単にJSONオブジェクトのコピーを行うのであれば、この方法が良いのではないでしょうか。
他に良い実装方法があればコメントしていただけるとありがたいです。
参考資料
