2017.10.17
2020.1.7

オブジェクトの複製(クローン、ディープコピー)

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では動作しません。

参考リンク

JavaScript】関連記事