オブジェクトの複製(クローン、ディープコピー)
JavaScriptでオブジェクトを複製(クローン)する方法です。
単純にObject.assign()を呼び出しただけではメソッドや子オブジェクトまではコピーしてくれないので、その辺りも含めてすべてコピーする方法です。
コード
// コピー対象のデータ
var bookData = {
title: "タイトル",
author: {
name: "名前",
age: 25
},
release: [
2017,
10,
17
],
view: 0
};
bookData.countUp = function(){
this.view += 1;
};
bookData.countDown = function(){
this.view -= 1;
};
// コピー処理の動作確認
function copyTest01(){
var copyObj = deepCopy(bookData);
copyObj.title = "タイトルコピー";
copyObj.author.name = "名前コピー";
copyObj.release[0] = 2018;
copyObj.countUp();
console.log(bookData); // {title: "タイトル", author: {name: "名前", age: 25}, release: [2017, 10, 17], view: 0, countUp: ƒ, countDown: ƒ}
console.log(copyObj); // {title: "タイトルコピー", author: {name: "名前コピー", age: 25}, release: [2018, 10, 17], view: 1, countUp: ƒ, countDown: ƒ}
}
// ディープコピー
function deepCopy(obj) {
var copy;
if (null == obj || "object" != typeof obj) return obj;
if (obj instanceof Date) {
copy = new Date();
copy.setTime(obj.getTime());
} else if (obj instanceof Array) {
copy = [];
for (var i = 0, len = obj.length; i < len; i++) {
copy.push(deepCopy(obj[i]));
}
} else if (obj instanceof Object) {
copy = Object.create(obj);
for (var key in obj) {
if (obj.hasOwnProperty(key)) copy[key] = deepCopy(obj[key]);
}
}
return copy;
}
なお、Object.assign()を利用しているのでIEでは動作しません。