JavaScript의 배열에서 첫 번째 요소 제거

Sahil Bhosale 2023년1월30일 2021년10월18일 JavaScript JavaScript Array
  1. JavaScript에서 원래 배열을 변경하여 배열의 첫 번째 요소 제거
  2. JavaScript에서 원래 배열을 변경하지 않고 유지하여 배열의 첫 번째 요소 제거
JavaScript의 배열에서 첫 번째 요소 제거

JavaScript 프로그래밍 언어에는 개발 프로세스를 더 빠르게 만드는 데 도움이 되는 많은 사전 빌드 메서드가 있습니다. 생각할 수 있는 모든 작업에 대해 JavaScript에서 해당 특정 작업을 수행하는 데 사용할 수 있는 미리 빌드된 메서드가 항상 있습니다. 예를 들어, 문자열 슬라이싱, 배열에서 요소 삽입 및 삭제, 한 데이터 유형을 다른 데이터 유형으로 변환 또는 난수 생성 등이 있습니다.

유사하게, 배열을 다루는 동안, 우리가 자바스크립트에서 배열 데이터 구조를 작업하고 조작하는 데 도움이 되는 몇 가지 편리한 방법이 있습니다. 이 기사에서는 배열에서 첫 번째 요소를 제거할 수 있는 세 가지 방법을 볼 것입니다.

JavaScript에서 사용할 수 있는 메서드에는 두 가지 유형이 있습니다. 한 가지 유형의 메소드는 원래 배열을 변경하고 두 번째 유형의 메소드는 원래 배열을 변경하지 않고 유지합니다. 원래 배열이 변경된 경우 문제가 없으면 splice()shift 메서드를 사용하십시오. 그러나 원래 배열을 변경하고 싶지 않다면 filter()slice 메소드를 사용하십시오.

JavaScript에서 원래 배열을 변경하여 배열의 첫 번째 요소 제거

  1. 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) 그러면 배열이 오른쪽에서 왼쪽으로 변경되기 시작합니다.

그런 다음 deleteCountitem1, 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라는 변수에 저장합니다. 배열에서 첫 번째 요소를 제거한 후 arrayfirstElement 변수 내부에 저장된 값을 인쇄합니다.

위의 코드를 브라우저의 콘솔에 붙여넣어 실행하면 다음과 같은 출력을 얻을 수 있습니다.

출력:

Array(4) [ 2, 3, 4, 5 ]
Array [ 1 ]

출력에서 볼 수 있듯이 첫 번째 요소인 이 경우 1은 원래 배열에서 성공적으로 제거되었습니다.

  1. shift() 메소드:

배열에서 첫 번째 요소를 제거하는 또 다른 방법은 shift() 메서드를 사용하는 것입니다. splice() 메서드를 사용하면 배열의 모든 인덱스에서 요소를 추가하거나 제거할 수 있지만 shift() 메서드는 특히 0 인덱스에서만 요소를 제거하는 데 사용됩니다. 첫 번째 요소(인덱스 0에 있는 요소)를 제거하고 배열의 나머지 요소를 왼쪽으로 이동합니다.

이 메서드는 배열에서 제거된 요소도 반환합니다. 여기에서 배열에서 제거된 첫 번째 요소를 저장할 firstElement 변수도 만들었습니다.

let array = [1,2,3,4,5];
let firstElement = array.shift();
console.log(array, firstElement);

마지막으로 arrayfirstElement 변수를 인쇄합니다.

출력:

Array(4) [ 2, 3, 4, 5 ]
1

JavaScript에서 원래 배열을 변경하지 않고 유지하여 배열의 첫 번째 요소 제거

  1. 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 ]
  1. slice() 메소드:

원래 배열을 유지하는 다음 메서드는 slice() 메서드입니다. slice() 메서드는 배열을 두 위치에서 자릅니다. 이를 위해 시작 및 종료 인덱스를 지정해야 합니다. start는 배열 슬라이싱을 시작하려는 첫 번째 인덱스를 나타내며 슬라이싱은 end 전에 한 요소를 중지합니다.

startend 내에 있는 모든 요소(시작 값 포함 및 끝 전에 한 요소 중지 포함)는 새 배열에 삽입됩니다. 이 두 매개변수는 모두 선택 사항입니다. 자세한 내용은 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 ]
Sahil Bhosale avatar Sahil Bhosale avatar

Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.

LinkedIn

관련 문장 - JavaScript Array

  • 배열에 JavaScript의 값이 포함되어 있는지 확인
  • JavaScript에서 배열을 문자열로 변환
  • JavaScript에서 특정 길이의 배열 생성
  • JavaScript의 배열에서 객체 검색
  • JavaScript에서 인수를 배열로 변환