JavaScript 에서 배열 요 소 를 삭제 하 는 7 가지 방법 을 모 았 습 니 다.

자 바스 크 립 트 에 서 는 Object 를 제외 하고 Array 타 입 이 가장 많이 사용 되 는 타 입 일 것 입 니 다.다른 언어의 배열 과 큰 차이 가 있 습 니 다. 자 바스 크 립 트 의 Array 는 매우 유연 합 니 다.오늘 은 자 바스 크 립 트 에서 Array 를 삭제 하 는 방법 을 정리 해 봤 습 니 다.대체적으로 다음 과 같은 몇 가지 유형 으로 나 눌 수 있다. 1, length 2, delete 3, 스 택 방법 4, 대기 열 방법 5, 조작 방법 6, 교체 방법 7, 원형 방법
다음은 내 가 위 에서 말 한 방법 에 대해 일일이 예 를 들 어 설명 하 겠 다.
길이

JavaScript Array length               。  ，                        ，      ：

var colors = ["red", "blue", "grey"];   //      3       
colors.length = 2;
console.log(colors[2]);  //undefined

2. delete 키워드

var arr = [1, 2, 3, 4];
delete arr[0];

console.log(arr);   //[undefined, 2, 3, 4]

delete 가 삭 제 된 후에 배열 의 길이 가 변 하지 않 고 삭 제 된 요소 만 undefined 로 설정 되 어 있 음 을 알 수 있 습 니 다.
창고 방법

var colors = ["red", "blue", "grey"];
var item = colors.pop();
console.log(item);      //"grey"
console.log(colors.length);    //2

팝 방법 을 호출 할 때 배열 은 마지막 항목, 즉 'grey' 를 되 돌려 주 고 배열 의 요소 도 두 가지 밖 에 남지 않 았 음 을 알 수 있다.
4. 대열 방법
대기 열 데이터 구조의 접근 규칙 은 FIFO (먼저 나 가기) 입 니 다. 대기 열 은 목록 의 끝 에 항목 을 추가 하고 목록 의 전단 에서 항목 을 제거 합 니 다. shift 방법 을 사용 하면 배열 의 첫 번 째 항목 을 제거 하고 이 항목 을 되 돌려 주 며 배열 의 길 이 를 1 로 줄 일 수 있 습 니 다.

var colors = ["red", "blue", "grey"];
var item = colors.shift();
console.log(item);      //"red"
console.log(colors.length);    //2

5. 조작 방법 splice () 는 가장 강력 한 배열 방법 이 라 고 할 수 있 습 니 다. 그의 용법 은 여러 가지 가 있 습 니 다. 여기 서 배열 요 소 를 삭제 하 는 방법 만 소개 합 니 다.배열 요 소 를 삭제 할 때 임의의 항목 을 삭제 할 수 있 습 니 다. 두 개의 인자 만 지정 하면 됩 니 다. 삭제 할 첫 번 째 항목 의 위치 와 삭제 할 항목, 예 를 들 어 splice (0, 2) 는 배열 의 앞 두 항목 을 삭제 합 니 다.

var colors = ["red", "blue", "grey"];
var item = colors.splice(0, 1);
console.log(item);      //"red"
console.log(colors);    //["blue", "grey"]

6. 교체 방법
교체 방법 이란 반복 적 으로 배열 요 소 를 교체 해서 삭제 할 항목 을 발견 하면 삭제 하 는 것 이다. 가장 많이 사용 하 는 곳 은 배열 의 요 소 를 대상 으로 할 때 대상 의 속성, 예 를 들 어 ID 등에 따라 배열 요 소 를 삭제 하 는 것 이다.다음은 두 가지 방법 을 소개 한다.
첫 번 째 는 가장 흔히 볼 수 있 는 ForEach 순환 으로 요 소 를 비교 한 다음 삭제 합 니 다.

var colors = ["red", "blue", "grey"];

colors.forEach(function(item, index, arr) {
    if(item == "red") {
        arr.splice(index, 1);
    }
});

두 번 째 는 순환 중인 filter 방법 을 사용 합 니 다.

var colors = ["red", "blue", "grey"];

colors = colors.filter(function(item) {
    return item != "red"
});

console.log(colors);    //["blue", "grey"]

코드 는 매우 간단 합 니 다. 요 소 를 찾 는 것 은 'red' 가 아 닌 항목 을 colors (사실은 새로운 배열 을 얻 었 습 니 다) 에 되 돌려 주 고 삭제 하 는 역할 을 합 니 다.
7. 원형 방법
Array 의 원형 에 방법 을 추가 하여 삭제 의 목적 을 달성 합 니 다.

Array.prototype.remove = function(dx) {

    if(isNaN(dx) || dx > this.length){
        return false;
    }

    for(var i = 0,n = 0;i < this.length; i++) {
        if(this[i] != this[dx]) {
            this[n++] = this[i];
        }
    }
    this.length -= 1;
};

var colors = ["red", "blue", "grey"];
colors.remove(1);

console.log(colors);    //["red", "grey"]

여기에 삭제 방법 을 Array 의 원형 대상 에 추가 하면 이 환경 에 있 는 모든 Array 대상 이 이 방법 을 사용 할 수 있 습 니 다.비록 이렇게 할 수 있 지만, 우 리 는 제품 화 된 프로그램 에서 원생 대상 의 원형 을 수정 하 는 것 을 추천 하지 않 는 다.이 치 는 간단 하 다. 만약 에 어떤 실현 에 어떤 방법 이 부족 하기 때문에 원생 대상 의 원형 에 이 방법 을 추가 하면 다른 지원 방법의 실현 에서 코드 를 실행 할 때 명명 충돌 을 초래 할 수 있다.그리고 이렇게 하면 의외로 원생 방법 을 다시 쓸 수 있다.
자 바스 크 립 트 의 Array 에서 자주 사용 하 는 요 소 를 삭제 하 는 방법 을 모 았 습 니 다. 보충 을 환영 합 니 다.