JavaScript의 배열에서 개체 제거
-
splice()메소드를 사용하여 JavaScript의 배열에서 객체 제거 -
slice()메서드를 사용하여 JavaScript의 배열에서 객체 제거 -
filter()메서드를 사용하여 배열에서 객체 제거
이 기사에서는 JavaScript 배열에서 객체를 제거하는 방법을 배웁니다. 이 기사에서는splice(),slice()및filter()와 같은 메소드를 소개하고 구현합니다.
splice()메소드를 사용하여 JavaScript의 배열에서 객체 제거
splice() 메서드는 배열에서 객체를 제거하는 데 사용할 수있는 가장 좋은 방법 일 수 있습니다. 기존 요소를 제거 또는 교체하거나 새 요소를 제자리에 추가하여 배열의 내용을 변경합니다. splice()메소드의 구문은 다음과 같습니다.
Array.splice(index, count, items1, ..., itemX)
index옵션은 항목을 추가 / 제거 할 위치를 지정하는 정수를 나타냅니다. 음수 값을 사용하여 배열 끝에서 위치를 지정할 수도 있습니다. count옵션은 선택 사항이며 제거 할 항목 수를 나타냅니다. items1, ..., itemX옵션도 선택 사항이며 배열에 새 항목을 추가하는 데 사용할 수 있습니다.
처음에는 배열에 세 개의 개체를 포함하는myArray라는 배열 변수를 선언합니다. 그런 다음 두 번째 줄에서splice()메서드를 배열에 사용합니다. 또한0및1을 인수로 표시합니다. 그런 다음 콘솔에 어레이를 기록합니다.
처음에 배열에는 세 개의 개체가 포함됩니다. splice()메소드의0값은 배열의 첫 번째 인덱스, 즉 첫 번째 객체를 나타냅니다. 그것은 우리가 첫 번째 인덱스에서 제거를 시작할 것임을 의미합니다. 메소드의 다음 값1은 메소드가 시작점에서 하나의 항목을 제거하도록 지정합니다. 따라서 아래 예제는 배열의 첫 번째 객체를 제거합니다.
splice()메소드가 배열을 수정한다는 점에 유의해야합니다. 따라서slice()메소드를 사용하여 원래 배열을 변경하지 않고 배열에서 원하는 객체를 제거 할 수 있습니다.
코드 예 :
var myArray =
[{id: 1, name: 'John'}, {id: 2, name: 'Rick'}, {id: 3, name: 'Anna'}];
myArray.splice(0, 1)
console.log(myArray)
출력:
[{id:2, name:'Rick'},{id:3, name:'Anna'}]
slice()메서드를 사용하여 JavaScript의 배열에서 객체 제거
slice()메서드는 처음부터 끝까지 선택된 배열 부분의 수정 된 복사본을 반환하지만 메서드에 전달 된 끝 인덱스는 포함되지 않습니다. slice()메소드의 구문은 다음과 같습니다.
Array.slice(startIndex, endIndex)
여기서startIndex는 추출을 시작하는 0부터 시작하는 색인입니다. 시퀀스 끝에서 오프셋을 나타내는 음의 인덱스를 사용할 수 있습니다. 예를 들어slice(-3)는 시퀀스의 마지막 세 요소를 추출합니다. startIndex가 정의되지 않은 경우slice()함수는 색인0에서 시작하는 반면startIndex가 배열의 색인 범위보다 크면 빈 배열이 리턴됩니다.
endIndex옵션은 추출을 종료하기 전에 0부터 시작하는 색인이기도합니다. slice()메소드는endIndex까지 추출하지만endIndex자체를 포함합니다. endIndex옵션이 제외 된 경우slice()함수는 시퀀스의 끝, 즉array.length까지 추출합니다. endIndex가 시퀀스의 길이보다 크면slice()함수도 시퀀스의 끝까지 추출합니다.
아래 예의slice(1,3)메소드는 두 번째 색인에서 네 번째 색인으로 요소를 추출합니다. 배열에 네 번째 인덱스가 없으므로 시퀀스가 끝날 때까지 요소를 추출합니다.
코드 예 :
var myArray =
[{id: 1, name: 'Morty'}, {id: 2, name: 'Rick'}, {id: 3, name: 'Anna'}];
var newArray = myArray.slice(1, 3);
console.log(newArray)
출력:
[{id:2, name:'Rick'},{id:3, name:'Anna'}]
filter()메서드를 사용하여 배열에서 객체 제거
filter() 메서드는 함수에서 제공하는 테스트를 통과 한 요소로 새 배열을 만듭니다. 그것은 새로운 객체 배열을 반환한다는 것을 의미합니다. 테스트를 통과 한 요소가 없으면 함수는 빈 배열을 반환합니다. 화살표 함수를 사용하여filter()메서드를 설명합니다.
filter()메소드는 콜백 함수라는 용어를 사용합니다.
var newArray = myArray.filter(
(element, index, array) => {
...Items passing this condition will be added to the new array...})
이 메서드는 세 가지 인수를받습니다. element옵션은 배열에서 처리중인 현재 요소입니다. index는 선택 사항이며 배열에서 처리중인 현재 요소의 색인을 나타냅니다. 마지막으로array옵션은 호출되는 배열 필터이며 선택 사항입니다.
먼저 위의 방법에서 수행 한대로 객체로 배열을 만듭니다. 그런 다음 배열 변수와 함께filter()함수를 호출합니다. 화살표 함수의 인수로item을 지정하고item.id ! == 1 표현식을 사용하여 배열의 요소를 반환합니다. newArray변수에 새 배열을 저장하고 콘솔에 기록합니다.
아래 예제는id가1값과 같지 않은 배열의 요소 만 리턴합니다. 따라서 배열의 두 번째 및 세 번째 요소를 반환합니다.
예제 코드 :
var myArray =
[{id: 1, name: 'Morty'}, {id: 2, name: 'Rick'}, {id: 3, name: 'Anna'}];
var newArray = myArray.filter((item) => item.id !== 1);
console.log(newArray);
출력:
[{id:2, name:'Rick'},{id:3, name:'Anna'}]
