하나 이상의 배열의 내용을 다른 배열로 복사하는 것은 웹 개발에서 가장 일반적인 작업 중 일부입니다. 그리고 이번 포스팅에서는 배열 값을 복사하는 6가지 방법을 알려드리려고 합니다. 다른 창의적인 방법이 있으면 알려주십시오. 이 게시물이 마음에 들거나 피드백이 있으면 알려주세요.

연결

배열 연결 방법은 하나 이상의 배열 복사본을 단일 배열로 연결하거나 조인하는 데 사용됩니다.

아래 예에서는 arr1의 배열 항목을 arr2에 복사합니다.

const arr1 = [1,2,3];
const arr2 = [].concat(arr1);
console.log(arr2);
// [1,2,3]

이 예에서는 세 개의 배열 값을 단일 배열로 복사합니다.

const arr1 = [1,2,3];
const arr2 = [4,5,6];
const arr3 = [7,8,9];
const arr4 = [].concat(arr1, arr2, arr3);
console.log(arr4);
// [1,2,3,4,5,6,7,8,9]

일부분

배열 슬라이스 방법은 전체 배열 또는 배열의 일부를 복사하고 복사된 배열을 반환할 수 있는 또 다른 방법입니다.

슬라이스에 인수를 제공하지 않으면 전체 배열을 복사합니다.

const names = ["Elisabeth", "Mccueen", "Sarah", "Jaxongir"];
const copies = names.slice();
console.log(copies);
// ["Elisabeth", "Mccueen", "Sarah", "Jaxongir"]

배열의 일부 복사

const names = ["Elisabeth", "Mccueen", "Sarah", "Jaxongir"];
const copies = names.slice(0, 2);
console.log(copies);
// ["Elisabeth", "Mccueen"]

확산

Spread 연산자 얕은 배열은 배열의 첫 번째 수준 항목을 다른 배열로 복사합니다. 이는 두 번째 배열이 두 번째 및 추가 중첩 배열 항목에 대한 참조를 유지하지만 첫 번째 수준 항목의 값만 복사함을 의미합니다.

이 예에서는 확산 연산자를 사용하여 첫 번째 수준 배열 항목을 복사합니다.

const arr1 = [1,2,[3,4];
const arr2 = [...arr1];
console.log(arr2);
// [1,2,[3,4]

arr2[0] = "Coding"
console.log(arr2);
// ["Coding", 2, [3, 4]
console.log(arr1);
// [1,2,[3,4]]

이 예에서는 참조가 유지됨에 따라 다른 배열의 두 번째 수준 배열 값을 변경하고 변경 사항은 두 배열 모두에 반영됩니다.

const arr1 = [1,2,[3,4];
const arr2 = [...arr1];
console.log(arr2);
// [1,2,[3,4]

arr2[0] = "Coding"
arr2[2][0] = "JavaScript"
// ["Coding", 2, ["JavaScript, 4]
console.log(arr1);
// [1,2,["JavaScript", 4]]

지도

콜백에서 반환된 값과 함께 원래 배열과 길이가 동일한 새 배열을 반환하는 데 사용되는 배열 맵 메서드

const numbers = [1,2,3,4,5]
const newNumbers = numbers.map(number => number * 5);
console.log(newNumbers);
// [5,10,15,20,25]

필터

콜백에서 부울 조건을 충족하는 값으로 새 배열을 반환하는 데 사용되는 배열 필터 메서드입니다. 특정 값만 유지하고 불필요한 값을 필터링해야 할 때 주로 사용됩니다.

const ages = [10,20,14,5,22,50];
const newAges = ages.filter(age => age >= 20);
console.log(newAges);
// [20,22,50]

루프

배열 값을 복사하는 마지막 방법은 루프 친구를 사용하는 것입니다. 이것이 위의 모든 방법이 이전 배열의 복사본을 만드는 데 사용하는 방법입니다. for, for, while, do while 등 모든 종류의 루프가 작동합니다.

const names = ["Sarah", "Nostau", "Koop", "Fhen"];
const newNames = [];
for(let i = 0; i < names.length; i++){
  newNames.push(names[i]);
}
console.log(newNames);
// ["Sarah", "Nostau", "Koop", "Fhen"]