자바 스크립트 배열은 제가 가장 좋아하는 데이터 유형 중 하나입니다. 동적이고 사용하기 쉬우 며 우리가 활용할 수있는 다양한 내장 방법을 제공합니다.
그러나 옵션이 많을수록 사용할 옵션을 결정하는 것이 더 혼란 스러울 수 있습니다.
이 기사에서는 JavaScript 배열에 요소를 추가하는 몇 가지 일반적인 방법에 대해 논의하고 싶습니다.
푸시 방법
처음 접할 수있는 가장 일반적인 JavaScript 배열 메서드는 push () 입니다. push () 메서드는 배열 끝에 요소를 추가하는 데 사용됩니다.
요소 배열이 있다고 가정 해 보겠습니다. 각 요소는 수행해야하는 작업을 나타내는 문자열입니다. 이전 작업을 먼저 완료 할 수 있도록 배열 끝에 새로운 항목을 추가하는 것이 좋습니다.
코드 형식으로 예제를 살펴 보겠습니다.
const arr = ['First item', 'Second item', 'Third item']; arr.push('Fourth item'); console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item']좋습니다. push는 배열 끝에 항목을 추가하는 멋지고 간단한 구문을 제공했습니다.
한 번에 두 개 또는 세 개의 항목을 목록에 추가하고 싶다고 가정 해 보겠습니다. 그러면 어떻게해야합니까? 결과적으로 push () 는 여러 요소를 한 번에 추가 할 수 있습니다.
const arr = ['First item', 'Second item', 'Third item']; arr.push('Fourth item', 'Fifth item'); console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item', 'Fifth item']이제 배열에 몇 가지 작업을 추가 했으므로 현재 배열에 얼마나 많은 항목이 있는지 확인하여 접시에 너무 많은 항목이 있는지 확인할 수 있습니다.
운 좋게도 push () 는 요소가 추가 된 후 배열의 길이와 함께 반환 값을 갖습니다.
const arr = ['First item', 'Second item', 'Third item']; const arrLength = arr.push('Fourth item', 'Fifth item'); console.log(arrLength); // 5 console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item', 'Fifth item']Unshift 방법
모든 작업이 동일하게 생성되는 것은 아닙니다. 어레이에 작업을 추가하고 갑자기 다른 작업보다 더 긴급한 작업이 발생하는 시나리오가 발생할 수 있습니다.
이제 배열의 시작 부분에 항목을 추가 할 수있는 친구 unshift () 를 소개 할 때입니다.
const arr = ['First item', 'Second item', 'Third item']; const arrLength = arr.unshift('Urgent item 1', 'Urgent item 2'); console.log(arrLength); // 5 console.log(arr); // ['Urgent item 1', 'Urgent item 2', 'First item', 'Second item', 'Third item']위의 예제에서 push () 메서드 와 마찬가지로 unshift () 는 사용할 새 배열 길이를 반환한다는 것을 알 수 있습니다. 또한 한 번에 둘 이상의 요소를 추가 할 수있는 기능도 제공합니다.
Concat 방법
연결 (함께 연결)의 약자 인 concat () 메서드는 두 개 이상의 배열을 함께 연결하는 데 사용됩니다.
위에서 기억한다면 unshift () 및 push () 메서드는 새 배열의 길이를 반환합니다. 반면에 concat () ,완전히 새로운 배열을 반환합니다.
이것은 매우 중요한 구별이며, 변경하고 싶지 않은 배열을 다룰 때 concat ()을 매우 유용 하게 만듭니다 (예 : React 상태에 저장된 배열).
다음은 상당히 기본적이고 간단한 경우입니다.
const arr1 = ['?', '?']; const arr2 = ['?', '?']; const arr3 = arr1.concat(arr2); console.log(arr3); // ["?", "?", "?", "?"] 함께 결합하려는 어레이가 여러 개 있다고 가정 해 보겠습니다. 걱정하지 마세요. concat () 이 하루를 저장합니다!
const arr1 = ['?', '?']; const arr2 = ['?', '?']; const arr3 = ['?', '?']; const arr4 = arr1.concat(arr2,arr3); console.log(arr4); // ["?", "?", "?", "?", "?", "?"] Concat으로 복제
기존 배열을 변경하고 싶지 않을 때 concat () 이 유용 할 수 있다고 말한 것을 기억 하십니까? 이 개념을 활용하여 한 배열의 내용을 새 배열로 복사하는 방법을 살펴 보겠습니다.
const arr1 = ["?", "?", "?", "?", "?", "?"]; const arr2 = [].concat(arr1); arr2.push("?"); console.log(arr1) //["?", "?", "?", "?", "?", "?"] console.log(arr2) //["?", "?", "?", "?", "?", "?", "?"]대박! concat ()을 사용하여 본질적으로 배열을 "복제"할 수 있습니다 .
그러나이 복제 과정에는 작은 '잘못'이 있습니다. 새 어레이는 복사 된 어레이의 "얕은 복사본"입니다. 이는 모든 개체가 실제 개체가 아닌 참조 로 복사 된다는 것을 의미 합니다.
이 아이디어를 더 명확하게 설명하는 예를 살펴 보겠습니다.
const arr1 = [{food:"?"}, {food:"?"}, {food:"?"}] const arr2 = [].concat(arr1); //change only arr2 arr2[1].food = "?"; arr2.push({food:"?"}) console.log(arr1) //[ { food: '?' }, { food: '?' }, { food: '?' } ] console.log(arr2) //[ { food: '?' }, { food: '?' }, { food: '?' }, { food: '?' } ]원래 어레이를 직접 변경 하지는 않았지만 , 어레이는 궁극적으로 복제 된 어레이에서 변경 한 사항의 영향을 받았습니다!
어레이의 "딥 클론"을 올바르게 수행하는 방법에는 여러 가지가 있지만, 숙제로 남겨 두겠습니다.
TL; DR
배열 끝에 요소를 추가하려면 push ()를 사용하십시오 . 배열의 시작 부분에 요소를 추가해야하는 경우 unshift ()를 시도하십시오 . 그리고 당신은 할 수 있습니다concat ()을 사용하여 배열을 함께 추가하십시오 .
배열에 요소를 추가 할 수있는 다른 많은 옵션이 있습니다. 나가서 더 훌륭한 배열 방법을 찾아 보도록 권합니다!
Twitter에서 저에게 연락하여 배열에 요소를 추가하는 데 가장 좋아하는 배열 방법을 알려주십시오.