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

JAVASCRIPT / 글쓴이

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

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

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

array.remove(number);

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

답변

을 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;
}

답변

당신이 어떻게 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];

답변

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에서 직접보십시오 🙂

참고

답변

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

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

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을 반환합니다. 

답변

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

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

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

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

답변

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

  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가능한 경우 항상 색인 루프를 사용하지 마십시오 . 그렇게하면 코드가 더 강력 해지고 인덱스 문제가 덜 발생합니다.

답변

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)

스 니펫 확장