ダッシュで奪取

ゲーム、読書、人生

【JavaScript】ディープコピーしたい

Tech Tech-JavaScript

つまづいたのでメモです。

失敗

ピカチュウをコピーして、コピーしたピカチュウに10まんボルトを覚えさせてみます。

const pikachu = {
    name: 'ピカチュウ',
    type: 'でんき',
    skills: [
        'でんきショック',
        'しっぽをふる',
        'でんじは',
        'でんこうせっか'
    ]
}

// オリジナル
console.log('オリジナルのピカチュウ >>>>')
console.log(pikachu.name)
console.log(pikachu.skills + '\n')

// オリジナルと同じ、コピーを作る
let copyPikachu = pikachu

// コピーに10まんボルトを覚えさせる
copyPikachu.skills[0] = '10まんボルト'

// コピー
console.log('コピーのピカチュウ >>>>')
console.log(copyPikachu.name)
console.log(copyPikachu.skills + '\n')

// オリジナル
console.log('オリジナルのピカチュウ >>>>')
console.log(pikachu.name)
console.log(pikachu.skills + '\n')

結果

オリジナルのピカチュウ >>>>
ピカチュウ
でんきショック,しっぽをふる,でんじは,でんこうせっか

コピーのピカチュウ >>>>
ピカチュウ
10まんボルト,しっぽをふる,でんじは,でんこうせっか

オリジナルのピカチュウ >>>>
ピカチュウ
10まんボルト,しっぽをふる,でんじは,でんこうせっか

コピーしたピカチュウだけに10まんボルトを覚えさせたつもりだったのですが、コピー元であるオリジナルのピカチュウも覚えてしまいました。

できた

変わったのは、 18行目の部分だけです。
一回 json データにする → json データをオブジェクトの形に戻すことでコピーを作っています。

const pikachu = {
    name: 'ピカチュウ',
    type: 'でんき',
    skills: [
        'でんきショック',
        'しっぽをふる',
        'でんじは',
        'でんこうせっか'
    ]
}

// オリジナル
console.log('オリジナルのピカチュウ >>>>')
console.log(pikachu.name)
console.log(pikachu.skills + '\n')

// オリジナルと同じ、コピーを作る
let copyPikachu = JSON.parse(JSON.stringify(pikachu))

// コピーに10まんボルトを覚えさせる
copyPikachu.skills[0] = '10まんボルト'

// コピー
console.log('コピーのピカチュウ >>>>')
console.log(copyPikachu.name)
console.log(copyPikachu.skills + '\n')

// オリジナル
console.log('オリジナルのピカチュウ >>>>')
console.log(pikachu.name)
console.log(pikachu.skills + '\n')

結果

オリジナルのピカチュウ >>>>
ピカチュウ
でんきショック,しっぽをふる,でんじは,でんこうせっか

コピーのピカチュウ >>>>
ピカチュウ
10まんボルト,しっぽをふる,でんじは,でんこうせっか

オリジナルのピカチュウ >>>>
ピカチュウ
でんきショック,しっぽをふる,でんじは,でんこうせっか

コピーのピカチュウにのみ10まんボルトを覚えさせることができました！ﾔｯﾀｰ

参考URL