Entfernen Sie das Objekt mit JavaScript aus dem Array

549

Wie kann ich ein Objekt aus einem Array entfernen? Ich möchte das Objekt entfernen, den Namen enthält Kristianaus someArray. Zum Beispiel:

someArray = [{name:"Kristian", lines:"2,5,10"},
             {name:"John", lines:"1,19,26,96"}];

Ich möchte erreichen:

someArray = [{name:"John", lines:"1,19,26,96"}];
Clem
quelle
3
Zu Ihrer Information Ich habe die Bearbeitung dieser Frage rückgängig gemacht, damit die Array-Syntax wieder falsch ist und alle diese Antworten im Kontext stehen.
Dunhamzzz
2
Und dann wurde die Array-Syntax erneut (zweimal) "korrigiert", so dass die Antworten nicht mehr im Kontext stehen.
Teepeemm
4
Wie hilft der Syntaxfehler dabei, einige Antworten sinnvoll zu machen?
Samy Bencherif
1
@SamyBencherif - Einige der Antworten behandeln explizit den Syntaxfehler in der Originalversion der Frage. Wenn Sie diesen Syntaxfehler entfernen, sprechen diese Antworten jetzt von etwas, das nicht vorhanden ist.
nnnnnn

Antworten:

778

Sie können verschiedene Methoden verwenden, um Elemente aus einem Array zu entfernen:

//1
someArray.shift(); // first element removed
//2
someArray = someArray.slice(1); // first element removed
//3
someArray.splice(0, 1); // first element removed
//4
someArray.pop(); // last element removed
//5
someArray = someArray.slice(0, a.length - 1); // last element removed
//6
someArray.length = someArray.length - 1; // last element removed

Wenn Sie das Element an der Position entfernen möchten x, verwenden Sie:

someArray.splice(x, 1);

Oder

someArray = someArray.slice(0, x).concat(someArray.slice(-x));

Antwort auf den Kommentar von @ chill182 : Sie können ein oder mehrere Elemente aus einem Array entfernen Array.filteroder Array.splicemit Array.findIndex(siehe MDN ) kombinieren , z

// non destructive filter > noJohn = John removed, but someArray will not change
let someArray = getArray();
let noJohn = someArray.filter( el => el.name !== "John" ); 
log("non destructive filter > noJohn = ", format(noJohn));
log(`**someArray.length ${someArray.length}`);

// destructive filter/reassign John removed > someArray2 =
let someArray2 = getArray();
someArray2 = someArray2.filter( el => el.name !== "John" );
log("", "destructive filter/reassign John removed > someArray2 =", 
  format(someArray2));
log(`**someArray2.length ${someArray2.length}`);

// destructive splice /w findIndex Brian remains > someArray3 =
let someArray3 = getArray();
someArray3.splice(someArray3.findIndex(v => v.name === "Kristian"), 1);
someArray3.splice(someArray3.findIndex(v => v.name === "John"), 1);
log("", "destructive splice /w findIndex Brian remains > someArray3 =", 
  format(someArray3));
log(`**someArray3.length ${someArray3.length}`);

// Note: if you're not sure about the contents of your array, 
// you should check the results of findIndex first
let someArray4 = getArray();
const indx = someArray4.findIndex(v => v.name === "Michael");
someArray4.splice(indx, indx >= 0 ? 1 : 0);
log("", "check findIndex result first > someArray4 (nothing is removed) > ",
  format(someArray4));
log(`**someArray4.length (should still be 3) ${someArray4.length}`);

function format(obj) {
  return JSON.stringify(obj, null, " ");
}

function log(...txt) {
  document.querySelector("pre").textContent += `${txt.join("\n")}\n`
}

function getArray() {
  return [ {name: "Kristian", lines: "2,5,10"},
           {name: "John", lines: "1,19,26,96"},
           {name: "Brian", lines: "3,9,62,36"} ];
}
<pre>
**Results**

</pre>

KooiInc
quelle
2
@Klemzy meintest du nicht nicht mit Index? nach Wert ...?
Royi Namir
328
In der ursprünglichen Frage wurde gefragt, wie das Objekt mit dem Namen = "Kristian" aus dem Array entfernt werden soll. Ihre Antwort geht davon aus, dass es das erste Element im Array ist, aber was ist, wenn Kristin nicht im ersten Element enthalten ist? Dann funktioniert Ihre Antwort nicht.
Rochelle C
7
@ chill182: Es ist keine spezifische Antwort, sondern eine allgemeinere. Daraus sollten Sie die Methode zum Entfernen von Elementen ableiten können. Wenn Sie ein Element an Position x entfernen möchten, ist dies möglicherweise ein Hinweis zum Entfernen anderer als der ersten Elemente, oder?
KooiInc
6
Die Spleißfunktion war für mich hilfreich, aber Sie hätten someArray nicht neu zuweisen sollen. Dies führt dazu, dass someArray das entfernte Element enthält, anstatt das resultierende Array mit dem entfernten Element.
Kenn Cal
1
Sie sollten das findIndexErgebnis überprüfen, bevor Sie es verwenden splice. Wenn das Array keine Elemente enthält, die mit der Bedingung übereinstimmen, findIndexwird dies zurückgegeben, -1und wenn Sie dies direkt eingeben, splicewird das letzte Element im Array durch Arbitraty gelöscht.
jdnz
131

Ich empfehle die Verwendung von lodash.js oder Sugar.js für allgemeine Aufgaben wie diese:

// lodash.js
someArray = _.reject(someArray, function(el) { return el.Name === "Kristian"; });

// sugar.js
someArray.remove(function(el) { return el.Name === "Kristian"; });

In den meisten Projekten ist es sehr nützlich, eine Reihe von Hilfsmethoden zu haben, die von solchen Bibliotheken bereitgestellt werden.

Psyho
quelle
13
Ich denke, der Unterstrich ist etwas falsch. Sollte seinsomeArray = _.reject(someArray, function(el) { return el.Name === "Kristian"; });
Andy Ford
7
Wenn Sie underscore.js oder Sugar.js nicht verwenden möchten, können Sie dies tunsomeArray = someArray.filter(function(e) { return e.Name !== "Kristian"; });
BenR
1
Eine andere Sache, die ich möchte, gibt es separate Schaltflächen für jedes Objekt im Array. Wenn ich dieses bestimmte Objekt in der Array-Schaltfläche löschen möchte, klicken Sie auf. wie es geht . Ich habe Winkel js ng-repeat verwendet, um Elemente zu generieren.
Kannst
5
Ich werde hier gegen den Strich gehen; Es ist eine schlechte Form, eine ganze Bibliothek einzuschließen, um Elemente aus Objekten zu entfernen (was, wie die akzeptierte Antwort zeigt, sofort unterstützt wird). Es fügt Ihrem Code unnötiges Gewicht und Komplexität hinzu, es sei denn, Sie benötigen ihn bereits für die leistungsfähigeren Funktionen, die die Bibliothek bietet.
Josh Doebbert
4
Für eine einfache Bedienung werde ich niemals empfehlen, die Bibliothek
einzuschließen
130

Die saubere Lösung wäre zu verwenden Array.filter:

var filtered = someArray.filter(function(el) { return el.Name != "Kristian"; }); 

Das Problem dabei ist, dass es unter IE <9 nicht funktioniert. Sie können jedoch Code aus einer Javascript-Bibliothek (z. B. underscore.js ) einfügen , der dies für jeden Browser implementiert.

Jon
quelle
10
Dies wird jedoch alle gefundenen Vorkommen entfernen, nicht nur das erste
Flavien Volken
4
Und es wird ein neues Array zurückgegeben, anstatt das ursprüngliche zu ändern. Je nach Anwendungsfall kann dies das sein, was Sie wollen oder nicht.
Jochie Nabuurs
1
@JochieNabuurs es ist in der Tat ein neues Array. Das Objekt bleibt jedoch gleich. Sie können den Wert jedes Objekts weiterhin ändern und er wird das Objekt des ursprünglichen Arrays widerspiegeln.
DriLLFreAK100
2
Bis zu dem Punkt, dass ein neues Array zurückgegeben wird, ändern Sie einfach die Lösung in someArray = someArray.filter(function(el) { return el.Name != "Kristian"; }); Adressen, die, nein?
hBrent
93

Wie wäre es damit?

$.each(someArray, function(i){
    if(someArray[i].name === 'Kristian') {
        someArray.splice(i,1);
        return false;
    }
});
Allan Taylor
quelle
8
Dies führt nicht zu einem Fehler, da $.each()die Array-Länge vor dem Schleifen zwischengespeichert wird. Wenn Sie also ein Element entfernen, $.each()wird das Ende des (jetzt kürzeren) Arrays überschritten. (Also someArray[i]wird undefinedund undefined.namewird abstürzen.)
nnnnnn
5
Fügen Sie dann nach dem Spleißen ein 'return false' hinzu.
Allan Taylor
18
Dies ist kein Javascript. -1
Zwiebelpsy
20
Bitte beachten Sie, dass diese Antwort jQuery
Clarkey
68

Ihr "Array" ist wie gezeigt eine ungültige JavaScript-Syntax. Geschweifte Klammern {}stehen für Objekte mit Eigenschaftsnamen / Wert-Paaren, eckige Klammern []stehen jedoch für Arrays - wie folgt:

someArray = [{name:"Kristian", lines:"2,5,10"}, {name:"John", lines:"1,19,26,96"}];

In diesem Fall können Sie die .splice()Methode verwenden , um ein Element zu entfernen. Um das erste Element (Index 0) zu entfernen, sagen Sie:

someArray.splice(0,1);

// someArray = [{name:"John", lines:"1,19,26,96"}];

Wenn Sie den Index nicht kennen, aber das Array durchsuchen möchten, um das zu entfernende Element mit dem Namen "Kristian" zu finden, können Sie Folgendes tun:

for (var i =0; i < someArray.length; i++)
   if (someArray[i].name === "Kristian") {
      someArray.splice(i,1);
      break;
   }

EDIT: Ich habe gerade bemerkt, dass Ihre Frage mit "jQuery" markiert ist, also können Sie die $.grep()Methode ausprobieren :

someArray = $.grep(someArray,
                   function(o,i) { return o.name === "Kristian"; },
                   true);
nnnnnn
quelle
Warum haben sie die Überlastung hinzugefügt? Sicherlich hättest du es einfach sagen können! = "Kristian". Welchen Zweck erfüllt die Überlastung?
markthewizard1234
@ markthewizard1234 - Meinst du das boolesche Argument "invertieren" in $.grep()? In diesem Beispiel wird nicht viel hinzugefügt, wo ja, ich hätte sagen können !=, aber in anderen Fällen haben Sie möglicherweise bereits eine Funktion definiert, die zufällig den gegenteiligen Test zu dem durchführt, was Sie grep möchten, also anstatt eine zu definieren Zusätzliche Funktion Sie können diese Überladung einfach verwenden, um die Ergebnisse zu invertieren.
nnnnnn
Ah, wenn Sie also eine Wrapper-Funktion hätten, die grep enthält, könnten Sie den Booleschen Wert als Parameter festlegen. Habe ich, danke!
markthewizard1234
@ markthewizard1234 - Du könntest, aber das hatte ich nicht im Sinn: Stell dir vor, du hättest es function isEven(num) { return num%2===0 }. Sie können $.grep(someArray, isEven)nur die geraden Zahlen aus dem Array abrufen oder $.grep(someArray, isEven, true)das Gegenteil tun und die ungeraden Werte abrufen.
nnnnnn
63

ES2015

let someArray = [
               {name:"Kristian", lines:"2,5,10"},
               {name:"John", lines:"1,19,26,96"},
               {name:"Kristian", lines:"2,58,160"},
               {name:"Felix", lines:"1,19,26,96"}
            ];

someArray = someArray.filter(person => person.name != 'John');

Es wird John entfernen !

Saeid
quelle
4
Mann ... Ich komme aus Java und bin sehr verwirrt, dass solch eine grundlegende Sache das Filtern einer Liste erfordert ... wtf. Dies ist die genaueste Antwort auf die Frage von OP, die ich bisher gelesen habe.
Codepleb
Ja, das ist ein guter Ansatz. Es wird jedoch auch vor ES2015 (ES6) funktionieren. Die Filterfunktion ist seit Version 5.1 (2011) verfügbar. Ecma-international.org/ecma-262/5.1/#sec-15.4.4.20
user3777549
40

Sie könnten array.filter () verwenden.

z.B

        someArray = [{name:"Kristian", lines:"2,5,10"},
                     {name:"John", lines:"1,19,26,96"}];

        someArray = someArray.filter(function(returnableObjects){
               return returnableObjects.name !== 'Kristian';
        });

        //someArray will now be = [{name:"John", lines:"1,19,26,96"}];

Pfeilfunktionen:

someArray = someArray.filter(x => x.name !== 'Kristian')
daCoda
quelle
Eine andere Sache, die ich möchte, gibt es separate Schaltflächen für jedes Objekt im Array. Wenn ich dieses bestimmte Objekt in der Array-Schaltfläche löschen möchte, klicken Sie auf. wie es geht . Ich habe Winkel js ng-repeat verwendet, um Elemente zu generieren.
Kannst
daCoda was ist, wenn Sie zwei Bedingungen haben?
Malcolm Salvador
@MalcolmSalvador sagen Sie zum Beispiel, wenn Sie andere Bedingungen haben, können Sie dies wie unten schreiben und mit anderen && oder || fortfahren Betreiber nach Ihren Bedürfnissen. someArray = someArray.filter (function (returnableObjects) {return returnableObjects.name! == 'Kristian' && cond2Query.age> = 22;});
Biswajit Panday
18

Ich habe eine dynamische Funktion erstellt, die die Objekte Array, Key und value übernimmt und nach dem Entfernen des gewünschten Objekts dasselbe Array zurückgibt:

function removeFunction (myObjects,prop,valu)
        {
             return myObjects.filter(function (val) {
              return val[prop] !== valu;
          });

        }

Vollständiges Beispiel: DEMO

var obj = {
            "results": [
              {
                  "id": "460",
                  "name": "Widget 1",
                  "loc": "Shed"
              }, {
                  "id": "461",
                  "name": "Widget 2",
                  "loc": "Kitchen"
              }, {
                  "id": "462",
                  "name": "Widget 3",
                  "loc": "bath"
              }
            ]
            };


        function removeFunction (myObjects,prop,valu)
        {
             return myObjects.filter(function (val) {
              return val[prop] !== valu;
          });

        }


console.log(removeFunction(obj.results,"id","460"));
Bishoy Hanna
quelle
15

Dies ist eine Funktion, die für mich funktioniert:

function removeFromArray(array, value) {
    var idx = array.indexOf(value);
    if (idx !== -1) {
        array.splice(idx, 1);
    }
    return array;
}
ggmendez
quelle
Eine andere Sache, die ich möchte, gibt es separate Schaltflächen für jedes Objekt im Array. Wenn ich dieses bestimmte Objekt in der Array-Schaltfläche löschen möchte, klicken Sie auf. wie es geht . Ich habe Winkel js ng-repeat verwendet, um Elemente zu generieren.
Kannst
12

Sie können auch versuchen, so etwas zu tun:

var myArray = [{'name': 'test'}, {'name':'test2'}];
var myObject = {'name': 'test'};
myArray.splice(myArray.indexOf(myObject),1);
Mikebarson
quelle
11
someArray = jQuery.grep(someArray , function (value) {
        return value.name != 'Kristian';
});
Andre Morata
quelle
10

Verwenden Sie die Spleißfunktion für Arrays. Geben Sie die Position des Startelements und die Länge der Teilsequenz an, die Sie entfernen möchten.

someArray.splice(pos, 1);
gabitzisch
quelle
8

Stimmen Sie für den UndercoreJS für die einfache Arbeit mit Arrays.

Die Funktion _.without () hilft beim Entfernen eines Elements:

 _.without([1, 2, 1, 0, 3, 1, 4], 0, 1);
    => [2, 3, 4]
JuliaCesar
quelle
Die beste Lösung. Funktioniert mit Objektarrays.
Azee
4

Mit ES 6 Pfeilfunktion

let someArray = [
                 {name:"Kristian", lines:"2,5,10"},
                 {name:"John", lines:"1,19,26,96"}
                ];
let arrayToRemove={name:"Kristian", lines:"2,5,10"};
someArray=someArray.filter((e)=>e.name !=arrayToRemove.name && e.lines!= arrayToRemove.lines)
Siddhartha
quelle
3

Die einfachste Lösung wäre, eine Karte zu erstellen, in der die Indizes für jedes Objekt nach Namen wie folgt gespeichert werden:

//adding to array
var newPerson = {name:"Kristian", lines:"2,5,10"}
someMap[ newPerson.name ] = someArray.length;
someArray.push( newPerson );

//deleting from the array
var index = someMap[ 'Kristian' ];
someArray.splice( index, 1 );
Creynders
quelle
Ich mag diese Idee, muss aber auch fragen, wo die Speicherbeschränkungen für eine solche Idee liegen, wenn Indizes hinzugefügt werden. Ich habe ein Array, das ich auf 2 verschiedene Felder im Objekt indizieren möchte, also hätte ich zusätzlich zum ursprünglichen Quellarray 2 Karten. Ist dies ein geringer Preis für die Suchgeschwindigkeit oder gibt es eine Lösung, die mit Speicher effizienter ist?
Brad G.
3

Obwohl dies für diese Situation wahrscheinlich nicht angemessen ist, habe ich neulich herausgefunden, dass Sie das deleteSchlüsselwort auch verwenden können , um ein Element aus einem Array zu entfernen, wenn Sie die Größe des Arrays nicht ändern müssen, z

var myArray = [1,2,3];

delete myArray[1];

console.log(myArray[1]); //undefined

console.log(myArray.length); //3 - doesn't actually shrink the array down
Dougajmcdonald
quelle
3

Diese Antwort

for (var i =0; i < someArray.length; i++)
   if (someArray[i].name === "Kristian") {
      someArray.splice(i,1);
   }

funktioniert nicht für mehrere Datensätze, die die Bedingung erfüllen. Wenn Sie zwei solcher aufeinanderfolgenden Datensätze haben, wird nur der erste entfernt und der andere übersprungen. Sie müssen verwenden:

for (var i = someArray.length - 1; i>= 0; i--)
   ...

stattdessen .

JarmoP
quelle
2

Es scheint einen Fehler in Ihrer Array-Syntax zu geben. Unter der Annahme, dass Sie ein Array im Gegensatz zu einem Objekt meinen, ist Array.splice hier Ihr Freund:

someArray = [{name:"Kristian", lines:"2,5,10"}, {name:"John", lines:"1,19,26,96"}];
someArray.splice(1,1)
Simon Scarfe
quelle
2

Sie können auch die Kartenfunktion verwenden.

someArray = [{name:"Kristian", lines:"2,5,10"},{name:"John",lines:"1,19,26,96"}];
newArray=[];
someArray.map(function(obj, index){
    if(obj.name !== "Kristian"){
       newArray.push(obj);
    }
});
someArray = newArray;
console.log(someArray);
Solanki ...
quelle
1
Aber wenn Sie das Array durchlaufen möchten, ist es nicht besser, forEach zu verwenden?
corse32
2

Sie könnten auch verwenden some:

someArray = [{name:"Kristian", lines:"2,5,10"},
             {name:"John", lines:"1,19,26,96"}];

someArray.some(item => { 
    if(item.name === "Kristian") // Case sensitive, will only remove first instance
        someArray.splice(someArray.indexOf(item),1) 
})
Artur Grigio
quelle
2

Das benutze ich.

Array.prototype.delete = function(pos){
    this[pos] = undefined;
    var len = this.length - 1;
    for(var a = pos;a < this.length - 1;a++){
      this[a] = this[a+1];
    }
    this.pop();
  }

Dann ist es so einfach wie zu sagen

var myArray = [1,2,3,4,5,6,7,8,9];
myArray.delete(3);

Ersetzen Sie eine beliebige Zahl anstelle von drei. Nach der erwarteten Ausgabe sollte sein:

console.log(myArray); //Expected output 1,2,3,5,6,7,8,9
Matthias S.
quelle
2

Wenn Sie alle Vorkommen eines bestimmten Objekts entfernen möchten (basierend auf einer bestimmten Bedingung), verwenden Sie die Javascript-Spleißmethode in einer for-Schleife.

Da das Entfernen eines Objekts die Array-Länge beeinflussen würde, müssen Sie den Zähler um einen Schritt dekrementieren, damit die Längenprüfung erhalten bleibt.

var objArr=[{Name:"Alex", Age:62},
  {Name:"Robert", Age:18},
  {Name:"Prince", Age:28},
  {Name:"Cesar", Age:38},
  {Name:"Sam", Age:42},
  {Name:"David", Age:52}
];

for(var i = 0;i < objArr.length; i ++)
{
  if(objArr[i].Age > 20)
  {
    objArr.splice(i, 1);
    i--;  //re-adjust the counter.
  }
}

Das obige Codefragment entfernt alle Objekte mit einem Alter von mehr als 20 Jahren.

Obaid
quelle
1

Spleiß (i, 1), wobei i der inkrementelle Index des Arrays ist, entfernt das Objekt. Denken Sie jedoch daran, dass Spleiß auch die Array-Länge zurücksetzt. Achten Sie daher auf "undefiniert". Wenn Sie in Ihrem Beispiel 'Kristian' entfernen, ist i bei der nächsten Ausführung innerhalb der Schleife 2, aber someArray hat eine Länge von 1. Wenn Sie also versuchen, "John" zu entfernen, wird ein "undefinierter" Fehler angezeigt . Eine Lösung für dieses, wenn auch nicht elegante Problem besteht darin, einen separaten Zähler zu haben, um den Index des zu entfernenden Elements zu verfolgen.

Maksood
quelle
1

Gibt nur Objekte aus dem Array zurück, deren Eigenschaft namenicht "Kristian" ist.

var noKristianArray = $.grep(someArray, function (el) { return el.name!= "Kristian"; });


Demo:

 var someArray = [
                {name:"Kristian", lines:"2,5,10"},
                {name:"John", lines:"1,19,26,96"},
                {name:"Kristian", lines:"2,58,160"},
                {name:"Felix", lines:"1,19,26,96"}
                ];
			 
var noKristianArray = $.grep(someArray, function (el) { return el.name!= "Kristian"; });

console.log(noKristianArray);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Legenden
quelle
0

Diese Konzepte verwenden Kendo Grid

var grid = $("#addNewAllergies").data("kendoGrid");

var selectedItem = SelectedCheckBoxList;

for (var i = 0; i < selectedItem.length; i++) {
    if(selectedItem[i].boolKendoValue==true)
    {
        selectedItem.length= 0;
    }
}
Siva Ragu
quelle
0

Ich denke, die Antworten sind sehr verzweigt und verknotet.

Mit dem folgenden Pfad können Sie ein Array-Objekt entfernen, das dem im modernen JavaScript-Jargon angegebenen Objekt entspricht.


coordinates = [
    { lat: 36.779098444109145, lng: 34.57202827508546 },
    { lat: 36.778754712956506, lng: 34.56898128564454 },
    { lat: 36.777414146732426, lng: 34.57179224069215 }
];

coordinate = { lat: 36.779098444109145, lng: 34.57202827508546 };

removeCoordinate(coordinate: object) {
  const found = this.coordinates.find((obj) => obj === obj);
  if (found) {
    this.coordinates.splice(found, 1);
  }
}

this.removeCoordinate(coordinate);
Umut Yerebakmaz
quelle
-2

Wenn Sie auf ein Objekt eines Arrays zugreifen und es entfernen möchten, können Sie einfach Folgendes versuchen.

// inside some function

let someArray = [ {"ColumnName" : "a", "PropertySerno" : 100005,"UpdateType" : 1},
                  {"ColumnName" : "b", "PropertySerno" : 100202,"UpdateType" : 1,
        "ShowRemoveButton" : true} ];
        
        for (let item of someArray) {
          delete item.ShowRemoveButton;
        }
        console.log(item.outputMappingData.Data);
        
//output will be like that = [ {"ColumnName" : "a", "PropertySerno" : 100005,"UpdateType" : 1},
//                             {"ColumnName" : "b", "PropertySerno" : 100202,"UpdateType" : 1 }];
        

ismailuztemur
quelle