JavaScript 에서 객체 딥 클로닝 마스터하기

소개

이 랩에서는 JavaScript 에서 객체의 딥 클론 (deep clone) 을 생성하는 방법을 배웁니다. 재귀 (recursion) 를 사용하여 기본형 (primitives), 배열 (arrays), 객체 (objects) 를 클론하는 동시에 클래스 인스턴스 (class instances) 는 제외합니다. 이 랩을 마치면 원본 객체를 변경하지 않고 객체의 완전한 복사본을 만들 수 있게 됩니다.

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 92%입니다.학습자들로부터 100%의 긍정적인 리뷰율을 받았습니다.

객체의 딥 클론 (Deep Clone) 지침

객체를 딥 클론하려면 다음 단계를 따르세요.

새 터미널/SSH 인스턴스를 생성하고 node를 입력하여 코딩 연습을 시작합니다.
재귀 (recursion) 를 사용하여 기본형 (primitives), 배열 (arrays), 객체 (objects) 를 클론하되, 클래스 인스턴스 (class instances) 는 제외합니다.
전달된 객체가 null인지 확인하고, 그렇다면 null을 반환합니다.
Object.assign()과 빈 객체 ({}) 를 사용하여 원본의 얕은 복사본 (shallow clone) 을 생성합니다.
Object.keys()와 Array.prototype.forEach()를 사용하여 딥 클론이 필요한 키 - 값 쌍을 결정합니다.
객체가 Array인 경우, clone의 length를 원본의 길이로 설정하고 Array.from()을 사용하여 클론을 생성합니다.
딥 클론을 구현하려면 다음 코드를 사용합니다.

const deepClone = (obj) => {
  if (obj === null) return null;
  let clone = Object.assign({}, obj);
  Object.keys(clone).forEach(
    (key) =>
      (clone[key] =
        typeof obj[key] === "object" ? deepClone(obj[key]) : obj[key])
  );
  if (Array.isArray(obj)) {
    clone.length = obj.length;
    return Array.from(clone);
  }
  return clone;
};

딥 클론 함수를 테스트하려면 다음 코드를 사용합니다.

const a = { foo: "bar", obj: { a: 1, b: 2 } };
const b = deepClone(a); // a !== b, a.obj !== b.obj

요약

축하합니다! 딥 클론 객체 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.

객체 딥 클론

소개

객체의 딥 클론 (Deep Clone) 지침

요약