Wie kann ich ein bestimmtes Element aus einem Array in JavaScript entfernen?

Wie entferne ich einen bestimmten Wert aus einem Array? Etwas wie:

array.remove(value);

Einschränkungen: Ich muss verwenden Kern JavaScript. Rahmen sind nicht erlaubt.

Bearbeitet am Oktober 2016

• Mach es einfach, intuitiv und explizit (Ockhams Rasiermesser)
• Tun Sie es unveränderlich (das ursprüngliche Array bleibt unverändert)
• Tun Sie es mit Standard-JavaScript-Funktionen, wenn Ihr Browser sie nicht unterstützt – Füllwatte verwenden

In diesem Codebeispiel verwende ich array.filter(...) Funktion zum Entfernen unerwünschter Elemente aus einem Array. Diese Funktion ändert das ursprüngliche Array nicht und erstellt ein neues. Wenn Ihr Browser diese Funktion nicht unterstützt (z. B. Internet Explorer vor Version 9 oder Firefox vor Version 1.5), sollten Sie dies in Erwägung ziehen Polyfilling mit core-js.

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

Element entfernen (ECMAScript 6-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 ECMAScript 6 () => {} Pfeilfunktionssyntax wird überhaupt nicht in Internet Explorer, Chrome vor Version 45, Firefox vor Version 22 und Safari vor Version 10 unterstützt. Um ECMAScript 6-Syntax in alten Browsern zu verwenden, können Sie verwenden BabelJS.

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

WICHTIG array.includes(...) Funktion wird in Internet Explorer überhaupt nicht unterstützt, Chrome vor Version 47, Firefox vor Version 43, Safari vor Version 9 und Edge vor Version 14, aber Sie können Polyfill mit core-js.

Mehrere Elemente entfernen (in Zukunft vielleicht)

Wenn die “This-Binding-Syntax” Vorschlag angenommen wird, können Sie Folgendes tun:

// 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 aus 🙂

Referenz

• Array.prototype.includes
• Funktionelle Zusammensetzung

Es hängt davon ab, ob Sie einen leeren Platz behalten möchten oder nicht.

Wenn du Tun wollen einen leeren Steckplatz:

array[index] = undefined;

Wenn du nicht wollen einen leeren Steckplatz:

//To keep the original:
//oldArray = [...array];

//This modifies the array.
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];

Wenn Sie an beiden Enden des Arrays entfernen möchten, können Sie verwenden array.pop() für das letzte bzw array.shift() für den ersten (beide geben auch den Wert des Artikels zurück).

Wenn Sie den Index des Elements nicht kennen, können Sie verwenden array.indexOf(item) um es zu bekommen (in a if() um einen Artikel zu bekommen oder in a while() alle zu bekommen). array.indexOf(item) gibt entweder den Index oder zurück -1 wenn nicht gefunden.

Ein Freund hatte Probleme in InternetExplorer 8 und zeigte mir, was er tat. Ich sagte ihm, es sei falsch, und er sagte mir, er habe hier die Antwort bekommen. Die aktuelle Top-Antwort funktioniert nicht in allen Browsern (z. B. Internet Explorer 8) und entfernt nur das erste Vorkommen des Elements.

ALLE Instanzen aus einem Array entfernen

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

Es 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 wird. Es funktioniert in allen Browsern.

Es gibt zwei Hauptansätze

1. spleißen(): anArray.splice(index, 1);

    let fruits = ['Apple', 'Banana', 'Mango', 'Orange']
    let removed = fruits.splice(2, 1);
    // fruits is ['Apple', 'Banana', 'Orange']
    // removed is ['Mango']
   

2. löschen: delete anArray[index];

    let fruits = ['Apple', 'Banana', 'Mango', 'Orange']
    let removed = delete fruits(2);
    // fruits is ['Apple', 'Banana', undefined, 'Orange']
    // removed is true
   

Seien Sie vorsichtig, wenn Sie die verwenden delete für ein Array. Es ist gut zum Löschen von Attributen von Objekten, aber nicht so gut für Arrays. Es ist besser zu verwenden splice für Arrays.

Denken Sie daran, wenn Sie verwenden delete für ein Array könnten Sie falsche Ergebnisse erhalten anArray.length. Mit anderen Worten, delete würde das Element entfernen, aber den Wert der length-Eigenschaft nicht aktualisieren.

Sie können auch damit rechnen, dass nach der Verwendung von delete Löcher in den Indexnummern vorhanden sind, z. B. könnten Sie am Ende die Indizes 1, 3, 4, 8, 9 und 11 und die Länge wie vor der Verwendung von delete haben. In diesem Fall alle indiziert for Schleifen würden abstürzen, da Indizes nicht mehr sequentiell sind.

Wenn Sie gezwungen sind, zu verwenden delete aus irgendeinem Grund sollten Sie dann verwenden for each Schleifen, wenn Sie Arrays durchlaufen müssen. Vermeiden Sie in der Tat immer die Verwendung von indexed for Schleifen, ggf. Auf diese Weise wäre der Code robuster und weniger anfällig für Probleme mit Indizes.