JavaScript에서 배열을 딥 클론하는 방법

블로그

JavaScript에서 배열을 딥 클론하는 방법

JavaScript는 객체를 복사하는 다양한 방법을 제공하지만 모두가 전체 복사를 제공하는 것은 아닙니다. 가장 효율적인 방법을 배우고 당신이 가진 모든 옵션을 찾으십시오

다음은 어레이를 딥 클론하는 2가지 방법입니다. 빠르고 더러운 방법을 사용하려면 JSON 방법을 사용하십시오.

어레이 복제에는 얕은 및 깊은 두 가지 유형이 있습니다. 얕은 사본은 어레이의 첫 번째 수준만 다루고 나머지는 참조됩니다. 중첩된 배열의 진정한 복사본을 원한다면 깊은 복제가 필요합니다. 딥 클론의 경우 JSON 방식을 사용하거나 Lodash를 사용하는 것이 좋습니다.

const numbers = [1, [2], [3, [4]], 5]; // Using JavaScript JSON.parse(JSON.stringify(numbers)); // Using Lodash _.cloneDeep(objects);

배열은 참조 유형입니다.

두 가지 유형의 복제가 있는 이유를 이해하기 위해. 기초를 파고 참조 유형이 무엇인지 설명하겠습니다.

기본 유형(예: 숫자 또는 문자열)과 달리 배열은 참조 유형입니다. 즉, 배열을 변수에 할당할 때 실제 배열 자체가 아니라 메모리 주소를 할당하는 것입니다. WTH . 나는 이것이 약간 혼란스럽다는 것을 알고 있다. 그럼 예를 들어 설명하겠습니다.

값 유형 복사

그래서 여기에 큰 문제가 없습니다. |_+_|의 사본을 만들고 있습니다. 그리고 |_+_|를 변경해도 원본 |_+_|에는 영향을 미치지 않습니다. 의미가 있습니다. 사본을 변경할 때 원본에 전혀 영향을 미치지 않아야 합니다. 여기 다 좋다

value

참조 유형 복사

좋아요, 이제 상황이 이상해집니다. 값 유형을 복사할 때와 동일한 방법을 사용하여 배열을 복사해 보겠습니다.

valueCopy

원래 어레이도 영향을 받은 이유는 무엇입니까? 복사한 것이 배열 자체가 아니라 배열이 차지하는 메모리 공간에 대한 포인터이기 때문입니다. 참조 유형은 값을 보유하지 않으며 메모리의 값에 대한 포인터입니다.

참조 유형 복사에 대한 솔루션

따라서 해결책은 포인터가 아닌 값을 복사하는 것입니다. 이와 같이:

value

얕은 대 깊은 복제

스프레드를 사용했을 때 |_+_| 배열을 복사하기 위해 얕은 복사본만 만들고 있습니다. 배열이 중첩되거나 다차원이면 작동하지 않습니다. 한 번 보자:

let value = 3; let valueCopy = value; // create copy console.log(valueCopy); // 3 // Change valueCopy valueCopy = 100 console.log(valueCopy); // 100 // ✅ Original NOT affected console.log(value); // 3

보시다시피 얕은 또는 첫 번째 레이어가 좋습니다. 그러나 중첩된 요소를 변경하면 원래 배열도 영향을 받습니다. 따라서 솔루션은 깊은 복제를 수행하는 것입니다.

let array = [1,2,3]; let arrayCopy = array; // create copy console.log(arrayCopy); // [1,2,3]; // Change 1st element of the array arrayCopy[0] = ''; console.log(arrayCopy); // [ '', 2, 3 ] // ❌Original got affected console.log(array); // [ '', 2, 3 ]

자원

#자바스크립트 #배열