JavaScript 복사 배열:가이드

JavaScript에서 배열 복사는 할당 연산자(=)를 사용하여 복제본을 만드는 것만큼 간단하지 않습니다. 이것을 시도한 적이 있다면 원래 목록에 대한 링크만 생성한다는 사실에 놀랄 것입니다. 무슨 일이야?

이 가이드에서는 JavaScript 배열을 복사하는 방법에 대해 이야기할 것입니다. 배열 복사를 시작할 수 있도록 세 가지 JavaScript 배열 복사 전략에 대한 코드를 살펴보겠습니다.

자바스크립트 배열 복사 문제

어떤 수준에서 "=" 연산자는 배열의 복사본을 새 변수로 만듭니다. 그러나 사본보다 포인터에 가깝습니다. "=" 연산자가 원래 배열에 대한 참조를 생성하기 때문입니다. 기존 어레이의 복제본을 생성하지 않습니다.

다른 코드 없이 할당 연산자를 사용하여 배열의 복사본을 생성해 보겠습니다.

var berries = ["Strawberry", "Gooseberry", "Raspberry"];
var fruits = berries;

console.log(fruits);

코드 반환:

[ "Strawberry", "Gooseberry", "Raspberry" ]

배열이 복사된 것 같습니다. "fruits"는 "berries" 배열의 모든 값을 포함합니다.

이제 "fruits" 배열에 항목을 추가해 보겠습니다.

fruits.push("Melon");
console.log(fruits);
console.log(berries);

과일 배열에 "멜론"을 추가했습니다. 그런 다음 콘솔에 "fruits" 및 "berries" 값을 인쇄합니다.

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

[ "Strawberry", "Gooseberry", "Raspberry", "Melon" ]
[ "Strawberry", "Gooseberry", "Raspberry", "Melon" ]

"과일"과 "열매"는 모두 동일한 값을 포함합니다. 어레이를 기술적으로 복제하지 않았기 때문입니다. 우리는 그것에 대한 참조를 만들었습니다.

"berry" 배열을 조작할 때마다 "fruits" 배열에 변경 사항이 적용됩니다.

할당 연산자는 배열을 복사하지 않습니다. 다른 접근 방식을 사용해야 합니다. 다행스럽게도 배열의 복사본을 만드는 방법은 많이 있습니다. 상위 세 가지 접근 방식은 다음과 같습니다.

이를 하나씩 논의해 보겠습니다.

스프레드 연산자는 JavaScript ES6에 도입된 기능입니다. iterable 객체의 내용에 접근할 수 있습니다. 이 연산자는 배열의 얕은 복사본을 만드는 데 자주 사용됩니다.

스프레드 연산자는 줄임표(…)와 같이 세 개의 점으로 구성됩니다. 이전의 "베리" 배열 복사본을 만들어 보겠습니다.

var berries = ["Strawberry", "Gooseberry", "Raspberry"];
var fruits = [...berries];
fruits.push("Melon");

우리는 배열의 복사본을 만들기 위해 스프레드 연산자를 사용했습니다. 배열의 값이 올바른지 확인하십시오.

console.log(berries);
console.log(fruits);

코드 반환:

[ "Strawberry", "Gooseberry", "Raspberry" ]
[ "Strawberry", "Gooseberry", "Raspberry", "Melon" ]

"Melon" 값은 "fruits" 배열에만 추가되었습니다. 이는 스프레드 연산자를 사용하여 "베리" 배열의 복제본을 생성했기 때문입니다. 이제 "fruits" 배열은 자체 배열입니다. 그 값은 "berry" 배열과 별개입니다.

for 루프를 사용하는 확실한 방법은 배열의 복사본을 만드는 좋은 방법입니다.

이 방법은 더 많은 코드 행이 필요하기 때문에 확산 연산자만큼 선호되지 않을 수 있습니다. 즉, for 루프는 객체를 잘 복사합니다.

var berries = ["Strawberry", "Gooseberry", "Raspberry"];
var fruits = [];

for (var i = 0; i < berries.length; i++) {
	fruits[i] = berries[i]
}

우리는 베리와 과일의 두 가지 목록을 선언했습니다. 과일은 처음에 빈 목록입니다. 그런 다음 for 루프를 사용하여 "베리" 목록의 모든 항목을 반복합니다. 목록의 각 항목에 대해 값이 "fruits" 배열에 복사됩니다.

배열이 분리되어 있는지 확인하기 위해 테스트를 실행해 보겠습니다.

fruits.push("Grapefruit");
console.log(berries);
console.log(fruits);

코드 반환:

[ "Strawberry", "Gooseberry", "Raspberry" ]
[ "Strawberry", "Gooseberry", "Raspberry", "Grapefruit" ]

성공! "딸기"와 "과일"은 두 개의 별도 배열입니다.

Array.from() 메소드는 모든 반복 가능한 객체를 배열로 바꿉니다. iterable의 각 항목을 살펴보고 새 배열에 추가합니다. 이것은 배열을 복사하는 데 사용할 수 있음을 의미합니다.

"berry" 배열의 복사본을 다시 생성해 보겠습니다.

var berries = ["Strawberry", "Gooseberry", "Raspberry"];
var fruits = Array.from(berries);

이 솔루션은 스프레드 연산자 구문과 마찬가지로 두 줄의 코드만 사용합니다. 배열을 복사하는 효율적이고 간결한 방법입니다. 이제 테스트를 실행하여 새 어레이를 확인하겠습니다.

fruits.push("Pineapple");
console.log(berries);
console.log(fruits);

코드 반환:

[ "Strawberry", "Gooseberry", "Raspberry" ]
[ "Strawberry", "Gooseberry", "Raspberry", "Pineapple" ]

배열이 성공적으로 복사되었습니다.

JavaScript에서 배열을 복사하는 방법을 알면 쉽습니다.

배열의 별도 버전을 생성하려는 경우 할당 연산자로는 배열을 복사하기에 충분하지 않습니다. 이는 할당 연산자가 기존 배열에 대한 포인터를 생성하기 때문입니다. 새 배열을 만들지 않습니다.

스프레드 연산자, for 루프 또는 Array.from()을 사용하여 배열의 복사본을 만들 수 있습니다. 방법. 이제 전문가처럼 JavaScript에서 배열을 복사할 준비가 되었습니다.