JavaScript에서 객체 배열을 심층 복제하는 방법은 무엇입니까?

JavaScript에서 객체 배열 복제: 심층 탐구

과제

배열 내의 다른 객체에 대한 참조를 포함하는 객체 배열은 JavaScript에서 복잡한 작업이 될 수 있습니다. 단순히 어레이를 복제하면 참조만 복사하므로 한 어레이의 변경 사항이 다른 어레이에 영향을 미칩니다.

structuredClone: ​​A Modern Solution

가장 최근에 선호되는 심층 복제 방법입니다. JavaScript에서 배열을 복제하려면 StructuredClone:

array2 = structuredClone(array1);

이 기능을 최신 브라우저(Chrome)에서 사용할 수 있습니다. 98, Firefox 94) 그러나 더 넓은 호환성을 위해서는 폴리필이 필요합니다.

JSON 기반 심층 복제

광범위한 브라우저 지원을 위해 JSON 기반 기술을 사용할 수 있습니다.

JSON.parse 사용 및 JSON.stringify

객체가 JSON 직렬화 가능한 경우 JSON.parse 및 JSON.stringify를 사용하여 심층 복제를 수행할 수 있습니다. 그러나 이 방법에는 장점과 단점이 있습니다.

장점

• 배열과 해당 내용을 모두 복제합니다.
• 간단한 한 줄

단점

• JSON 직렬화 가능 개체에서만 작동합니다.
• 스프레드를 사용하는 것보다 성능이 느립니다. 연산자.

let clonedArray = JSON.parse(JSON.stringify(nodesArray));

.map과 함께 스프레드 연산자 사용

최신 브라우저에서 얕은 복제의 경우 .map과 결합된 스프레드 연산자는 더 많을 수 있습니다. 성능:

clonedArray = nodesArray.map(a => {return {...a}});

장점

• JSON 기반 복제보다 빠릅니다.
• 모든 유형의 복제에서 작동합니다.

단점

• 얕은 복제(객체의 첫 번째 수준 복제)만 수행합니다.

벤치마크: 스프레드 방법은 JSON 기반보다 훨씬 빠르게 수행됩니다. 중첩 깊이가 2인 객체 20개 배열에 대한 복제.

위 내용은 JavaScript에서 객체 배열을 심층 복제하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!