배열에서 특정 항목을 제거하려면 어떻게해야합니까?


8286

숫자 배열이 있고 .push()요소를 추가 하는 방법을 사용하고 있습니다.

배열에서 특정 요소를 제거하는 간단한 방법이 있습니까?

나는 다음과 같은 것을 찾고 있습니다.

array.remove(number);

핵심 JavaScript 를 사용해야 합니다. 프레임 워크는 허용되지 않습니다.

답변:


11877

index사용하여 제거하려는 배열 요소를 indexOf찾은 다음을 사용하여 해당 인덱스를 제거하십시오 splice.

splice () 메서드는 기존 요소를 제거하거나 새 요소를 추가하여 배열의 내용을 변경합니다.

const array = [2, 5, 9];

console.log(array);

const index = array.indexOf(5);
if (index > -1) {
  array.splice(index, 1);
}

// array = [2, 9]
console.log(array); 

의 두 번째 매개 변수는 splice제거 할 요소의 수입니다. splice배열 을 적절하게 수정하고 제거 된 요소가 포함 된 새 배열을 반환합니다.


완성을 위해 여기에 기능이 있습니다. 첫 번째 함수는 단일 항목 만 제거합니다 (예 : 5from의 첫 번째 일치 항목 제거 [2,5,9,1,5,8,5]). 두 번째 함수는 모든 항목을 제거합니다.

function removeItemOnce(arr, value) { 
    var index = arr.indexOf(value);
    if (index > -1) {
        arr.splice(index, 1);
    }
    return arr;
}

function removeItemAll(arr, value) {
    var i = 0;
    while (i < arr.length) {
        if(arr[i] === value) {
            arr.splice(i, 1);
        } else {
            ++i;
        }
    }
    return arr;
}

15
@ 피터, 네 맞아요. 이 기사는 더 많은 것을 설명하고 호환되지 않는 브라우저에 대한 해결책을 가지고있다 : developer.mozilla.org/en/JavaScript/Reference/Global_Objects/…
Tom Wadley

33
@AlexandreWiechersVaz 물론 그것은 주문을 유지합니다. 그렇지 않으면 절대 가치가 없을 것입니다
TheZ


15
@AdrianP. array.indexOf(testValue)빈 배열에서 -1이되고 테스트 할 경우 스플 라이스가 없습니다. 그 이후로 답이 변했을 수도 있습니다.
UpTheCreek

13
IE 7, IE8, IE9, IE10은 Microsoft 자체에서 지원되지 않습니다. 왜 웹 개발자가 이전 브라우저를 지원해야합니까? 브라우저 업그레이드에 대한 알림 만 표시하십시오! support.microsoft.com/ko-kr/lifecycle/…
Lukas Liesis

1264

당신이 어떻게 array.remove(int)행동 할 지 모르겠습니다 . 내가 생각할 수있는 세 가지 가능성이 있습니다.

인덱스에서 배열의 요소를 제거하려면 i:

array.splice(i, 1);

number배열에서 값 을 가진 모든 요소를 ​​제거하려면 다음을 수행하십시오 .

for(var i = array.length - 1; i >= 0; i--) {
    if(array[i] === number) {
        array.splice(i, 1);
    }
}

인덱스의 요소를 i더 이상 존재하지 않으려면 다른 요소의 인덱스를 변경하지 않으려는 경우 :

delete array[i];

333
delete배열에서 요소를 제거하는 올바른 방법이 아닙니다!
Felix Kling

71
@FelixKling 그것은 당신이 그것을 array.hasOwnProperty(i)반환 false하고 그 위치에 요소 를 반환 하도록하려는 경우 작동합니다 undefined. 그러나 저는 이것이하고자하는 일반적인 일이 아니라는 것을 인정할 것입니다.
피터 올슨

88
delete배열의 길이를 업데이트하지 않고 요소를 실제로 지우지 않고 특수 값으로 만 바꿉니다 undefined.
diosney

34
@diosney 요소를 지우지 않는다고 말할 때 무슨 의미인지 모르겠습니다. 또한,보다 간단하게 함께 그 인덱스 값을 교체하지 않는다 undefined: 그것은 인덱스 배열에서 값을 모두 제거하고, 즉 후에 delete array[0], "0" in arrayfalse를 반환한다.
피터 올슨

17
@GrantGryczan 죄송합니다. 동의하지 않습니다. 이것을 제거해야 할 필요가 없습니다. 위의 텍스트는 그것이 무엇을 하는지를 명확하게 설명하며, 그것이 delete왜 작동하지 않는지를 이해 하지 못하는 사람들에게 도움이됩니다 .
피터 올슨

1203

2016 년 10 월 수정

  • 간단하고 직관적이며 명시 적입니다 ( Occam 's razor )
  • 변경 불가능 (원래 배열은 변경되지 않음)
  • 브라우저에서 지원하지 않는 경우 표준 JavaScript 함수로 수행하십시오. polyfill을 사용하십시오.

이 코드 예제에서는 "array.filter (...)" 함수를 사용하여 배열에서 불필요한 항목을 제거합니다. 이 함수는 원래 배열을 변경하지 않고 새 배열을 만듭니다. 브라우저가이 기능을 지원하지 않는 경우 (예 : 버전 9 이전의 Internet Explorer 또는 버전 1.5 이전의 Firefox) Mozilla의 필터 폴리 필 사용을 고려 하십시오 .

항목 제거 (ECMA-262 Edition 5 코드 일명 oldstyle JavaScript)

var value = 3

var arr = [1, 2, 3, 4, 5, 3]

arr = arr.filter(function(item) {
    return item !== value
})

console.log(arr)
// [ 1, 2, 4, 5 ]

항목 제거 (ECMAScript 6 코드)

let value = 3

let arr = [1, 2, 3, 4, 5, 3]

arr = arr.filter(item => item !== value)

console.log(arr)
// [ 1, 2, 4, 5 ]

중요 ECMAScript 6 "() => {}"화살표 함수 구문은 Internet Explorer, 45 이전 버전의 Chrome, 22 이전 버전의 Firefox 및 10 이전 버전의 Safari에서 전혀 지원되지 않습니다. 이전 브라우저에서 ECMAScript 6 구문을 사용하려면 BabelJS 를 사용할 수 있습니다 .


여러 항목 제거 (ECMAScript 7 코드)

이 방법의 또 다른 장점은 여러 항목을 제거 할 수 있다는 것입니다

let forDeletion = [2, 3, 5]

let arr = [1, 2, 3, 4, 5, 3]

arr = arr.filter(item => !forDeletion.includes(item))
// !!! Read below about array.includes(...) support !!!

console.log(arr)
// [ 1, 4 ]

중요 "array.includes (...)"함수는 Internet Explorer, 47 이전 버전의 Chrome, 43 이전 버전의 Firefox, 9 이전 버전의 Safari 및 14 이전 버전의 Edge에서 전혀 지원되지 않으므로 Mozilla의 polyfill입니다 .

여러 항목 제거 (향후에)

는 IF '구문이 바인딩의 " 제안이 지금까지 받아 들여,이 작업을 수행 할 수 있습니다 :

// array-lib.js

export function remove(...forDeletion) {
    return this.filter(item => !forDeletion.includes(item))
}

// main.js

import { remove } from './array-lib.js'

let arr = [1, 2, 3, 4, 5, 3]

// :: This-Binding Syntax Proposal
// using "remove" function as "virtual method"
// without extending Array.prototype
arr = arr::remove(2, 3, 5)

console.log(arr)
// [ 1, 4 ]

BabelJS에서 직접보십시오 :)

참고


6
그러나 때로는 각도는 2 * ngFor 지시자 사용 예 어레이 원래 배열 (비 불변)로부터 요소를 제거 할
Ravinder하기 Payal

43
일치하는 한 번만 가정하고 불변성이 바람직하지 않기 때문에 허용 된 솔루션보다 낫습니다
Greg

13
filter큰 배열의 경우 훨씬 느려 야합니까?
Nathan

3
예제에서 동일한 변수의 할당을 사용한 경우 언급 된 불변성의 점은 무엇입니까? :)
mench

12
이것은 좋은 대답입니다. 스플 라이스는 필터링하지 않도록 변경하는 특수 기능입니다. filter성능이 느려질 수 있지만 더 안전하고 더 나은 코드입니다. 또한 람다에 두 번째 인수를 지정하여 색인별로 필터링 할 수 있습니다.arr.filter((x,i)=>i!==2)
Matthew

449

빈 자리를 유지할지 여부에 따라 다릅니다.

빈 슬롯을 원하면 삭제해도됩니다.

delete array[index];

그렇지 않으면 접속 방법을 사용해야합니다 .

array.splice(index, 1);

그리고 해당 항목의 값이 필요한 경우 반환 된 배열의 요소를 저장할 수 있습니다.

var value = array.splice(index, 1)[0];

어떤 순서로 수행하려는 경우 array.pop()마지막 또는 array.shift()첫 번째에 사용할 수 있습니다 (둘 다 항목 값도 반환).

그리고 당신이 항목의 색인을 모른다면, 당신은 array.indexOf(item)그것을 얻을 수 있습니다 (a if()에서 하나의 항목을 얻거나 a while()에서 모든 항목 을 얻습니다). array.indexOf(item)인덱스 또는 찾지 못한 경우 -1을 반환합니다. 


25
delete배열에서 요소를 제거하는 올바른 방법이 아닙니다!
Progo

16
"슬롯을 비우려면"을 사용하십시오 array[index] = undefined;. 를 사용 delete하면 최적화가 파괴됩니다.
Bergi

4
@Jakub 매우 좋은 의견은 많은 시간을 잃어 버렸고 내 응용 프로그램 코드가 어떻게 든 손상되었다고 생각했기 때문에 ...
Pascal

당신이 같이 IndexOf에서 무엇을 얻을의 설명과 마지막 단락은 정말 도움이되었다
A. D' 알폰소

277

친구가 Internet Explorer 8 에서 문제가 발생하여 자신이 한 일을 보여주었습니다. 나는 그것이 틀렸다고 말했고, 그는 여기에 답이 있다고 말했다. 현재 최고 답변은 일부 브라우저 (예 : Internet Explorer 8)에서 작동하지 않으며 항목의 첫 번째 항목 만 제거합니다.

배열에서 모든 인스턴스 제거

function remove(arr, item) {
    for (var i = arr.length; i--;) {
        if (arr[i] === item) {
            arr.splice(i, 1);
        }
    }
}

배열을 거꾸로 반복합니다 (항목이 제거됨에 따라 색인과 길이가 변경되므로). 발견되면 항목을 제거합니다. 모든 브라우저에서 작동합니다.


11
@sroes 루프가 최대 인덱스 에서 시작 i = arr.length -1하거나 i--최대 인덱스와 동일 하기 때문에 그렇게되어서는 안됩니다 . arr.length의 초기 값입니다 i. i--는 (거짓 값)과 같아 질 때까지 항상 진실되고 (각 루프 연산에서 1 씩 감소 0) 루프는 정지합니다.
gmajivu

1
두 번째 기능은 다소 비효율적입니다. 모든 반복에서 "indexOf"는 배열의 시작부터 검색을 시작합니다.
ujeenator

3
@AmberdeBlack은 item 이 2 회 이상있는 컬렉션 에서 배열을 여러 번 변경하지 않아도되는 대신 filter 메서드 를 호출하는 것이 훨씬 좋습니다 arr.filter(function (el) { return el !== item }). 이것은 약간의 메모리를 소비하지만 수행해야 할 작업이 적기 때문에 훨씬 효율적으로 작동합니다.
유진 쿠즈 멘코

1
@AlJey, IE9 +에서만 사용할 수 있습니다. 여전히 작동하지 않을 가능성이 있습니다.
ujeenator 2016 년

1
이 답변은 몇 가지 항목을 제거해야하지만 특정 순서는 아니기 때문에 나에게 효과적이었습니다. for 루프의 역방향 진행은 배열에서 항목을 완벽하게 제거합니다.
mintedsky

172

두 가지 주요 접근 방식이 있습니다.

  1. 접속 () :anArray.splice(index, 1);

  2. 삭제 :delete anArray[index];

배열에 delete를 사용할 때주의하십시오. 객체의 속성을 삭제하는 데는 좋지만 배열에는 좋지 않습니다. 사용하는 것이 좋습니다splice배열 하는 .

delete배열에 사용할 때의 결과가 잘못 될 수 anArray.length있습니다. 다시 말해,delete 요소를 제거하지만 length 속성 값은 업데이트하지 않습니다.

또한 삭제를 사용한 후 색인 번호에 구멍이있을 것으로 예상 할 수 있습니다. 예를 들어 삭제를 사용하기 전의 색인 1, 3, 4, 8, 9 및 11 및 길이를 가질 수 있습니다. 이 경우 모든 색인 생성for 인덱스가 더 이상 순차적이지 않기 때문에 루프가 충돌합니다.

당신이 사용을 강제하는 경우 delete어떤 이유로, 당신은 사용해야 for each당신이 배열을 통해 루프를 필요로 할 때 루프를. 실제로 for가능한 경우 항상 색인 루프를 사용하지 마십시오 . 그렇게하면 코드가 더 강력 해지고 인덱스 문제가 덜 발생합니다.


144
Array.prototype.remByVal = function(val) {
    for (var i = 0; i < this.length; i++) {
        if (this[i] === val) {
            this.splice(i, 1);
            i--;
        }
    }
    return this;
}
//Call like
[1, 2, 3, 4].remByVal(3);

Array.prototype.remByVal = function(val) {
    for (var i = 0; i < this.length; i++) {
        if (this[i] === val) {
            this.splice(i, 1);
            i--;
        }
    }
    return this;
}

var rooms = ['hello', 'something']

rooms = rooms.remByVal('hello')

console.log(rooms)


14
나는이 접근법의 열렬한 팬이 아니다. 다른 라이브러리 나 프레임 워크를 사용하면 서로 충돌 할 수 있습니다.
Charlie Kilian

10
나쁜 생각,이 게시물 참조 : stackoverflow.com/questions/948358/array-prototype-problem
MMeah

10
for in배열에서 작업하는 경우 이미 문제가 있습니다.
Zirak

2
당신이 할 경우 for in배열에, 당신은 이미 더 큰 문제가있다.
Rainb

Object.defineProperty stackoverflow.com/a/35518127/3779853을 사용 하면 좋습니다.
phil294

105

사용할 필요가 없다 indexOf거나 splice. 그러나 한 요소 만 제거하려는 경우 성능이 더 좋습니다.

찾아서 이동 (이동) :

function move(arr, val) {
  var j = 0;
  for (var i = 0, l = arr.length; i < l; i++) {
    if (arr[i] !== val) {
      arr[j++] = arr[i];
    }
  }
  arr.length = j;
}

사용 indexOfsplice(색인) :

function indexof(arr, val) {
  var i;
  while ((i = arr.indexOf(val)) != -1) {
    arr.splice(i, 1);
  }
}

사용 splice(접합) :

function splice(arr, val) {
  for (var i = arr.length; i--;) {
    if (arr[i] === val) {
      arr.splice(i, 1);
    }
  }
}

1000 개의 요소가있는 배열에 대한 nodejs의 런타임 (평균 10000 회 실행) :

indexof이동 보다 약 10 배 느립니다 . 에 호출을 제거하여 개선 되더라도 indexOf에서 스플 라이스 그것보다 훨씬 더 수행 이동 .

Remove all occurrences:
    move 0.0048 ms
    indexof 0.0463 ms
    splice 0.0359 ms

Remove first occurrence:
    move_one 0.0041 ms
    indexof_one 0.0021 ms

5
여기에 표시된 'move'메소드는 모든 브라우저에서 작동해야하며 추가 배열을 작성하지 않아도됩니다. 여기서 대부분의 다른 솔루션에는 이러한 문제 중 하나 이상이 있습니다. 나는 이것이 "예쁜"것처럼 보이지 않더라도 더 많은 표를받을 가치가 있다고 생각합니다.
sockmonk

73

이것은 값 대신 술어를 제공합니다.

참고 : 주어진 배열을 업데이트하고 영향을받는 행을 반환합니다.

용법

var removed = helper.removeOne(arr, row => row.id === 5 );

var removed = helper.remove(arr, row => row.name.startsWith('BMW'));

정의

var helper = {

    // Remove and return the first occurrence

    removeOne: function(array, predicate) {
        for (var i = 0; i < array.length; i++) {
            if (predicate(array[i])) {
                return array.splice(i, 1);
            }
        }
    },

    // Remove and return all occurrences

    remove: function(array, predicate) {
        var removed = [];

        for (var i = 0; i < array.length;) {

            if (predicate(array[i])) {
                removed.push(array.splice(i, 1));
                continue;
            }
            i++;
        }
        return removed;
    }
};

나는 당신이 -1 검사 (i> -1)가 필요하다는 것을 모른다. 또한이 기능은 제거보다 필터와 같은 역할을한다고 생각합니다. row.id === 5를 전달하면 id 5 만있는 배열이 생성되므로 remove와 반대의 작업을 수행합니다. ES2015에서는 멋지게 보일 것입니다. var result = ArrayHelper.remove (myArray, row => row.id === 5);
멋진 것

이 함수는 원래의 배열을 수정 @WhatWouldBeCool, 새로운 배열 결과를 복사하는 대신 삭제 된 항목을 반환
AMD

68

필터 방법으로 쉽게 할 수 있습니다 .

function remove(arrOriginal, elementToRemove){
    return arrOriginal.filter(function(el){return el !== elementToRemove});
}
console.log(remove([1, 2, 1, 0, 3, 1, 4], 1));

이 배열의 모든 요소를 제거하고 또한 조합보다 더 빠르게 작동 slice하고 indexOf.


3
이것이 더 빠르다는 소스가 있습니까?
user3711421

2
좋은 해결책. 그러나 지적했지만, 대머리를 만드는 것이 중요하지만 slice와 indexOf와 동일한 결과를 나타내지 않습니다. 1의 모든 항목을 제거하기 때문에
user3711421

1
@ user3711421 이것은 slice 및 indexOf가 "특정 요소를 제거하기 위해"원하는 것을 수행하지 않기 때문입니다. 그것은 요소를 한 번만 제거합니다. 이것은 요소 수에 관계없이 특정 요소를 제거합니다.
Salvador Dali

66

John Resig 는 훌륭한 구현을 게시했습니다 .

// Array Remove - By John Resig (MIT Licensed)
Array.prototype.remove = function(from, to) {
  var rest = this.slice((to || from) + 1 || this.length);
  this.length = from < 0 ? this.length + from : from;
  return this.push.apply(this, rest);
};

전역 객체를 확장하지 않으려는 경우 대신 다음과 같은 작업을 수행 할 수 있습니다.

// Array Remove - By John Resig (MIT Licensed)
Array.remove = function(array, from, to) {
    var rest = array.slice((to || from) + 1 || array.length);
    array.length = from < 0 ? array.length + from : from;
    return array.push.apply(array, rest);
};

그러나 내가 이것을 게시하는 주된 이유는 사용자에게 해당 페이지의 의견에서 제안 된 대체 구현에 대해 경고하기위한 것입니다 (2007 년 12 월 14 일).

Array.prototype.remove = function(from, to){
  this.splice(from, (to=[0,from||1,++to-from][arguments.length])<0?this.length+to:to);
  return this.length;
};

처음에는 잘 작동하는 것처럼 보이지만 고통스러운 프로세스를 통해 배열에서 두 번째에서 마지막 요소를 제거하려고 할 때 실패한다는 것을 알았습니다. 예를 들어 10 요소 배열이 있고 9 번째 요소를 제거하려고 시도하는 경우 :

myArray.remove(8);

결국 8 요소 배열로 끝납니다. 이유를 모르지만 John의 원래 구현에는이 문제가 없음을 확인했습니다.


Object.prototype.hasOwnProperty항상 열심히 사용하는 것이 좋은 생각인지 어려운 방법으로 배웠습니다
Davi Fiamenghi

64

Underscore.js 는 여러 브라우저의 문제를 해결하는 데 사용할 수 있습니다. 존재하는 경우 내장 브라우저 방법을 사용합니다. 이전 Internet Explorer 버전의 경우와 같이없는 경우 고유 한 사용자 지정 방법을 사용합니다.

웹 사이트에서 배열에서 요소를 제거하는 간단한 예 :

_.without([1, 2, 1, 0, 3, 1, 4], 0, 1); // => [2, 3, 4]

우아하고 간결하지만 OP는 핵심 JS 만 언급했습니다
EigenFool

64

ES6을 사용할 수 있습니다. 예를 들어이 경우 값 '3'을 삭제하려면 다음을 수행하십시오.

var array=['1','2','3','4','5','6']
var newArray = array.filter((value)=>value!='3');
console.log(newArray);

출력 :

["1", "2", "4", "5", "6"]

4
이 대답은 원본을 직접 수정하는 대신 원본 배열의 사본을 생성하기 때문에 좋습니다.
Claudio Holanda

참고 : Array.prototype.filter는 ECMAScript 5.1 (IE8 없음)입니다. 보다 구체적인 솔루션 : stackoverflow.com/a/54390552/8958729
Chang

54

삭제 된 위치가 제거 된 새 배열을 원할 경우 항상 특정 요소를 삭제하고 배열을 필터링 할 수 있습니다. 필터 메소드를 구현하지 않는 브라우저 의 경우 배열 객체 의 확장이 필요할 수 있지만 장기적으로는이 작업이 더 쉬워집니다.

var my_array = [1, 2, 3, 4, 5, 6];
delete my_array[4];
console.log(my_array.filter(function(a){return typeof a !== 'undefined';}));

가 표시되어야합니다 [1, 2, 3, 4, 6].


45

이 코드를 확인하십시오. 모든 주요 브라우저 에서 작동 합니다 .

remove_item = function (arr, value) {
    var b = '';
    for (b in arr) {
        if (arr[b] === value) {
            arr.splice(b, 1);
            break;
        }
    }
    return arr;
}

이 함수를 호출

remove_item(array,value);

4
@RolandIllig -loop 사용 for in과 루프에서 결과를 직접 반환하여 스크립트가 더 일찍 중지 될 수 있다는 사실을 제외하고 . upvotes는 합리적이다;)
yckart

1
이것은 작은 배열에 탁월한 접근 방식입니다. 모든 브라우저에서 작동하며 최소한의 직관적 인 코드를 사용하며 복잡한 프레임 워크, 심 또는 폴리 필을 추가하지 않습니다.
Beejor

또한 for( i = 0; i < arr.length; i++ )브라우저가 항목을 저장하기로 결정한 순서에 관계없이 정확한 색인을 유지하므로 더 나은 접근 방법이 될 yckart의 의견을 반복해야합니다 for in. 그렇게하면 필요한 경우 값의 배열 인덱스를 얻을 수 있습니다.
Beejor

41

lodash _.pull (돌연변이 배열), _.pullAt (돌연변이 배열) 또는 _.without ( 돌연변이하지 않음 )을 사용할 수 있습니다 .

var array1 = ['a', 'b', 'c', 'd']
_.pull(array1, 'c')
console.log(array1) // ['a', 'b', 'd']

var array2 = ['e', 'f', 'g', 'h']
_.pullAt(array2, 0)
console.log(array2) // ['f', 'g', 'h']

var array3 = ['i', 'j', 'k', 'l']
var newArray = _.without(array3, 'i') // ['j', 'k', 'l']
console.log(array3) // ['i', 'j', 'k', 'l']

2
그것은 OP가 요청한 핵심 JS가 아닙니다. 그렇지 않습니까?
설명이 아닌 사용자

12
@ some-de-descript-user 당신이 맞습니다. 그러나 나와 같은 많은 사용자가 OP에만 국한된 것이 아니라 일반적인 답변을 찾고 있습니다.
Chun Yang

@ChunYang 당신은 절대적으로 맞습니다. 나는 이미 lodash를 사용하고 있습니다. 시간을 절약한다면 그냥 사용하지 마십시오.
int-i

38

ES6 & 돌연변이 없음 : (2016 년 10 월)

const removeByIndex = (list, index) =>
      [
        ...list.slice(0, index),
        ...list.slice(index + 1)
      ];
         
output = removeByIndex([33,22,11,44],1) //=> [33,11,44]
      
console.log(output)


왜 그냥 사용하지 filter않습니까? array.filter((_, index) => index !== removedIndex);.
user4642212

@ user4642212 당신이 맞아요! 또한, 나는 Golang 스타일의 밑줄을 좋아했다
Abdennour TOUMI

36

배열에서 특정 요소 / 문자열을 제거하는 것은 하나의 라이너로 수행 할 수 있습니다.

theArray.splice(theArray.indexOf("stringToRemoveFromArray"), 1);

어디:

theArray : 특정 항목을 제거하려는 배열

stringToRemoveFromArray : 제거하려는 문자열이고 1은 제거하려는 요소의 양입니다.

참고 : "stringToRemoveFromArray"가 배열에 없으면 배열의 마지막 요소가 제거됩니다.

요소를 제거하기 전에 먼저 배열에 요소가 있는지 확인하는 것이 좋습니다.

if (theArray.indexOf("stringToRemoveFromArray") >= 0){
   theArray.splice(theArray.indexOf("stringToRemoveFromArray"), 1);
}

클라이언트 컴퓨터에서 최신 Ecmascript 버전에 액세스 할 수있는 경우 (경고, 이전 스테이션에서는 작동하지 않을 수 있음) :

var array=['1','2','3','4','5','6']
var newArray = array.filter((value)=>value!='3');

여기서 '3'은 배열에서 제거하려는 값입니다. 그러면 배열은 다음과 같습니다.['1','2','4','5','6']


이것은 라디오 버튼 토글을 기반으로 배열을 업데이트하려고 할 때 저에게 효과적이었습니다.
jdavid05

4
경우, 조심 "stringToRemoveFromArray"당신의 배열에 있지,이 배열의 마지막 요소를 제거합니다.
Fusion

35

JavaScript를 사용하여 배열에서 항목제거하는 몇 가지 방법이 있습니다. 있습니다.

설명 된 모든 메소드 는 원래 배열을 변경하지 않고 대신 새 배열 을 작성합니다.

아이템의 인덱스를 알고 있다면

배열이 있고 position에서 항목을 제거하려고한다고 가정하십시오 i.

한 가지 방법은 다음을 사용하는 것입니다 slice().

const items = ['a', 'b', 'c', 'd', 'e', 'f']
const i = 3
const filteredItems = items.slice(0, i).concat(items.slice(i+1, items.length))

console.log(filteredItems)

slice()수신 한 색인으로 새 배열을 작성합니다. 우리는 단순히 시작에서 제거하고자하는 인덱스에 이르기까지 새로운 배열을 생성하고, 우리가 제거한 배열 다음에 배열의 끝까지 다른 배열을 연결합니다.

가치를 알고 있다면

이 경우 하나의 좋은 옵션을 사용 filter()하는 것이보다 선언 적인 접근 방식 을 제공합니다 .

const items = ['a', 'b', 'c', 'd', 'e', 'f']
const valueToRemove = 'c'
const filteredItems = items.filter(item => item !== valueToRemove)

console.log(filteredItems)

ES6 화살표 기능을 사용합니다. 기존 기능을 사용하여 이전 브라우저를 지원할 수 있습니다.

const items = ['a', 'b', 'c', 'd', 'e', 'f']
const valueToRemove = 'c'
const filteredItems = items.filter(function(item) {
  return item !== valueToRemove
})

console.log(filteredItems)

또는 Babel을 사용하여 ES6 코드를 ES5로 다시 변환하여 이전 브라우저에서보다 소화하기 쉽게 만들 수 있지만 코드에서 최신 JavaScript를 작성할 수 있습니다.

여러 항목 제거

단일 항목 대신 많은 항목을 제거하려면 어떻게합니까?

가장 간단한 해결책을 찾으십시오.

색인 별

함수를 만들고 항목을 연속으로 제거 할 수 있습니다.

const items = ['a', 'b', 'c', 'd', 'e', 'f']

const removeItem = (items, i) =>
  items.slice(0, i-1).concat(items.slice(i, items.length))

let filteredItems = removeItem(items, 3)
filteredItems = removeItem(filteredItems, 5)
//["a", "b", "c", "d"]

console.log(filteredItems)

가치

콜백 함수 내에 포함을 검색 할 수 있습니다.

const items = ['a', 'b', 'c', 'd', 'e', 'f']
const valuesToRemove = ['c', 'd']
const filteredItems = items.filter(item => !valuesToRemove.includes(item))
// ["a", "b", "e", "f"]

console.log(filteredItems)

원래 배열을 변경하지 마십시오

splice()(와 혼동하지 말 것 slice())은 원래 배열을 변경하므로 피해야합니다.

(원래 https://flaviocopes.com/how-to-remove-item-from-array/에 게시 )


34

OK, 예를 들어, 당신은 배열 아래에 있습니다 :

var num = [1, 2, 3, 4, 5];

그리고 우리는 숫자 4를 삭제하고 싶습니다. 아래 코드를 사용하면됩니다.

num.splice(num.indexOf(4), 1); // num will be [1, 2, 3, 5];

이 함수를 재사용하는 경우 재사용 가능한 함수를 작성하면 아래와 같이 기본 배열 함수에 첨부 됩니다.

Array.prototype.remove = Array.prototype.remove || function(x) {
  const i = this.indexOf(x);
  if(i===-1)
      return;
  this.splice(i, 1); // num.remove(5) === [1, 2, 3];
}

그러나 배열에 몇 개의 [5]로 대신 아래 배열이 있다면 어떨까요?

var num = [5, 6, 5, 4, 5, 1, 5];

모두 확인하려면 루프가 필요하지만 더 쉽고 효율적인 방법은 내장 JavaScript 함수를 사용하는 것이므로 대신 아래와 같은 필터를 사용하는 함수를 작성하십시오.

const _removeValue = (arr, x) => arr.filter(n => n!==x);
//_removeValue([1, 2, 3, 4, 5, 5, 6, 5], 5) // Return [1, 2, 3, 4, 6]

Lodash 또는 Underscore와 같이이를 수행하는 데 도움이되는 타사 라이브러리도 있습니다. 자세한 정보는 lodash _.pull, _.pullAt 또는 _.without을 참조하십시오.


작은 오타가 있습니다. 수정 해주세요. this.splice(num.indexOf(x), 1);=>this.splice(this.indexOf(x), 1);
TheGwa

JavaScript에서 기본 제공 기능을 Array.prototype에 첨부하지 마십시오. 이것은 나쁜 습관으로 널리 알려져 있습니다.
aikeru

나는 그것이 세상에서 가장 좋은 일이 아니라는 것에 동의하지만,이 경우 어떻게 함수에 전달할 수 있습니까?
Alireza

색인을 확인해야합니다. index = -1이면 splice (-1,1)은 마지막 요소를 제거합니다
Richard Chan

29

저는 JavaScript를 처음 접했고이 기능이 필요했습니다. 나는 단지 이것을 썼다 :

function removeFromArray(array, item, index) {
  while((index = array.indexOf(item)) > -1) {
    array.splice(index, 1);
  }
}

그런 다음 사용하고 싶을 때 :

//Set-up some dummy data
var dummyObj = {name:"meow"};
var dummyArray = [dummyObj, "item1", "item1", "item2"];

//Remove the dummy data
removeFromArray(dummyArray, dummyObj);
removeFromArray(dummyArray, "item2");

출력-예상대로. [ "item1", "item1"]

본인과 다른 요구가있을 수 있으므로 필요에 따라 쉽게 수정할 수 있습니다. 나는 이것이 누군가를 돕기를 바랍니다.


1
배열이 실제로 길고 그 안에 요소의 여러 인스턴스가있는 경우 이것은 끔찍한 동작을합니다. 배열의 indexOf 메소드는 매번 처음부터 시작되므로 비용은 O (n ^ 2)가됩니다.
Zag


27

배열에 복잡한 객체가 있다면 필터를 사용할 수 있습니까? $ .inArray 또는 array.splice가 사용하기 쉽지 않은 상황. 특히 객체가 배열에서 얕을 경우.

예를 들어 ID 필드가있는 객체가 있고 객체를 배열에서 제거하려는 경우 :

this.array = this.array.filter(function(element, i) {
    return element.id !== idToRemove;
});

이것이 내가 좋아하는 방법입니다. 화살표 기능을 사용하면 하나의 라이너가 될 수 있습니다. 성능이 궁금합니다. 또한 이것이 배열을 대체 한다는 것은 가치가 없습니다 . 이전 배열을 참조하는 코드 는 변경 사항을 알 수 없습니다.
joeytwiddle

27

ECMAScript 6을 기반으로 답변하고 싶습니다 . 아래와 같은 배열이 있다고 가정하십시오.

let arr = [1,2,3,4];

와 같은 특수 색인에서 삭제하려면 2아래 코드를 작성하십시오.

arr.splice(2, 1); //=> arr became [1,2,4]

그러나 같은 특수 항목을 삭제 3하고 색인을 모르는 경우 다음과 같이하십시오.

arr = arr.filter(e => e !== 3); //=> arr became [1,2,4]

힌트 : 빈 배열이 없으면 필터 콜백에 화살표 함수를 사용하십시오.


25

업데이트 : 이 방법은 ECMAScript 2015 (이전의 ES6)를 사용할 수없는 경우에만 권장됩니다. 그것을 사용할 수 있다면, 여기에 다른 답변이 훨씬 깔끔한 구현을 제공합니다.


이 요점 은 문제를 해결하고 1 또는 지정된 값 대신 인수의 모든 발생을 삭제합니다.

Array.prototype.destroy = function(obj){
    // Return null if no objects were found and removed
    var destroyed = null;

    for(var i = 0; i < this.length; i++){

        // Use while-loop to find adjacent equal objects
        while(this[i] === obj){

            // Remove this[i] and store it within destroyed
            destroyed = this.splice(i, 1)[0];
        }
    }

    return destroyed;
}

용법:

var x = [1, 2, 3, 3, true, false, undefined, false];

x.destroy(3);         // => 3
x.destroy(false);     // => false
x;                    // => [1, 2, true, undefined]

x.destroy(true);      // => true
x.destroy(undefined); // => undefined
x;                    // => [1, 2]

x.destroy(3);         // => null
x;                    // => [1, 2]

25

공연

오늘 (2019-12-09) 저는 선택한 솔루션에 대해 macOS v10.13.6 (High Sierra)에서 성능 테스트를 수행합니다. delete(A)를 표시 하지만 배열에 빈 공간이 남아 있기 때문에 다른 방법과 비교하여 사용하지 않습니다.

결론

  • 가장 빠른 솔루션은 array.splice(C)입니다 (두 번째 어레이가있는 소형 어레이의 경우 Safari 제외).
  • 큰 배열의 경우 array.slice+splice(H)는 Firefox 및 Safari에서 가장 빠른 불변 솔루션입니다. Array.from(B)는 Chrome에서 가장 빠릅니다.
  • 변경 가능한 솔루션은 일반적으로 변경 불가능한 것보다 1.5x-6x 빠릅니다.
  • Safari의 작은 테이블의 경우 놀랍게도 가변 솔루션 (C)이 불변 솔루션 (G)보다 느립니다.

세부

테스트에서 다른 방법으로 배열에서 중간 요소를 제거합니다. A, C의 솔루션에-장소입니다. B, D, E, F, G, H 솔루션을 변경할 수있다.

요소가 10 개인 배열의 결과

여기에 이미지 설명을 입력하십시오

Chrome에서 array.splice(C)는 가장 빠른 인플레 이스 솔루션입니다. array.filter(D)는 불변 빠른 해결책이다. 가장 느린 것은 array.slice(F)입니다. 여기 에서 컴퓨터 에서 테스트를 수행 할 수 있습니다 .

요소가 1.000.000 인 배열의 결과

여기에 이미지 설명을 입력하십시오

Chrome에서 array.splice(C)는 가장 빠른 인플레 이스 솔루션입니다 ( delete(C)는 빠르지 만 어레이에 빈 슬롯이 남아 있으므로 '완전 제거'를 수행하지 않습니다). array.slice-splice(H)는 불변 빠른 해결책이다. 가장 느린 것은 array.filter(D와 E)입니다. 여기 에서 컴퓨터 에서 테스트를 수행 할 수 있습니다 .

브라우저 비교 : Chrome v78.0.0, Safari v13.0.4 및 Firefox v71.0.0

여기에 이미지 설명을 입력하십시오


24

배열을 변경해서는 안됩니다. 이것은 기능적 프로그래밍 패턴에 위배됩니다. ECMAScript 6 방법을 사용하여 데이터를 변경하려는 어레이를 참조하지 않고 새 어레이를 생성 할 수 있습니다 filter.

var myArray = [1, 2, 3, 4, 5, 6];

5배열에서 제거하고 싶다고 가정하면 다음과 같이 간단하게 수행 할 수 있습니다.

myArray = myArray.filter(value => value !== 5);

제거하려는 값이없는 새 배열이 제공됩니다. 결과는 다음과 같습니다.

 [1, 2, 3, 4, 6]; // 5 has been removed from this array

자세한 내용은 Array.filter 에서 MDN 설명서를 참조하십시오 .


21

보다 현대적인 ECMAScript 2015 (이전 명칭 Harmony 또는 ES 6) 접근 방식. 주어진:

const items = [1, 2, 3, 4];
const index = 2;

그때:

items.filter((x, i) => i !== index);

굽힐 수 있는:

[1, 2, 4]

Babelpolyfill 서비스 를 사용하여 브라우저에서이를 완벽하게 지원할 수 있습니다 .


4
.filter동일한 배열에서 요소를 제거하는 것과 정확히 동일하지 않은 새 배열 을 반환합니다. 이 방법의 장점은 배열 방법을 함께 연결할 수 있다는 것입니다. 예 :[1,2,3].filter(n => n%2).map(n => n*n) === [ 1, 9 ]
CodeOcelot

배열에 600k 요소가 있고 처음 50k를 제거하려는 경우 속도가 느려질 수 있습니까? 이것은 해결책이 아니며 요소를 제거하고 아무것도 반환하지 않는 함수가 필요합니다.
dev1223

@Seraph이를 위해 splice또는 을 사용하고 싶을 것입니다 slice.
bjfletcher

@bjfletcher 제거 과정에서 50K 요소를 할당하고 어딘가에 던져 넣으십시오. (슬라이스 550K 요소가 있지만 창에서 던지지는 않음).
dev1223

bjfletcher의 답변을 선호합니다 items= items.filter(x=>x!=3). 또한 OP는 대규모 데이터 세트에 대한 요구 사항을 명시하지 않았습니다.
runsun

21

배열에 1-9가 있고 5를 제거하려고합니다. 아래 코드를 사용하십시오.

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

var newNumberArray = numberArray.filter(m => {
  return m !== 5;
});

console.log("new Array, 5 removed", newNumberArray);


여러 값을 원할 경우 예 :-1,7,8

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

var newNumberArray = numberArray.filter(m => {
  return (m !== 1) && (m !== 7) && (m !== 8);
});

console.log("new Array, 1,7 and 8 removed", newNumberArray);


배열에서 배열 값을 제거하려는 경우. 예 : [3,4,5]

var numberArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var removebleArray = [3,4,5];

var newNumberArray = numberArray.filter(m => {
    return !removebleArray.includes(m);
});

console.log("new Array, [3,4,5] removed", newNumberArray);

지원되는 브라우저는 link 입니다.


19

나는 이미 많은 답변이 있지만 많은 사람들이 문제를 지나치게 복잡하게하는 것으로 알고 있습니다. 다음은 키의 모든 인스턴스를 제거하는 간단하고 재귀적인 방법입니다. 인덱스를 찾을 수 없을 때까지 자체 호출합니다. 예,는 브라우저에서만 작동 indexOf하지만 간단하고 쉽게 채울 수 있습니다.

독립형 기능

function removeAll(array, key){
    var index = array.indexOf(key);

    if(index === -1) return;

    array.splice(index, 1);
    removeAll(array,key);
}

프로토 타입 방법

Array.prototype.removeAll = function(key){
    var index = this.indexOf(key);

    if(index === -1) return;

    this.splice(index, 1);
    this.removeAll(key);
}

참고 로이 방법을 사용할 때주의해야 할 점은 스택 오버플로 가능성입니다. 대규모 배열로 작업하지 않는 한 문제가 없습니다.
wharding28

그러나 왜 중간에 돌아 오는가? 효과적으로 goto 문입니다.
Peter Mortensen

18

요소의 인스턴스가 여러 개인 경우 역방향 루프를 수행하여 인덱스를 망치지 않도록 할 수 있습니다.

var myElement = "chocolate";
var myArray = ['chocolate', 'poptart', 'poptart', 'poptart', 'chocolate', 'poptart', 'poptart', 'chocolate'];

/* Important code */
for (var i = myArray.length - 1; i >= 0; i--) {
    if (myArray[i] == myElement) myArray.splice(i, 1);
}

라이브 데모

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.