안녕 `JSON.stringify()` 및 `{...obj}`, 안녕하세요 `structuredClone()`!-JS 튜토리얼-php.cn

안녕 `JSON.stringify()` 및 `{...obj}`, 안녕하세요 `structuredClone()`!

WBOY

풀어 주다： 2024-09-04 18:32:02

원래의

578명이 탐색했습니다.

Bye-Bye `JSON.stringify()` and `{...obj}`, Hello `structuredClone()`!

structuredClone()이란 무엇인가요?
- StructuredClone()은 JavaScript 객체의 심층 복제를 가능하게 하는 2022년에 도입된 전역 함수입니다. 복잡한 구조와 순환 참조로 인해 어려움을 겪는 JSON.stringify() 및 JSON.parse()와 같은 기존 방법과 달리, StructuredClone()은 이러한 문제를 쉽게 처리합니다.
게임 체인저인 이유는 무엇입니까?
- 추가 논리나 해결 방법 없이 중첩된 객체와 순환 참조의 무결성을 유지하면서 진정한 딥 클론을 생성할 수 있는 강력한 도구입니다. 또한 Web Workers를 포함한 최신 환경에서도 사용할 수 있습니다.

1. 간단한 객체 복제: 기본

{...obj}(얕은 복사본) 사용

  const original = { name: "Alice", details: { age: 25 } };
  const shallowCopy = { ...original };

  shallowCopy.details.age = 30;

  console.log(original.details.age); // 30
  console.log(shallowCopy.details.age); // 30

로그인 후 복사

무슨 일이 일어나고 있나요?
- 확산 연산자 {...obj}는 얕은 복사본만 생성합니다. 세부 정보 개체는 깊게 복제되지 않으므로shallowCopy.details에 대한 변경 사항은 원본 세부 정보에도 영향을 미칩니다.
- JSON.stringify() + JSON.parse()(깊은 복사) 사용

  const original = { name: "Alice", details: { age: 25 } };
  const deepCopy = JSON.parse(JSON.stringify(original));

  deepCopy.details.age = 30;

  console.log(original.details.age); // 25
  console.log(deepCopy.details.age); // 30

로그인 후 복사

무슨 일이 일어나고 있나요?
- 이 방법은 전체 복사본을 생성하지만 제한 사항이 있습니다. 함수, 정의되지 않은 참조 또는 순환 참조를 처리할 수 없습니다.
- structuredClone() 사용(전체 복사)

  const original = { name: "Alice", details: { age: 25 } };
  const clone = structuredClone(original);

  clone.details.age = 30;

  console.log(original.details.age); // 25
  console.log(clone.details.age); // 30

로그인 후 복사

무슨 일이 일어나고 있나요?
- StructuredClone()은 JSON.stringify()의 제한 없이 구조를 보존하고 순환 참조 및 정의되지 않음과 같은 복잡한 데이터 유형을 처리하는 딥 클론을 생성합니다.

2. 순환 참조 처리: 과제

{...obj}를 사용한 순환 참조

  const original = { name: "Alice" };
  original.self = original;

  // This will cause an error:
  const shallowCopy = { ...original }; // TypeError: Converting circular structure to JSON

로그인 후 복사

무슨 일이 일어나고 있나요?
- {...obj}가 순환 참조를 처리할 수 없어 오류가 발생합니다.
- JSON.stringify()를 사용한 순환 참조

  const original = { name: "Alice" };
  original.self = original;

  // This will cause an error:
  const jsonCopy = JSON.parse(JSON.stringify(original)); // TypeError: Converting circular structure to JSON

로그인 후 복사

무슨 일이 일어나고 있나요?
- JSON.stringify()도 순환 참조와 함께 실패하고 오류가 발생합니다.
- structuredClone()을 사용한 순환 참조

  const original = { name: "Alice" };
  original.self = original;

  const clone = structuredClone(original);

  console.log(clone !== original); // true
  console.log(clone.self === clone); // true

로그인 후 복사

무슨 일이 일어나고 있나요?
- StructuredClone()은 순환 참조를 원활하게 처리하여 오류 없이 적절한 딥 클론을 생성합니다.

3. 함수 및 정의되지 않은 복제: 또 다른 테스트

{...obj} 사용

  const original = { name: "Alice", greet: () => "Hello!", value: undefined };
  const shallowCopy = { ...original };

  console.log(shallowCopy.greet()); // "Hello!"
  console.log(shallowCopy.value); // undefined

로그인 후 복사

무슨 일이 일어나고 있나요?
- {...obj}는 예상한 대로 함수와 정의되지 않은 내용을 복사하지만 얕게만 복사합니다.
- JSON.stringify() 사용

  const original = { name: "Alice", greet: () => "Hello!", value: undefined };
  const jsonCopy = JSON.parse(JSON.stringify(original));

  console.log(jsonCopy.greet); // undefined
  console.log(jsonCopy.value); // undefined

로그인 후 복사

무슨 일이 일어나고 있나요?
- JSON.stringify()는 함수 또는 정의되지 않음을 직렬화할 수 없으므로 복제된 객체에서 손실이 발생합니다.
- structuredClone() 사용

  const original = { name: "Alice", greet: () => "Hello!", value: undefined };
  const clone = structuredClone(original);

  console.log(clone.greet); // undefined
  console.log(clone.value); // undefined

로그인 후 복사

무슨 일이 일어나고 있나요?
- StructuredClone()은 함수를 복제하지 않지만 정의되지 않은 값을 보존하므로 복잡한 객체의 경우 JSON.stringify()보다 더 안정적입니다.

4. 속도와 효율성: 성능 참고사항

대용량 데이터의 효율성

  const largeArray = new Array(1e6).fill({ key: "value" });

  console.time("structuredClone");
  const clone = structuredClone(largeArray);
  console.timeEnd("structuredClone");

  console.time("JSON.stringify + JSON.parse");
  const jsonCopy = JSON.parse(JSON.stringify(largeArray));
  console.timeEnd("JSON.stringify + JSON.parse");

로그인 후 복사

무슨 일이 일어나고 있나요?
- StructuredClone()은 크고 복잡한 데이터의 경우 JSON.stringify() + JSON.parse()보다 빠른 경우가 많으며 직렬화 및 역직렬화의 위험을 방지합니다.

5. 결론: StructuredClone()이 미래인 이유

신뢰성: 순환 참조, 함수 및 정의되지 않은 값을 보다 예측 가능하게 처리합니다.
효율성: 대규모 데이터 세트에 대해 심층 복제를 더 빠르게 수행하고 해결 방법이 필요하지 않습니다.
단순성: 모든 것을 관리하는 하나의 방법입니다. 더 이상 {...obj}, JSON.stringify() 또는 사용자 정의 딥 클론 기능 중에서 선택할 필요가 없습니다.

위 내용은 안녕 `JSON.stringify()` 및 `{...obj}`, 안녕하세요 `structuredClone()`!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!