JavaScript의 배열에서 첫 번째 요소 제거
JavaScript 프로그래밍 언어에는 개발 프로세스를 더 빠르게 만드는 데 도움이 되는 많은 사전 빌드 메서드가 있습니다. 생각할 수 있는 모든 작업에 대해 JavaScript에서 해당 특정 작업을 수행하는 데 사용할 수 있는 미리 빌드된 메서드가 항상 있습니다. 예를 들어, 문자열 슬라이싱, 배열에서 요소 삽입 및 삭제, 한 데이터 유형을 다른 데이터 유형으로 변환 또는 난수 생성 등이 있습니다.
유사하게, 배열을 다루는 동안, 우리가 자바스크립트에서 배열 데이터 구조를 작업하고 조작하는 데 도움이 되는 몇 가지 편리한 방법이 있습니다. 이 기사에서는 배열에서 첫 번째 요소를 제거할 수 있는 세 가지 방법을 볼 것입니다.
JavaScript에서 사용할 수 있는 메서드에는 두 가지 유형이 있습니다. 한 가지 유형의 메소드는 원래 배열을 변경하고 두 번째 유형의 메소드는 원래 배열을 변경하지 않고 유지합니다. 원래 배열이 변경된 경우 문제가 없으면 splice() 및 shift 메서드를 사용하십시오. 그러나 원래 배열을 변경하고 싶지 않다면 filter() 및 slice 메소드를 사용하십시오.
JavaScript에서 원래 배열을 변경하여 배열의 첫 번째 요소 제거
splice()메소드:
splice() 메소드는 배열에서 기존 요소를 제거하거나 대체하는 데 사용됩니다. 이 메서드는 원래 배열을 변경하거나 수정합니다. splice() 메서드는 배열에서 제거된 요소도 반환합니다. 삭제된 요소를 가져오려면 반환된 요소를 나중에 사용할 수 있도록 일부 변수에 저장할 수도 있습니다.
통사론:
splice(start)
splice(start, deleteCount)
splice(start, deleteCount, item1)
splice(start, deleteCount, item1, item2, itemN)
start 매개변수는 배열 조작을 시작할 요소를 알려줍니다. start는 양수 또는 음수 값을 사용할 수 있습니다. 양수 값(1, 2, 3…., n)을 사용하면 배열이 왼쪽에서 오른쪽으로 변경되기 시작하고 음수 값(-1, -2, -3, ..)을 사용하면 배열이 변경되기 시작합니다. ., -n) 그러면 배열이 오른쪽에서 왼쪽으로 변경되기 시작합니다.
그런 다음 deleteCount 및 item1, item2, ... 매개변수도 있으며 둘 다 선택사항입니다. 배열에서 일부 요소를 삭제하려면 deleteCount 매개변수에 삭제하려는 요소의 총 개수를 값으로 전달할 수 있습니다. 0을 전달하면 배열에서 요소가 삭제되지 않습니다. item1, item2, ...에서 배열에 추가하려는 요소를 전달할 수 있습니다. 자세한 내용은 splice() 메서드 문서를 참조하세요.
아래에는 5 요소로 구성된 array 변수 내부에 저장된 숫자 배열이 있습니다. 우리의 경우 배열의 첫 번째 요소를 삭제해야 합니다. 여기에서 시작 인덱스와 삭제할 요소의 수를 지정해야 합니다. 첫 번째 요소를 제거하고 싶기 때문에 시작 인덱스는 0이고 삭제해야 하는 총 요소는 1입니다. 따라서 (0, 1) 값을 splice() 메소드에 매개변수로 전달합니다.
let array = [1,2,3,4,5]
let firstElement = array.splice(0, 1);
console.log(array, firstElement);
또한 배열에서 삭제된 요소를 firstElement라는 변수에 저장합니다. 배열에서 첫 번째 요소를 제거한 후 array와 firstElement 변수 내부에 저장된 값을 인쇄합니다.
위의 코드를 브라우저의 콘솔에 붙여넣어 실행하면 다음과 같은 출력을 얻을 수 있습니다.
출력:
Array(4) [ 2, 3, 4, 5 ]
Array [ 1 ]
출력에서 볼 수 있듯이 첫 번째 요소인 이 경우 1은 원래 배열에서 성공적으로 제거되었습니다.
shift()메소드:
배열에서 첫 번째 요소를 제거하는 또 다른 방법은 shift() 메서드를 사용하는 것입니다. splice() 메서드를 사용하면 배열의 모든 인덱스에서 요소를 추가하거나 제거할 수 있지만 shift() 메서드는 특히 0 인덱스에서만 요소를 제거하는 데 사용됩니다. 첫 번째 요소(인덱스 0에 있는 요소)를 제거하고 배열의 나머지 요소를 왼쪽으로 이동합니다.
이 메서드는 배열에서 제거된 요소도 반환합니다. 여기에서 배열에서 제거된 첫 번째 요소를 저장할 firstElement 변수도 만들었습니다.
let array = [1,2,3,4,5];
let firstElement = array.shift();
console.log(array, firstElement);
마지막으로 array 및 firstElement 변수를 인쇄합니다.
출력:
Array(4) [ 2, 3, 4, 5 ]
1
JavaScript에서 원래 배열을 변경하지 않고 유지하여 배열의 첫 번째 요소 제거
filter()메소드:
우리는 원래 배열을 변경하거나 수정하는 방법을 보았습니다. 이제 원래 배열을 그대로 유지하고 작업 결과를 새 배열에 저장하는 몇 가지 방법을 살펴보겠습니다. 그러한 방법 중 하나는 filter() 방법입니다.
filter() 메서드는 조건에 따라 작동합니다. 그리고 조건이 참인지 거짓인지에 따라 요소를 새 배열에 추가할지 여부를 결정합니다.
let array_1 = [1,2,3,4,5];
let array_2 = array_1.filter((element, index) => index > 0);
console.log(array_1, array_2);
filter() 메소드는 콜백 함수(화살표 함수)를 인수로 취합니다. 이 콜백 함수는 배열의 각 요소에서 호출됩니다. 이 함수는 배열의 요소와 인덱스를 제공합니다.
첫 번째 요소를 제거하고 싶기 때문에 요소의 인덱스가 0보다 크거나 작거나(index > 0)하는 조건을 추가합니다. 이것이 사실이면 filter() 함수만 요소를 새 배열에 삽입하고 그렇지 않은 경우에는 삽입하지 않습니다. 인덱스 0에 있는 요소(즉, 첫 번째 요소)를 제외한 다른 모든 요소는 새 배열에 삽입됩니다.
출력:
Array(5) [ 1, 2, 3, 4, 5 ]
Array(4) [ 2, 3, 4, 5 ]
slice()메소드:
원래 배열을 유지하는 다음 메서드는 slice() 메서드입니다. slice() 메서드는 배열을 두 위치에서 자릅니다. 이를 위해 시작 및 종료 인덱스를 지정해야 합니다. start는 배열 슬라이싱을 시작하려는 첫 번째 인덱스를 나타내며 슬라이싱은 end 전에 한 요소를 중지합니다.
start 및 end 내에 있는 모든 요소(시작 값 포함 및 끝 전에 한 요소 중지 포함)는 새 배열에 삽입됩니다. 이 두 매개변수는 모두 선택 사항입니다. 자세한 내용은 slice() 메서드 설명서를 참조하세요.
let array_1 = [1,2,3,4,5];
let array_2 = array_1.slice(1);
console.log(array_1, array_2);
배열에서 첫 번째 요소를 제거하기를 원하기 때문에 start 매개변수만 전달합니다. end를 지정하지 않으면 start 값에서 시작하는 배열의 모든 요소가 포함됩니다. 우리의 경우 slice(1)를 전달합니다. 이것은 원래 배열 즉 array_1에서 array_2로 요소 [2,3,4,5]를 복사합니다. 결국 console.log() 메서드를 사용하여 두 배열을 모두 인쇄합니다. 위 코드의 출력은 아래와 같습니다.
출력:
Array(5) [ 1, 2, 3, 4, 5 ]
Array(4) [ 2, 3, 4, 5 ]
