다양한 환경에서 JavaScript 개체를 효과적으로 복제하는 방법은 무엇입니까?

JavaScript 개체를 정확하게 복제하는 방법

JavaScript에서 개체를 복제하려면 원본 개체와 독립적인 복사본을 생성해야 합니다. 복제본에 대한 수정 사항은 원본에 영향을 주어서는 안 되며, 그 반대의 경우도 마찬가지입니다.

내장 복제(ES2022)

ES2022에서는 개체를 복제하는 효율적이고 표준적인 방법을 제공하는 StructuredClone()을 도입했습니다. 순환 참조를 포함한 복잡한 데이터 구조 복제를 지원합니다.

const clone = structuredClone(object);

이전 브라우저의 수동 복제

structuredClone()을 지원하지 않는 브라우저의 경우 수동 복제 프로세스가 필요합니다. 간단한 객체는 간단한 할당으로 복제할 수 있지만, 열거할 수 없는 속성이나 프로토타입 상속이 있는 복잡한 객체에는 더 엄격한 접근 방식이 필요합니다.

function clone(obj) {
  // Handle null, undefined, and simple types
  if (obj === null || typeof obj !== "object") return obj;

  // Clone custom Date objects
  if (obj instanceof Date) {
    return new Date(obj.getTime());
  }

  // Clone Arrays
  if (obj instanceof Array) {
    return obj.map(clone);
  }

  // Clone Objects
  if (obj instanceof Object) {
    let clone = {};
    for (const key in obj) {
      if (obj.hasOwnProperty(key)) {
        clone[key] = clone(obj[key]);
      }
    }
    return clone;
  }

  throw new Error("Unable to clone object. Its type is not supported.");
}

이 함수는 Date 및 Array 객체의 특수한 경우를 처리하고 적절한 복사를 보장합니다. 사용자 정의 속성을 지정하고 원치 않는 속성이 복제되는 것을 방지하기 위해 프로토타입 속성을 건너뜁니다.

이 수동 복제 접근 방식은 더 복잡하지만 더 뛰어난 유연성을 제공하고 더 많은 것을 지원합니다. 데이터 유형을 단순 할당과 비교합니다. 이러한 구조를 복제할 때 무한 재귀가 발생할 수 있으므로 순환 참조가 없는 데이터 구조를 가정한다는 점에 유의하는 것이 중요합니다.

위 내용은 다양한 환경에서 JavaScript 개체를 효과적으로 복제하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!