~ 안에 자바스크립트, 배열을 복제한다는 것은 원래 배열과 동일한 요소로 새 배열을 만드는 것을 의미합니다. JavaScript에서 배열 복제는 원래 배열을 수정하지 않고 기존 배열과 동일한 요소를 가진 새 배열을 생성하려는 경우에 유용합니다.
언제 어레이를 복제해야 합니까?
배열에 대해 정렬, 필터링, 매핑 등 일부 작업을 수행하고 싶지만 원본 배열을 수정하고 싶지 않은 경우 원본 배열의 복제본을 생성하고 복제본에 대한 작업을 대신 수행할 수 있습니다.
- 배열을 함수에 인수로 전달할 때 함수가 원래 배열을 수정하지 않도록 할 수 있습니다. 이 경우 대신 배열의 복제본을 전달할 수 있습니다.
- 나중에 참조할 수 있도록 원본 배열을 보존하려는 경우 원본 배열의 복제본을 생성하고 추가 처리 또는 조작을 위해 복제본을 사용할 수 있습니다.
- 개체나 배열을 요소로 포함하는 배열이 있고 원래 개체나 배열을 수정하지 않으려는 경우 작업할 배열의 복제본을 만들어 복제본의 개체나 배열에 대한 변경 사항이 변경되지 않도록 할 수 있습니다. 원본 객체나 배열에 영향을 미칩니다.
따라서, JavaScript에서 배열 복제하기 원본 배열과 해당 요소의 무결성을 유지하는 방식으로 배열 작업을 수행하는 데 유용한 기술입니다.
다음은 어레이 복제에 대한 몇 가지 일반적인 사용 사례입니다.
내용의 테이블
- 언제 어레이를 복제해야 합니까?
- Array.slice() 메서드 사용
- 스프레드 연산자 사용
- Array.from() 메서드 사용
- Array.concat() 메서드 사용
- for 루프 사용
- Array.map() 메서드 사용
- 지도 함수와 함께 Array.from() 메서드 사용
- Array.of() 메서드 사용
- JSON.parse() 및 JSON.stringify() 메서드 사용
- Object.sign() 메서드 사용
- Array.reduce() 메서드 사용
Array.slice() 메서드 사용
우리는 슬라이스 방법 배열의 얕은 복사본을 만듭니다. 이 메서드는 원래 배열 요소의 하위 집합을 사용하여 새 배열을 만듭니다.
예: 이 예에서는 위에서 설명한 접근 방식의 구현을 보여줍니다.
자바스크립트 const originalArray = [1, 2, 3]; const clonedArray = originalArray.slice(); console.log(clonedArray);>
산출
[ 1, 2, 3 ]>
스프레드 연산자 사용
사용하여 스프레드 연산자 … JavaScript에서 배열을 복제하는 간결하고 쉬운 방법입니다. 스프레드 연산자를 사용하면 배열을 개별 요소로 확장한 다음 새 배열을 만드는 데 사용할 수 있습니다.
예: 이 예에서는 위에서 설명한 접근 방식의 구현을 보여줍니다.
자바스크립트 const originalArray = [1, 2, 3]; const clonedArray = [...originalArray]; console.log(clonedArray);>
산출
[ 1, 2, 3 ]>
Array.from() 메서드 사용
사용하여 배열.from() 메소드는 JavaScript에서 배열을 복제하는 또 다른 방법입니다. 이 방법은 선택적 매핑 함수를 사용하여 새 배열의 값을 변환하여 기존 배열에서 새 배열을 만듭니다.
자바를 켜라
예: 이 예에서는 위에서 설명한 접근 방식의 구현을 보여줍니다.
자바스크립트 const originalArray = [1, 2, 3]; const clonedArray = Array.from(originalArray); console.log(clonedArray);>
산출
[ 1, 2, 3 ]>
Array.concat() 메서드 사용
사용하여 배열.연결() 메소드는 JavaScript에서 배열을 복제하는 또 다른 방법입니다. 이 방법은 두 개 이상의 배열을 함께 연결하여 새 배열을 만듭니다.
예: 이 예에서는 위에서 설명한 접근 방식의 구현을 보여줍니다.
자바스크립트 const originalArray = [1, 2, 3]; const clonedArray = [].concat(originalArray); console.log(clonedArray);>
산출
[ 1, 2, 3 ]>
for 루프 사용
이 방법에는 원본 배열의 각 요소를 반복하고 각 요소를 새 배열에 복사하는 작업이 포함됩니다.
예: 이 예에서는 위에서 설명한 접근 방식의 구현을 보여줍니다.
자바스크립트 const originalArray = [1, 2, 3]; const clonedArray = []; for (let i = 0; i < originalArray.length; i++) { clonedArray.push(originalArray[i]); } console.log(clonedArray);> 산출
[ 1, 2, 3 ]>
Array.map() 메서드 사용
사용하여 배열.맵() 메소드는 JavaScript에서 배열을 복제하는 또 다른 방법입니다. 이 메서드는 원래 배열의 각 요소를 새 값에 매핑하여 새 배열을 만듭니다.
예: 이 예에서는 위에서 설명한 접근 방식의 구현을 보여줍니다.
자바스크립트 const originalArray = [1, 2, 3]; const clonedArray = originalArray.map(x =>엑스); console.log(clonedArray);>
산출
[ 1, 2, 3 ]>
지도 함수와 함께 Array.from() 메서드 사용
사용하여 배열.from() 방법 지도 기능을 사용하는 것은 JavaScript에서 배열을 복제하는 또 다른 방법입니다. 이 메서드는 제공된 함수를 사용하여 원래 배열의 각 요소를 새 값에 매핑하여 새 배열을 만듭니다.
예: 이 예에서는 위에서 설명한 접근 방식의 구현을 보여줍니다.
자바스크립트 const originalArray = [1, 2, 3]; const clonedArray = Array.from(originalArray, x =>엑스); console.log(clonedArray);>
산출
[ 1, 2, 3 ]>
Array.of() 메서드 사용
이 메서드는 원래 배열과 동일한 요소로 새 배열을 만듭니다.
예: 이 예에서는 위에서 설명한 접근 방식의 구현을 보여줍니다.
자바스크립트 const originalArray = [1, 2, 3]; const clonedArray = Array.of(...originalArray); console.log(clonedArray);>
산출
[ 1, 2, 3 ]>
JSON.parse() 및 JSON.stringify() 메서드 사용
사용하여 JSON.parse() 그리고 JSON.stringify() 메소드는 JavaScript에서 배열을 복제하는 또 다른 방법입니다. 이 방법에는 원본 배열을 JSON 문자열로 변환한 다음 JSON 문자열을 구문 분석하여 새 배열을 만드는 작업이 포함됩니다.
예: 이 예에서는 위에서 설명한 접근 방식의 구현을 보여줍니다.
자바스크립트 const originalArray = [1, 2, 3]; const clonedArray = JSON.parse(JSON.stringify(originalArray)); console.log(clonedArray);>
산출
[ 1, 2, 3 ]>
Object.sign() 메서드 사용
사용하여 객체.할당() 방법 JavaScript에서 배열을 복제하는 또 다른 방법입니다. 이 메서드는 원래 배열의 속성을 새 개체에 복사하여 새 배열을 만듭니다.
예: 이 예에서는 위에서 설명한 접근 방식의 구현을 보여줍니다.
자바스크립트 const originalArray = [1, 2, 3]; const clonedArray = Object.assign([], originalArray); console.log(clonedArray);>
산출
[ 1, 2, 3 ]>
Array.reduce() 메서드 사용
그만큼 Array.reduce() 메서드 배열의 각 요소에 대해 감속기 함수를 실행하여 단일 출력 값을 생성합니다. 이를 사용하여 원래 배열과 동일한 요소로 새 배열을 구성할 수 있습니다.
통사론:
array.reduce((accumulator, currentValue, currentIndex, array) =>{ ... }, 초기값);>예 : 이 예에서는 Array.reduce() 메서드를 사용하여 배열의 복제본을 만듭니다.
자바스크립트 // Input array const originalArray = [1, 2, 3, 4]; // Cloning the array using reduce const clonedArray = originalArray.reduce((acc, val) =>{ acc.push(발); 반환 acc; }, []); // 원본 및 복제된 배열 표시 console.log('Original Array:', originalArray); // 출력: [1, 2, 3, 4] console.log('Cloned Array:', clonedArray); // 출력: [1, 2, 3, 4]> 산출
Original Array: [ 1, 2, 3, 4 ] Cloned Array: [ 1, 2, 3, 4 ]>
메모: 따라서 어레이를 복제할 때는 데이터의 복잡성과 애플리케이션의 성능 요구 사항을 고려하는 것이 중요합니다.