Javascript에서 배열에서 요소를 제거하는 방법

이번 글에서는 자바스크립트에서 배열의 요소를 제거하는 방법에 대해 알아보겠습니다. 다른 javascript 배열 방법을 사용하여 배열의 요소를 제거할 수 있습니다. javascript array pop을 사용하여 배열의 끝에서, javascript array shift를 사용하여 처음부터, 또는 javascript array splice를 사용하여 중간에서 요소를 제거할 수 있습니다.

자, 자바 스크립트의 배열, 자바 스크립트 배열 방법, 자바 스크립트 배열 스플 라이스, 배열 필터, 자바 스크립트 배열 팝, 자바 스크립트 배열 이동, jquery의 배열에서 요소를 제거하는 방법, 인덱스로 배열 자바 스크립트에서 요소 제거, 배열 자바 스크립트에서 요소 제거를 살펴 보겠습니다. 값, jquery는 배열에서 요소를 제거합니다.

원하는 항목으로 새 배열을 만드는 Javascript 배열 필터 방법, 배열에서 원하지 않는 요소를 제거하는 고급 방법.

POP - 끝에서 배열 요소 제거

배열의 마지막 요소를 제거하려면 pop 메서드가 유용합니다. 이 메서드는 해당 요소를 반환하고 length 속성을 업데이트합니다. pop 메소드는 호출된 배열을 수정합니다. 이것은 delete를 사용하는 것과 달리 마지막 요소가 완전히 제거되고 배열 길이가 줄어드는 것을 의미합니다.

예시 :

var ar = [1, 2, 3, 4, 5, 6, 7, 8];

ar.pop(); // It will returns 8

console.log( ar ); // [1, 2, 3, 4, 5, 6, 7]

Read Also : Datatable Server Side Custom Search/Filter In Laravel


Shift - 처음부터 배열 요소 제거

shift 메서드는 pop 메서드와 동일하게 작동하지만 자바스크립트 배열의 마지막 요소 대신 첫 번째 요소를 제거합니다.

shift 메서드는 첫 번째 배열 요소만 제거했기 때문에 매개 변수가 없습니다. 요소가 제거되면 나머지 요소는 아래로 이동합니다.

예시 :

var ar = ['a', 'b', 'c', 'd'];

ar.shift(); // It will returns "a"

Splice - 특정 배열 인덱스에서 배열 요소 제거

이 메서드는 배열에서 요소를 추가하거나 제거하는 데 사용됩니다. 첫 번째 인수는 요소 추가 또는 제거를 시작할 위치를 지정하고 두 번째 인수는 제거할 요소 수를 지정합니다. 세 번째 및 후속 인수는 선택 사항이며 배열에 추가할 요소를 지정합니다.

여기서는 splice 메서드를 사용하여 위치 3(0부터 시작하는 인덱스)에서 시작하는 두 요소를 제거합니다.

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
var removed = arr.splice(2,2);

여기서 제거된 배열에는 [3, 4]가 포함되고 원래 배열에는 나머지 값이 포함됩니다.


Read Also : Laravel 8 Mobile Number OTP Authentication using Firebase


splice 메서드는 배열에서 요소 범위를 제거하는 데에도 사용할 수 있습니다.

var list = ["a", "b", "c", "d"];

list.splice(0, 2); // Starting at index position 0, remove two elements ["a", "b"] and retains ["c", "d"].

필터 - 배열에서 프로그래밍 방식으로 요소를 제거할 수 있습니다.

단일 매개변수 콜백 메소드가 있는 필터 메소드. 필터 메서드가 배열 요소를 반복할 때 콜백이 트리거됩니다. 현재 값 또는 요소, 현재 배열 인덱스 및 전체 배열의 콜백에 세 개의 값을 전달합니다.

var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
var filtered = array.filter(function(value, index, arr){ 
        return value > 5;
    });

    //filtered => [6, 7, 8, 9]
    //array => [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]

다음을 좋아할 수도 있습니다.

Read Also : Laravel 8 Google Pie Chart Example

Read Also : Load More Data in Laravel Using Ajax jQuery

Read Also : How to Add and Delete Rows Dynamically using jQuery

Read Also : How To Check User Browser Is Supported Or Not In jQuery