JavaScript로 깊이 있게 복사하려는 경우

개시하다

모드를 사용할 때, 간혹 대상의 깊이 있는 복사를 하고 싶을 때가 있다
조사를 해도 자신이 기대하는 결과가 될 수 있는 방법이 없기 때문에 메모로 정리하고 싶다.만약 틀리거나 더 좋은 방법이 있다면, 나에게 메시지를 남길 수 있다면 나는 매우 기쁠 것이다!

이루고 싶은 일.

Arrray에 여러 객체의 데이터를 좋은 느낌으로 복사하려면...

[{'key1': 'value1', 'key2':'value2'},{'key1': 'value3', 'key2': undefined}]

깊이 있는 복제가 필요한 이유

위의 내용을 복사하고 대상 대상을 수정합니다...

let lists = [{'key1': 'value1', 'key2':'value2'},{'key1': 'value3', 'key2': undefined}]
let copyLists = [...lists]
lists[0].key1 = "hoge"

console.log({lists})
console.log({copyLists})

실행 결과(부분 발췌문)

lists: Array(2)
0: {key1: "hoge", key2: "value2"}
1: {key1: "value3", key2: undefined}

copyLists: Array(2)
0: {key1: "hoge", key2: "value2"}
1: {key1: "value3", key2: undefined}

이렇게 복제 대상을 수정할 때 복제 대상에 업데이트되었습니다.상기 복사 방법의 경우lists와copyLists는 메모리에 있는 동일한 데이터를 참고했다.(세부 사항은 자신도 완전히 이해할 수 없지만, 위와 같은 경우에는 복사해서 다른 대상을 만들었다기보다는 같은 대상에 별명을 붙였다고?)
깊이 있는 복제의 경우 객체와 스토리지의 데이터를 복제할 별도의 객체를 만들 수 있습니다.

딥 카피를 해봤어요.

방법1

인터넷에 검색하면 JSON이 자주 등장한다.parse(JSON.strringify) 방법을 사용합니다.
우선 이 방법을 시험해 보았다.

let lists = [{'key1': 'value1', 'key2':'value2'},{'key1': 'value3', 'key2': undefined}]
let copyLists = JSON.parse(JSON.stringify(lists))
lists[0].key1 = "hoge"

console.log({lists})
console.log({copyLists})

실행 결과(부분 발췌문)

lists: Array(2)
0: {key1: "hoge", key2: "value2"}
1: {key1: "value3", key2: undefined}

copyLists: Array(2)
0: {key1: "value1", key2: "value2"}
1: {key1: "value3"}

복제 대상을 수정해도 복제 대상은 업데이트되지 않지만 키2가 존재하지 않기 때문에 값이undefined이면 키와 함께 사라집니다.
찾아보니 여기 기사. 특정 대상의 속성이면 사라질 것 같다는 해설이 있었다.

방법2

Array.prototype.맵()으로 새 대상 만들기 모드

let lists = [{'key1': 'value1', 'key2':'value2'},{'key1': 'value3', 'key2': undefined}]
let copyLists = lists.map( list => ({'key1': list.key1, 'key2': list.key2}))
lists[0].key1 = "hoge"

console.log({lists})
console.log({copyLists})

실행 결과(부분 발췌문)

lists: Array(2)
0: {key1: "hoge", key2: "value2"}
1: {key1: "value3", key2: undefined}

copyLists: Array(2)
0: {key1: "value1", key2: "value2"}
1: {key1: "value3", key2: undefined}

복제 대상을 수정해도 복제 대상은 업데이트되지 않으며 undefined 값의 대상도 깊이 있게 복제할 수 있습니다!

let lists = [{'key1': 'value1', 'key2':'value2'},{'key1': 'value3', 'key2': undefined}]
let copyLists = lists.map( list => ({...list}))
lists[0].key1 = "hoge"

console.log({lists})
console.log({copyLists})

실행 결과(부분 발췌문)

lists: Array(2)
0: {key1: "hoge", key2: "value2"}
1: {key1: "value3", key2: undefined}

copyLists: Array(2)
0: {key1: "value1", key2: "value2"}
1: {key1: "value3", key2: undefined}

오프라인 문법을 사용한 방법이라면 키가 변해도 수정할 필요가 없어 보기 좋아요!

방법3

lodash 사용 방법
lodash 미리 설치!

npm i --save lodash

여기서 가져오기!

import _ from 'lodash'

lodash의clonneDeep을 사용한 깊이 복제

let lists = [{'key1': 'value1', 'key2':'value2'},{'key1': 'value3', 'key2': undefined}]
let copyLists = _.cloneDeep(lists)
lists[0].key1 = "hoge"

console.log({lists})
console.log({copyLists})

실행 결과(부분 발췌문)

lists: Array(2)
0: {key1: "hoge", key2: "value2"}
1: {key1: "value3", key2: undefined}

copyLists: Array(2)
0: {key1: "value1", key2: "value2"}
1: {key1: "value3", key2: undefined}

별도로lodash 설치 필요
실현하기 쉽다
・다른 방법과 달리 심층 복제 가능
상기 몇 시부터 앞으로 나는 이쪽의 방법으로 실시하고 싶다!

총결산

이 근처는 아주 평범한 곳이기 때문에 천천히 이해를 깊게 하고 싶어요...

참고 자료

・JavaScript의 DeepCopy에서 JSONparse/stringify 를 사용할 수 없습니다.