javascript - 특정값 - 자바스크립트 배열 전체 삭제




JavaScript의 배열에서 특정 요소를 제거하려면 어떻게해야합니까? (20)

10 월 2016 일에 편집 됨

  • 간단하고 직관적이며 명시 적으로 처리하십시오 ( https://en.wikipedia.org/wiki/Occam%27s_razor ).
  • 그것은 불변 (기존 배열은 변경되지 않음)
  • 브라우저가 표준 JS 함수를 지원하지 않으면 표준 JS 함수로 수행하십시오. - polyfill 사용

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

항목 삭제 (ECMA-262 Edition 5 코드, 일명 oldstyle JS)

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 ]

항목 제거 (ES2015 코드)

let value = 3

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

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

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

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

여러 항목 제거 (ES2016 코드)

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

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에서 전혀 지원되지 않습니다. Chrome은 47 이전 버전이었고, Firefox는 43 이전 버전이었고, Safari는 9 이전 버전이었고, Edge는 14 이전 버전 이었습니다. 그래서 여기에 Mozilla의 polyfill이 있습니다.

여러 항목 삭제 (최첨단 실험 자바 스크립트 ES2018?)

// 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에서 직접 체험 해보십시오 :)

참고

나는 정수 배열을 가지고 있으며, .push() 메서드를 사용하여 요소를 추가하고 있습니다.

배열에서 특정 요소를 제거하는 간단한 방법이 있습니까? array.remove(int); 와 같은 것 array.remove(int); .

핵심 자바 스크립트를 사용해야하며 프레임 워크는 허용되지 않습니다.


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

const removeByIndex = (list, index) =>
  [
    ...list.slice(0, index),
    ...list.slice(index + 1)
  ];

다음 :

removeByIndex([33,22,11,44],1) //=> [33,11,44]

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"]

당신은 내가 필요로하는 것과는 다른 필요성을 가지고있을 수 있으므로 쉽게 수정할 수 있습니다. 나는 이것이 누군가를 돕기를 바랍니다.


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의 원래 구현에는이 문제가 없다고 확인했습니다.


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

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

  2. delete : delete anArray[index];

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

배열에 delete 를 사용하면 anArray.length 대한 잘못된 결과가 anArray.length 있습니다. 즉, delete 는 요소를 제거하지만 length 속성의 값은 업데이트하지 않습니다.

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

어떤 이유로 든 delete 를 사용하게된다면 배열을 반복해야 할 때 for each 루프에 사용해야합니다. 사실상 가능한 경우 색인 된 for 루프를 사용하지 마십시오. 그렇게하면 코드가보다 강력 해지고 인덱스 문제가 발생하지 않게됩니다.


배열에 배열을 변경해서는 안됩니다. 이것은 기능적 프로그래밍 패턴에 위배됩니다. 할 수있는 일은 es6 메소드 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 설명서 ( filter


보다 현대적인 ECMAScript 2015 (이전에는 하모니 또는 ES 6이라고 함) 접근 방식. 주어진:

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

그때:

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

굽힐 수 있는:

[1, 2, 4]

Babelpolyfill 서비스 를 사용하여 여러 브라우저에서 잘 지원되는지 확인할 수 있습니다.


빈 자리를 유지할 것인지의 여부에 달려 있습니다.

빈 슬롯을 원할 경우 삭제가 좋습니다.

delete array[ index ];

그렇지 않으면 splice 메서드를 사용해야합니다.

array.splice( index, 1 );

그리고 그 아이템의 가치가 필요하다면 반환 된 배열의 요소를 저장할 수 있습니다 :

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

어떤 순서로 처리하고 싶다면 마지막 array.shift() 을, 첫 번째 array.shift() 를 사용하면됩니다. 둘 다 항목의 값을 반환합니다.

항목의 색인을 모를 경우 array.indexOf( item ) 를 사용하여 항목을 가져 array.indexOf( item ) if() 에서 항목을 가져 오려면 while() 에서 가져올 수 있습니다). array.indexOf( item ) 는 인덱스를 찾지 못하면 -1을 반환합니다.


, 아래 배열을 가지고 있습니다.

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와 같이이를 수행하는 데 도움이되는 제 3 자 라이브러리가 있습니다. 자세한 내용은 lodash _.pull, _.pullAt 또는 _.outout을 참조하십시오.


응답하기에는 너무 오래되었지만 값 대신 술어를 제공하여 누군가를 도울 수 있습니다.

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

용법

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

이미 많은 답변이 있다는 것을 알고 있지만 많은 사람들이 문제를 복잡하게 보입니다. 다음은 키의 모든 인스턴스를 제거하는 간단하고 재귀적인 방법입니다. 인덱스가 발견되지 않을 때까지 self를 호출합니다.예, 브라우저에서만 작동 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);
}

제거 할 배열 요소의 index 를 찾은 다음 splice 하여 해당 인덱스를 제거합니다.

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

var array = [2, 5, 9];
console.log(array)
var index = array.indexOf(5);
if (index > -1) {
  array.splice(index, 1);
}
// array = [2, 9]
console.log(array);

splice 의 두 x splice 매개 변수는 제거 할 요소의 수입니다. splice 는 배열에서 배열을 수정하고 제거 된 요소가 들어있는 새로운 배열을 반환합니다.

참고 : indexOf대한 브라우저 지원 은 제한되어 있습니다. Internet Explorer 7 및 8에서는 지원되지 않습니다.

지원되지 않는 브라우저에서 indexOf 가 필요한 경우 다음 polyfill 사용해보십시오. 이 polyfill 에 대한 자세한 정보는 여기에서 polyfill 십시오 .

Array.prototype.indexOf || (Array.prototype.indexOf = function(d, e) {
    var a;
    if (null == this) throw new TypeError('"this" is null or not defined');
    var c = Object(this),
        b = c.length >>> 0;
    if (0 === b) return -1;
    a = +e || 0;
    Infinity === Math.abs(a) && (a = 0);
    if (a >= b) return -1;
    for (a = Math.max(0 <= a ? a : b - Math.abs(a), 0); a < b;) {
        if (a in c && c[a] === d) return a;
        a++
    }
    return -1
});

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, 5 removed", newNumberArray);

배열 ex : - [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 포함 link


Underscore.js 는 여러 브라우저의 문제를 해결하는 데 사용할 수 있습니다. 존재하는 경우 브라우저 내장 메소드를 사용합니다. 구형 Internet Explorer 버전과 같이 부재중이라면 자체 사용자 지정 메서드를 사용합니다.

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

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

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

인덱스의 요소를 더 이상 만들고 싶지 않지만 다른 요소의 인덱스를 변경하지 않으려면 다음을 수행하십시오.

delete array[i];

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 (indexof)를 사용하십시오.

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 배 느립니다. splice 에서 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

업데이트 : 이 방법은 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]

배열에서 제거하는 또 다른 좋은 해결책이 있습니다.

var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

filter


주로 올바른 올바른 대답을 바탕으로 (특히 Array.prototype을 직접 사용하지 않음) 제안 된 모범 사례를 고려하여 아래 코드를 작성했습니다.

function arrayWithout(arr, values) {
  var isArray = function(canBeArray) {
    if (Array.isArray) {
      return Array.isArray(canBeArray);
    }
    return Object.prototype.toString.call(canBeArray) === '[object Array]';
  };

  var excludedValues = (isArray(values)) ? values : [].slice.call(arguments, 1);
  var arrCopy = arr.slice(0);

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

  return arrCopy;
}

위의 기능을 검토해도 실제로 제대로 작동 함에도 불구하고 성능이 약간 향상 될 수 있음을 깨달았습니다. 또한 ES5 대신 ES6을 사용하는 것이 훨씬 더 나은 방법입니다. 이를 위해 개선 된 코드가 있습니다.

const arrayWithoutFastest = (() => {
  const isArray = canBeArray => ('isArray' in Array) 
    ? Array.isArray(canBeArray) 
    : Object.prototype.toString.call(canBeArray) === '[object Array]';

  let mapIncludes = (map, key) => map.has(key);
  let objectIncludes = (obj, key) => key in obj;
  let includes;

  function arrayWithoutFastest(arr, ...thisArgs) {
    let withoutValues = isArray(thisArgs[0]) ? thisArgs[0] : thisArgs;

    if (typeof Map !== 'undefined') {
      withoutValues = withoutValues.reduce((map, value) => map.set(value, value), new Map());
      includes = mapIncludes;
    } else {
      withoutValues = withoutValues.reduce((map, value) => { map[value] = value; return map; } , {}); 
      includes = objectIncludes;
    }

    const arrCopy = [];
    const length = arr.length;

    for (let i = 0; i < length; i++) {
      // If value is not in exclude list
      if (!includes(withoutValues, arr[i])) {
        arrCopy.push(arr[i]);
      }
    }

    return arrCopy;
  }

  return arrayWithoutFastest;  
})();

사용하는 방법:

const arr = [1,2,3,4,5,"name", false];

arrayWithoutFastest(arr, 1); // will return array [2,3,4,5,"name", false]
arrayWithoutFastest(arr, 'name'); // will return [2,3,4,5, false]
arrayWithoutFastest(arr, false); // will return [2,3,4,5]
arrayWithoutFastest(arr,[1,2]); // will return [3,4,5,"name", false];
arrayWithoutFastest(arr, {bar: "foo"}); // will return the same array (new copy)

나는 현재 문제없이 Array에 대한 몇 가지 솔루션을 벤치마킹 한 블로그 게시물을 작성 중이며 실행하는 데 걸리는 시간을 비교했습니다. 나는 일단이 게시물을 완성하면이 답변을 링크로 업데이트 할 것입니다. 내가 알기로는, 위의 내용을 lodash와 비교해 보았습니다. 브라우저가 지원하는 경우, Maplodash를 상쇄합니다! 내가 사용하지 않는 오전주의 Array.prototype.indexOf또는 Array.prototype.includesA의 exlcudeValues 포장으로 Map또는 Object더 빠른 쿼리하게! ( https://jsperf.com/array-without-benchmark-against-lodash )


  Array.prototype.removeItem = function(a) {
            for (i = 0; i < this.length; i++) {
                if (this[i] == a) {
                    for (i2 = i; i2 < this.length - 1; i2++) {
                        this[i2] = this[i2 + 1];
                    }
                    this.length = this.length - 1
                    return;
                }
            }
        }

    var recentMovies = ['Iron Man', 'Batman', 'Superman', 'Spiderman'];
    recentMovies.removeItem('Superman');




arrays