remove - Wie entferne ich ein bestimmtes Element aus einem Array in JavaScript?




js array pop (20)

Bearbeitet am Oktober 2016

  • Mach es einfach, intuitiv und explizit ( https://en.wikipedia.org/wiki/Occam%27s_razor )
  • Tun Sie es unveränderlich (Originalarray bleibt unverändert)
  • Machen Sie es mit den Standardfunktionen von JS, wenn Ihr Browser sie nicht unterstützt - verwenden Sie polyfill

In diesem Codebeispiel verwende ich die Funktion "array.filter (...)" , um unerwünschte Elemente aus dem Array zu entfernen. Diese Funktion ändert das ursprüngliche Array nicht und erstellt ein neues. Wenn Ihr Browser diese Funktion nicht unterstützt (z. B. IE vor Version 9 oder Firefox vor Version 1.5), sollten Sie den Filter Polyfill von Mozilla in Betracht ziehen.

Artikel entfernen (ECMA-262 Edition 5-Code aka 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 ]

Artikel entfernen (ES2015-Code)

let value = 3

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

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

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

WICHTIG ES2015 "() => {}" Die Pfeilfunktionssyntax wird in IE überhaupt nicht unterstützt. Chrome vor 45, Firefox vor 22 und Safari vor 10. Um die ES2015-Syntax in alten Browsern zu verwenden, können Sie BabelJS verwenden

Mehrere Elemente entfernen (ES2016-Code)

Ein zusätzlicher Vorteil dieser Methode ist, dass Sie mehrere Elemente entfernen können

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 ]

WICHTIGE "array.includes (...)" - Funktion wird in IE überhaupt nicht unterstützt, Chrome vor der 47-Version, Firefox vor der 43-Version, Safari vor der 9-Version und Edge vor der 14-Version. Hier ist also Polyfill von Mozilla

Mehrere Elemente entfernen (Experimentelles JavaScript 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 ]

Probieren Sie es selbst in BabelJS :)

Referenz

https://code.i-harness.com

Ich habe ein Array von Ganzzahlen und verwende die .push() -Methode, um Elemente hinzuzufügen.

Gibt es eine einfache Möglichkeit, ein bestimmtes Element aus einem Array zu entfernen? Das Äquivalent von so etwas wie array.remove(int); .

Ich muss Core JavaScript verwenden - es sind keine Frameworks erlaubt.


ES6 & ohne Mutation: (Oktober 2016)

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

Dann :

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

Ein Freund hatte Probleme mit dem Internet Explorer 8 und zeigte mir, was er getan hat. Ich sagte ihm, dass es falsch war, und er sagte mir, dass er die Antwort hier bekam. Die aktuelle Top-Antwort funktioniert nicht in allen Browsern (z. B. Internet Explorer 8) und entfernt nur das erste Vorkommen des Elements.

Entfernen Sie ALLE Instanzen aus einem Array

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

Sie durchläuft das Array rückwärts (da sich Indizes und Länge ändern, wenn Elemente entfernt werden), und entfernt das Element, wenn es gefunden wurde. Es funktioniert in allen Browsern.


Es gibt einige Möglichkeiten, um ein Element mithilfe von JavaScript aus einem Array zu entfernen .

Alle beschriebenen Methoden verändern das ursprüngliche Array nicht und erstellen stattdessen ein neues.

Wenn Sie den Index eines Artikels kennen

Angenommen, Sie haben ein Array und möchten ein Element an Position i entfernen.

Eine Methode ist die Verwendung von slice() :

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

console.log(filteredItems)

slice() erstellt ein neues Array mit den empfangenen Indizes. Wir erstellen einfach ein neues Array, vom Start bis zu dem Index, den wir entfernen möchten, und verketten ein anderes Array von der ersten Position, die auf die Position folgt, die wir bis zum Ende des Arrays entfernt haben.

Wenn Sie den Wert kennen

In diesem Fall ist die Verwendung von filter() eine gute Option, die einen deklarativeren Ansatz bietet:

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

console.log(filteredItems)

Dies verwendet die ES6-Pfeilfunktionen. Sie können die traditionellen Funktionen verwenden, um ältere Browser zu unterstützen:

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

console.log(filteredItems)

Oder Sie können Babel verwenden und den ES6-Code auf ES5 zurücksetzen, um ihn für alte Browser leichter verdaulich zu machen, und dennoch modernes JavaScript in Ihren Code schreiben.

Mehrere Elemente entfernen

Was ist, wenn Sie anstelle eines einzelnen Elements viele Elemente entfernen möchten?

Finden wir die einfachste Lösung.

Nach Index

Sie können einfach eine Funktion erstellen und Elemente in Serien entfernen:

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)

Nach Wert

Sie können nach der Aufnahme in der Rückruffunktion suchen:

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)

Vermeiden Sie, das ursprüngliche Array zu mutieren

splice()(nicht zu verwechseln mit slice()) mutiert das ursprüngliche Array und sollte vermieden werden.

(ursprünglich veröffentlicht unter https://flaviocopes.com/how-to-remove-item-from-array/ )


Es ist nicht erforderlich, indexOf oder splice . Es ist jedoch besser, wenn Sie nur ein Vorkommen eines Elements entfernen möchten.

Finden und bewegen (verschieben):

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

Verwenden Sie indexOf und splice (indexof):

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

Verwenden Sie nur splice (Spleiß):

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

Laufzeiten auf nodejs für ein Array mit 1000 Elementen (Durchschnitt über 10000 Läufe):

indexof ist ca. 10x langsamer als bewegen . Selbst wenn es durch das Entfernen des Aufrufs von indexOf in der Verbindung verbessert wird, ist es viel schlimmer als das Verschieben .

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

Ich bin relativ neu in JavaScript und brauchte diese Funktionalität. Ich habe nur folgendes geschrieben:

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

Dann, wenn ich es verwenden möchte:

//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");

Ausgabe - wie erwartet. ["item1", "item1"]

Möglicherweise haben Sie andere Bedürfnisse als ich, sodass Sie sie leicht an Ihre Bedürfnisse anpassen können. Ich hoffe das hilft jemandem.


John Resig hat eine gute Implementierung gepostet :

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

Wenn Sie ein globales Objekt nicht erweitern möchten, können Sie stattdessen Folgendes tun:

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

Der Hauptgrund, warum ich dies poste, ist, Benutzer vor der alternativen Implementierung zu warnen, die in den Kommentaren auf dieser Seite (14. Dezember 2007) vorgeschlagen wird:

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

Es scheint anfangs gut zu funktionieren, aber durch einen schmerzhaften Prozess habe ich festgestellt, dass es fehlschlägt, wenn versucht wird, das vorletzte Element in einem Array zu entfernen. Wenn Sie beispielsweise ein Array mit 10 Elementen haben und versuchen, das 9. Element folgendermaßen zu entfernen:

myArray.remove(8);

Sie erhalten ein 8-Element-Array. Ich weiß nicht warum, aber ich habe bestätigt, dass Johns ursprüngliche Implementierung dieses Problem nicht hat.


Kommt drauf an, ob Sie eine freie Stelle behalten wollen oder nicht.

Wenn Sie einen leeren Steckplatz wünschen, ist das Löschen in Ordnung:

delete array[ index ];

Wenn nicht, sollten Sie die splice verwenden:

array.splice( index, 1 );

Und wenn Sie den Wert dieses Elements benötigen, können Sie einfach das Element des zurückgegebenen Arrays speichern:

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

array.pop() Sie dies in einer bestimmten Reihenfolge tun möchten, können Sie array.pop() für das letzte oder array.shift() für das erste verwenden (und beide geben auch den Wert des Elements zurück).

Und wenn Sie den Index des Elements nicht kennen, können Sie array.indexOf( item ) , um ihn array.indexOf( item ) in einem if() , um ein Element zu erhalten, oder in einer while() , um alle array.indexOf( item ) zu erhalten). array.indexOf( item ) gibt entweder den Index zurück oder -1, falls nicht gefunden.


Sie können ES6 verwenden.

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

Ausgabe :

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

Sie können lodash _.pull ( _.pull array), _.pullAt ( _.pullAt array) oder _.without (nicht mutate array) verwenden.

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

Suchen Sie den index des Arrayelements, das Sie entfernen möchten, und entfernen Sie dann den Index mit dem splice .

Die splice () -Methode ändert den Inhalt eines Arrays, indem vorhandene Elemente entfernt und / oder neue Elemente hinzugefügt werden.

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

Der zweite Parameter des splice ist die Anzahl der zu entfernenden Elemente. Beachten Sie, dass der splice das Array an Ort und Stelle ändert und ein neues Array mit den entfernten Elementen zurückgibt.

Hinweis : Die Browserunterstützung für indexOf ist begrenzt. Es wird nicht in Internet Explorer 7 und 8 unterstützt.

Wenn Sie indexOf in einem nicht unterstützten Browser benötigen, versuchen Sie es mit dem folgenden polyfill . Weitere Informationen zu diesem polyfill hier .

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

Wenn Sie ein neues Array mit den gelöschten Positionen entfernen möchten, können Sie das betreffende Element jederzeit löschen und das Array herausfiltern. Für Browser, die die Filtermethode nicht implementieren, ist möglicherweise eine Erweiterung des Array-Objekts erforderlich. Langfristig ist es jedoch einfacher, da Sie lediglich Folgendes tun:

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

Sollte anzeigen [1, 2, 3, 4, 6]


Zu alt zum Antworten, aber es kann jemandem helfen, indem ein Prädikat anstelle eines Werts angegeben wird.

HINWEIS: Das angegebene Array wird aktualisiert, und die betroffenen Zeilen werden zurückgegeben

Verwendungszweck

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

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

Definition

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

Underscore.js kann verwendet werden, um Probleme mit mehreren Browsern zu lösen. Es verwendet eingebaute Browsermethoden, sofern vorhanden. Wenn sie nicht vorhanden sind, wie bei älteren Versionen von Internet Explorer, werden eigene Methoden verwendet.

Ein einfaches Beispiel zum Entfernen von Elementen aus dem Array (von der Website):

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

Update: Diese Methode wird nur empfohlen, wenn Sie ECMAScript 2015 (früher als ES6 bekannt) nicht verwenden können. Wenn Sie es verwenden können, bieten andere Antworten hier viel bessere Implementierungen.

Dieser Hauptpunkt löst Ihr Problem und löscht auch alle Vorkommen des Arguments anstelle von nur 1 (oder einem angegebenen Wert).

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

Verwendungszweck:

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]

Basierend auf all den Antworten, die hauptsächlich richtig waren und die empfohlenen Best Practices berücksichtigten (insbesondere, wenn Array.prototype nicht direkt verwendet wurde), kam der folgende Code:

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

Bei der Überprüfung der obigen Funktion stellte ich fest, dass die Leistung verbessert werden konnte, obwohl sie einwandfrei funktioniert. Auch die Verwendung von ES6 anstelle von ES5 ist ein viel besserer Ansatz. Zu diesem Zweck ist dies der verbesserte Code:

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

Wie benutzt man:

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)

Ich schreibe gerade einen Blogbeitrag, in dem ich mehrere Lösungen für Array ohne Probleme getestet und die Laufzeit verglichen habe. Ich werde diese Antwort mit dem Link aktualisieren, sobald ich diesen Beitrag fertiggestellt habe. Nur um Sie wissen zu lassen, habe ich das obige mit lodash verglichen, und falls der Browser Mapdies zulässt, schlägt es lodash! Beachten Sie, dass ich nicht mit Array.prototype.indexOfoder Array.prototype.includesals die exlcudeValues in einer Verpackung Mapoder Objectmacht Abfragen schneller! ( https://jsperf.com/array-without-benchmark-against-lodash )


Sie haben ein Array von 1 bis 9, und Sie möchten den folgenden Code entfernen.

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

Wenn Sie den Wert ex multiplizieren möchten: - 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);

Wenn Sie den Array-Wert in Array ex entfernen möchten: - [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);

beinhaltet unterstützten Browser ist link


Sie können eine Rückwärtsschleife ausführen, um sicherzustellen, dass die Indizes nicht beschädigt werden, wenn das Element mehrere Instanzen enthält.

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

Live Demo


Ich weiß, dass es bereits viele Antworten gibt, aber viele von ihnen scheinen das Problem zu komplizieren. Hier ist eine einfache, rekursive Methode, um alle Instanzen eines Schlüssels zu entfernen - ruft selbst auf, bis der Index nicht gefunden wird. Ja, es funktioniert nur in Browsern mit indexOf, aber es ist einfach und kann leicht gefüllt werden.

Stand-Alone-Funktion

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

    if(index === -1) return;

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

Prototypmethode

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

    if(index === -1) return;

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

  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