JavaScript JSON 대상 을 깊이 복사 하 는 5 가지 방법

목차

응용 장면

방법 1

방법 2

방법 3

방법 4

방법 5

참조 링크

응용 장면
JavaScript 에서 Object 는 인용 형식 입 니 다. 대상 obj A 를 obj B 에 할당 한 후 obj B 의 값 을 바 꾸 면 obj A 가 달라 집 니 다.이것 은 기본적으로 얕 은 복사 본 을 실 행 했 기 때 문 입 니 다. 즉, 메모리 에 포인터 하나만 복사 되 어 object B 에 게 주 었 고 메모리 에 있 는 데이터 자 체 는 복사 되 지 않 았 습 니 다.
만약 에 우리 가 깊이 있 는 복사 가 필요 하 다 면, 즉 object B = object A 를 실행 한 후에 object B 와 object A 가 더 이상 직접적인 관 계 를 가지 지 않도록 하 는 것 입 니 다. 어떻게 조작 해 야 합 니까?
방법 1
ES6 새로운 기능

const clone = {...original}

예시:

let a = {key1: 1}
let b = {...a}
b.key1 = 2
console.log(a) // {key1: 1}

메모: 이 방식 은 단층 json 대상, 즉 대상 의 모든 value 가 기본 형식 이 고 끼 워 넣 지 않 았 습 니 다.
방법 2
ES6 새로운 기능

const clone = Object.assign({}, original)

예시:

var a = { key1: 1 };
var b = Object.assign({}, a);
b.a-=key1 = 2
console.log(a) // {key1: 1}

메모: 이 방식 은 단층 json 대상, 즉 대상 의 모든 value 가 기본 형식 이 고 끼 워 넣 지 않 았 습 니 다.
방법

const clone = JSON.parse(JSON.stringify(original));

이것 은 다 층 제 이 슨 대상 을 복사 할 수 있 습 니 다.
예시:

var a = { 
          key1: {
            subKey: 1
          }
        };
var b = JSON.parse(JSON.stringify(a));
b.key1.subKey = 2
console.log(a)

//    
{
  key1: {
          subKey: 1
        }
}

메모: 이 방법 을 사용 하면 대상 에 Date, functions, undefined, Infinity, RegExps, Maps, Sets, Blobs, FileLists, ImageDatas, sparse Arrays 등 데이터 형식 이 있 을 수 없습니다.
방법
사용자 정의 딥 복사 함수.

function deepClone(o1, o2) {
    for (let k in o2) {
        if (typeof o2[k] === 'object') {
            o1[k] = {};
            deepClone(o1[k], o2[k]);
        } else {
            o1[k] = o2[k];
        }
    }
}

방법
제3자 라 이브 러 리 사용
예 를 들 면:

lodash.clonedeep

angular.copy

jQuery.extend()

참조 링크
https://stackoverflow.com/questions/39736397/is-this-a-good-way-to-clone-an-object-in-es6
https://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-deep-clone-an-object-in-javascript/122704#122704
https://juejin.im/post/5bc44a71e51d450e935caa11