Object uit array verwijderen met JavaScript

Hoe kan ik een object uit een array verwijderen?
Ik wil het object met de naam Kristianverwijderen uit someArray. Bijvoorbeeld:

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

Ik wil het volgende bereiken:

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

Antwoord 1, autoriteit 100%

U kunt verschillende methoden gebruiken om item(s) uit een array te verwijderen:

//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, someArray.length - 1); // last element removed
//6
someArray.length = someArray.length - 1; // last element removed

Als je een element op positie xwilt verwijderen, gebruik dan:

someArray.splice(x, 1);

Of

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

Reageer op de opmerking van @chill182: je kunt een of meer elementen uit een array verwijderen met behulp van Array.filter, of Array.splicegecombineerd met Array.findIndex(zie MDN), bijv.

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

Antwoord 2, autoriteit 22%

De schone oplossing zou zijn om Array.filter:

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

Het probleem hiermee is dat het niet werktop IE < 9. U kunt echter code opnemen uit een Javascript-bibliotheek (bijv. underscore.js) die dit voor elke browser.


Antwoord 3, autoriteit 16%

Ik raad aan lodash.js of sugar.jste gebruiken voor veelvoorkomende taken zoals deze:

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

in de meeste projecten is het heel handig om een set hulpmethoden te hebben die door bibliotheken als deze wordt geleverd.


Antwoord 4, autoriteit 10%

Wat dacht je hiervan?

$.each(someArray, function(i){
    if(someArray[i].name === 'Kristian') {
        someArray.splice(i,1);
        return false;
    }
});

Antwoord 5, autoriteit 9%

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

Het zal Johnverwijderen!


Antwoord 6, autoriteit 8%

Uw ‘array’ zoals weergegeven is een ongeldige JavaScript-syntaxis. accolades {}zijn voor objecten met eigenschapnaam/waarde-paren, maar vierkante haken []zijn voor arrays – zoals zo:

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

In dat geval kunt u de .splice()methodeom een item te verwijderen. Om het eerste item (index 0) te verwijderen, zeg je:

someArray.splice(0,1);
// someArray = [{name:"John", lines:"1,19,26,96"}];

Als je de index niet kent, maar door de array wilt zoeken om het item met de naam “Kristian” te vinden om te verwijderen, kun je dit doen:

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

EDIT: ik zie net dat uw vraag is getagd met “jQuery”, dus u kunt de $.grep()methode:

someArray = $.grep(someArray,
                   function(o,i) { return o.name === "Kristian"; },
                   true);

Antwoord 7, autoriteit 6%

Je zou array.filter() kunnen gebruiken.

bijv.

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

Pijlfuncties:

someArray = someArray.filter(x => x.name !== 'Kristian')

Antwoord 8, autoriteit 2%

Ik heb een dynamische functie gemaakt die de objecten Array, Key en value neemt en dezelfde array retourneert na het verwijderen van het gewenste object:

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

Volledig voorbeeld: 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"));

Antwoord 9, autoriteit 2%

Dit is een functie die voor mij werkt:

function removeFromArray(array, value) {
    var idx = array.indexOf(value);
    if (idx !== -1) {
        array.splice(idx, 1);
    }
    return array;
}

Antwoord 10

Je zou ook zoiets als dit kunnen proberen:

var myArray = [{'name': 'test'}, {'name':'test2'}];
var myObject = {'name': 'test'};
myArray.splice(myArray.indexOf(myObject),1);

Antwoord 11

someArray = jQuery.grep(someArray , function (value) {
        return value.name != 'Kristian';
});

Antwoord 12

Gebruik de splice-functie op arrays. Specificeer de positie van het startelement en de lengte van de deelreeks die u wilt verwijderen.

someArray.splice(pos, 1);

Antwoord 13

Stem op de UndercoreJSvoor eenvoudig werken met arrays.

_.without()functie helpt bij het verwijderen van een element:

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

Antwoord 14

Prestaties

Vandaag 2021.01.27 voer ik tests uit op MacOs HighSierra 10.13.6 op Chrome v88, Safari v13.1.2 en Firefox v84 voor gekozen oplossingen.

Resultaten

Voor alle browsers:

  • snelste/snelste oplossingen als element niet bestaat: A en B
  • snelste/snelste oplossingen voor grote arrays: C
  • snelste/snelste oplossingen voor grote arrays wanneer element bestaat: H
  • vrij trage oplossingen voor kleine arrays: F en G
  • vrij trage oplossingen voor grote arrays: D, E en F

voer hier de afbeeldingsbeschrijving in

Details

Ik voer 4 testgevallen uit:

  • kleine array (10 elementen) en element bestaat – u kunt het HIER
  • uitvoeren

  • kleine array (10 elementen) en element bestaat NIET – u kunt het HIER
  • uitvoeren

  • grote array (miljoen elementen) en element bestaat – u kunt het HIER
  • uitvoeren

  • grote array (miljoen elementen) en element bestaat NIET – u kunt het HIER
  • uitvoeren

Het onderstaande fragment geeft de verschillen tussen oplossingen weer
A
B
C
D
E
F
G
H
Ik


Antwoord 15

Met ES 6 pijlfunctie

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)

Antwoord 16

Hier is een voorbeeld met kaart en verbinding

const arrayObject = [
  { name: "name1", value: "value1" },
  { name: "name2", value: "value2" },
  { name: "name3", value: "value3" },
];
let index = arrayObject.map((item) => item.name).indexOf("name1");
if (index > -1) {
  arrayObject.splice(index, 1);
  console.log("Result", arrayObject);
}

Antwoord 17

Hoewel dit waarschijnlijk niet zo geschikt is voor deze situatie, kwam ik er onlangs achter dat je ook het sleutelwoord deletekunt gebruiken om een item uit een array te verwijderen als je de grootte van de array bijv.

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

Antwoord 18

De eenvoudigste oplossing zou zijn om een kaart te maken die de indexen voor elk object op naam opslaat, zoals deze:

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

Antwoord 19

U kunt ook de functie kaartgebruiken.

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

Antwoord 20

Als je alle exemplaren van een bepaald object wilt verwijderen (op basis van een bepaalde voorwaarde), gebruik dan de javascript splice-methode binnen een for the lus.

Aangezien het verwijderen van een object de lengte van de array zou beïnvloeden, moet u ervoor zorgen dat u de teller met één stap verlaagt, zodat de lengtecontrole intact blijft.

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

Het bovenstaande codefragment verwijdert alle objecten met een leeftijd ouder dan 20.


Antwoord 21

Dit antwoord

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

werkt niet voor meerdere records die aan de voorwaarde voldoen. Als u twee van dergelijke opeenvolgende records heeft, wordt alleen de eerste verwijderd en wordt de andere overgeslagen. Je moet gebruiken:

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

in plaats daarvan .


Antwoord 22

Er lijkt een fout te zitten in de syntaxis van uw array, dus aangenomen dat u een array bedoelt in plaats van een object, Array.spliceis je vriend hier:

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

Antwoord 23

Gebruik de splice()-functie van javascript.

Dit kan helpen: http://www.w3schools.com/jsref/jsref_splice.asp


Antwoord 24

U kunt ook 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) 
})

Antwoord 25

Dit is wat ik gebruik.

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

Dan is het zo simpel als zeggen

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

Vervang een willekeurig getal in plaats van drie. Nadat de verwachte output zou moeten zijn:

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

Antwoord 26

Ik denk dat de antwoorden erg vertakt en geknoopt zijn.

U kunt het volgende pad gebruiken om een array-object te verwijderen dat overeenkomt met het object in het moderne JavaScript-jargon.


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: Coordinate): Coordinate {
    const found = this.coordinates.find((coordinate) => coordinate == coordinate);
    if (found) {
      this.coordinates.splice(found, 1);
    }
    return coordinate;
  }

Antwoord 27

splice(i, 1) waarbij i de incrementele index van de array is, zal het object verwijderen.
Maar onthoud dat splice ook de array-lengte reset, dus pas op voor ‘undefined’. Gebruik uw voorbeeld, als u ‘Kristian’ verwijdert, dan zal ik in de volgende uitvoering binnen de lus 2 zijn, maar someArray zal een lengte van 1 hebben, dus als u “John” probeert te verwijderen, krijgt u een “undefined” -fout . Een oplossing hiervoor, hoewel niet elegant, is om een aparte teller te hebben om de index van het te verwijderen element bij te houden.


Antwoord 28

Retourneert alleen objecten uit de array waarvan de eigenschap nameniet “Kristian” is

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>

Antwoord 29

Dit concept met 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;
    }
}

Antwoord 30

Als u geen eigenschappen heeft voor de objecten in de array die u kent (of die misschien uniek zijn), maar u heeft wel een verwijzing naar het object dat u wilt verwijderen, dan kunt u doen wat er in de unregisterObjectmethode hieronder:

let registeredObjects = [];
function registerObject(someObject) { registeredObjects.push(someObject); }
function unregisterObject(someObject) { registeredObjects = registeredObjects.filter(obj => obj !== someObject); }
let myObject1 = {hidden: "someValue1"}; // Let's pretend we don't know the hidden attribute
let myObject2 = {hidden: "someValue2"};
registerObject(myObject1);
registerObject(myObject2);
console.log(`There are ${registeredObjects.length} objects registered. They are: ${JSON.stringify(registeredObjects)}`);
unregisterObject(myObject1);
console.log(`There are ${registeredObjects.length} objects registered. They are: ${JSON.stringify(registeredObjects)}`);

Other episodes