특정 인덱스에서 배열의 항목 삭제

이전 글I covered how to insert items into an array at a specific index에서 했으므로 이제 항목을 삭제하는 방법에 대해 알아보겠습니다. Javascript의 일반적인 데이터 구조인 배열은 다음과 같이 생겼습니다.

let myArray = [ 'some', 'array', 'content' ];

Javascript 전체에서 일반적으로 사용되는 데이터를 저장하는 방법입니다. 배열에서 항목을 삭제하려면 모든 배열에 있는 splice 메서드를 사용할 수 있습니다. 어떻게 작동하는지 살펴보겠습니다.

배열에서 항목 삭제

배열에서 항목만 삭제하려는 경우 두 개의 인수와 함께 splice만 사용해야 합니다. 첫 번째는 시작하려는 인덱스이고 두 번째는 삭제하려는 항목 수입니다. 예를 들어 배열에서 인덱스 0부터 시작하여 2개의 항목을 삭제하려면 다음을 수행합니다.

let myArray = [ 'some', 'array', 'content' ];

myArray.splice(0, 2);

// Will return [ 'content' ]
console.log(myArray);

알다시피 splice는 실제로 원래 배열을 변경합니다. 원본의 복사본이 만들어지지 않으므로 이 작업을 수행할 때 주의하십시오! 고려해야 할 몇 가지 다른 예는 다음과 같습니다.

myArray.splice(3, 1); // Removes one item, at index 3
myArray.splice(0, 5); // Removes 5 items, at index 0 (i.e. from the start of the array);

값으로 배열에서 항목 삭제

비슷한 맥락에서 값으로 배열에서 항목을 삭제할 수도 있지만 이는 조금 더 까다롭습니다. 이것이 작동하려면 indexOf와 splice를 모두 사용해야 합니다.

먼저 indexOf 를 사용하여 삭제하려는 항목의 인덱스를 값으로 가져옵니다.

그런 다음 해당 번호를 사용하여 배열 항목을 삭제합니다.

여기에 예가 있습니다. 아래 배열에서 라비올리 항목을 삭제하려고 합니다. 먼저 arr1.indexOf('ravioli') 를 사용하여 해당 항목의 인덱스를 얻습니다. 이것은 2 를 반환할 것입니다. 이것이 우리 배열에서 라비올리의 인덱스이기 때문입니다. 그런 다음 해당 숫자를 사용하여 splice(itemIndex, 1)를 사용하여 해당 인덱스에서 하나의 요소를 연결합니다. 이제 라비올리가 어레이에서 제거되었습니다!

let arr1 = [ 'potato', 'banana', 'ravioli', 'carrot' ];
let itemIndex = arr1.indexOf('ravioli');

// Returns [ 'potato', 'banana', 'carrot' ], since ravioli has an index of 2
arr1.splice(itemIndex, 1);
console.log(arr1);

배열에서 마지막 항목 삭제

Javascript의 배열에서 마지막 항목을 삭제하는 것뿐이라면 pop 를 사용하십시오. pop() 메서드를 사용하면 배열의 마지막 요소만 쉽게 삭제할 수 있습니다. splice 와 마찬가지로 원래 배열을 변경하므로 원래 배열의 복사본이 보관되지 않습니다.

let arr1 = [ 'potato', 'banana', 'ravioli', 'carrot' ];

// Returns 'carrot'
console.log(arr1.pop()); 

// Returns  [ 'potato', 'banana', 'ravioli' ]
console.log(arr1);