프로그래밍 언어/HTML,CSS,JS

JavaScript에서 객체를 딥 복제하는 가장 효율적인 방법

Rateye 2021. 7. 6. 10:20
728x90
반응형

 

질문 : JavaScript에서 객체를 딥 복제하는 가장 효율적인 방법은 무엇입니까?

JavaScript 객체를 복제하는 가장 효율적인 방법은 무엇입니까? 나는 obj = eval(uneval(o)); 사용 중이지만 표준이 아니며 Firefox에서만 지원됩니다 .

obj = JSON.parse(JSON.stringify(o)); 같은 일을했습니다. 그러나 효율성에 의문을 제기하십시오.

또한 다양한 결함이있는 재귀 복사 기능을 보았습니다.
정식 솔루션이 없다는 것에 놀랐습니다.

답변

이를 "구조적 복제"라고하며 Node 11 이상에서 실험적으로 작동하며 브라우저에 탑재되기를 바랍니다. 자세한 내용은 이 답변 을 참조하십시오.

Date , functions, undefined , Infinity , RegExps, Maps, Sets, Blobs, FileLists, ImageDatas, sparse Arrays, Typed Arrays 또는 기타 복잡한 유형을 객체 내에서 사용하지 않는 경우 객체를 딥 복제하는 매우 간단한 라이너는 다음과 같습니다. :

JSON.parse(JSON.stringify(object))

 
const a = {
  string: 'string',
  number: 123,
  bool: false,
  nul: null,
  date: new Date(),  // stringified
  undef: undefined,  // lost
  inf: Infinity,  // forced to 'null'
  re: /.*/,  // lost
}
console.log(a);
console.log(typeof a.date);  // Date object
const clone = JSON.parse(JSON.stringify(a));
console.log(clone);
console.log(typeof clone.date);  // result of .toISOString()
 

벤치 마크는 Corban의 답변 을 참조하십시오.

개체 복제는 사소한 것이 아니기 때문에 (복잡한 유형, 순환 참조, 함수 등) 대부분의 주요 라이브러리는 개체를 복제하는 기능을 제공합니다. 바퀴를 재발 명하지 마십시오. 이미 라이브러리를 사용하고 있다면 객체 복제 기능이 있는지 확인하십시오. 예를 들면

  • lodash- cloneDeep ; lodash.clonedeep 모듈을 통해 별도로 가져올 수 있으며, 딥 클로닝 기능을 제공하는 라이브러리를 아직 사용하지 않는 경우 가장 좋은 선택 일 것입니다.
  • AngularJS- angular.copy
  • jQuery- jQuery.extend(true, { }, oldObject) ; .clone() 은 DOM 요소 만 복제합니다.
  • just library- just-clone ; 한 가지만 수행하는 제로 종속성 npm 모듈 라이브러리의 일부입니다. 모든 경우에 대한 죄책감없는 유틸리티.

Object.assign()스프레드 구문 이라는 두 가지 얕은 복사 메커니즘을 제공합니다. 열거 가능한 모든 속성의 값을 한 개체에서 다른 개체로 복사합니다. 예를 들면 :

var A1 = {a: "2"};
var A2 = Object.assign({}, A1);
var A3 = {...A1};  // Spread Syntax
출처 : https://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-deep-clone-an-object-in-javascript
728x90
반응형