supprimer des objets du tableau par propriété d'objet

Question

var listToDelete = ['abc', 'efg'];

var arrayOfObjects = [{id:'abc',name:'oh'}, // delete me
                      {id:'efg',name:'em'}, // delete me
                      {id:'hij',name:'ge'}] // all that should remain

Comment supprimer un objet du tableau en faisant correspondre la propriété de l'objet ?

Uniquement du JavaScript natif, s'il vous plaît.

J'ai des difficultés à utiliser l'épissage car la longueur diminue avec chaque délétion. L'utilisation du clone et de l'épissage sur l'index original vous laisse toujours avec le problème de la diminution de la longueur.

Answer 1

Je suppose que vous avez utilisé splice quelque chose comme ça ?

for (var i = 0; i < arrayOfObjects.length; i++) {
    var obj = arrayOfObjects[i];

    if (listToDelete.indexOf(obj.id) !== -1) {
        arrayOfObjects.splice(i, 1);
    }
}

Tout ce que vous devez faire pour corriger le bug est de décrémenter i pour la prochaine fois, alors (et le retour en arrière est aussi une option) :

for (var i = 0; i < arrayOfObjects.length; i++) {
    var obj = arrayOfObjects[i];

    if (listToDelete.indexOf(obj.id) !== -1) {
        arrayOfObjects.splice(i, 1);
        i--;
    }
}

Pour éviter les suppressions en temps linéaire, vous pouvez écrire les éléments du tableau que vous voulez garder sur le tableau :

var end = 0;

for (var i = 0; i < arrayOfObjects.length; i++) {
    var obj = arrayOfObjects[i];

    if (listToDelete.indexOf(obj.id) === -1) {
        arrayOfObjects[end++] = obj;
    }
}

arrayOfObjects.length = end;

et pour éviter les recherches en temps linéaire dans un runtime moderne, vous pouvez utiliser un ensemble de hachage :

const setToDelete = new Set(listToDelete);
let end = 0;

for (let i = 0; i < arrayOfObjects.length; i++) {
    const obj = arrayOfObjects[i];

    if (setToDelete.has(obj.id)) {
        arrayOfObjects[end++] = obj;
    }
}

arrayOfObjects.length = end;

qui peut être emballé dans une belle fonction :

const filterInPlace = (array, predicate) => {
    let end = 0;

    for (let i = 0; i < array.length; i++) {
        const obj = array[i];

        if (predicate(obj)) {
            array[end++] = obj;
        }
    }

    array.length = end;
};

const toDelete = new Set(['abc', 'efg']);

const arrayOfObjects = [{id: 'abc', name: 'oh'},
                        {id: 'efg', name: 'em'},
                        {id: 'hij', name: 'ge'}];

filterInPlace(arrayOfObjects, obj => !toDelete.has(obj.id));
console.log(arrayOfObjects);

Si vous n'avez pas besoin de le faire sur place, c'est Array#filter :

const toDelete = new Set(['abc', 'efg']);
const newArray = arrayOfObjects.filter(obj => !toDelete.has(obj.id));

Answer 2

Vous pouvez supprimer un élément par l'une de ses propriétés sans utiliser de librairie tierce comme celle-ci :

var removeIndex = array.map(item => item.id).indexOf("abc");

~removeIndex && array.splice(removeIndex, 1);

Answer 3

Avec lodash/underscore :

Si vous voulez modifier le tableau existant lui-même, alors nous devons utiliser épissure . Voici la méthode un peu plus efficace/lisible utilisant findWhere de l'underscore/lodash :

var items= [{id:'abc',name:'oh'}, // delete me
                  {id:'efg',name:'em'},
                  {id:'hij',name:'ge'}];

items.splice(_.indexOf(items, _.findWhere(items, { id : "abc"})), 1);

Avec ES5 ou plus

( sans lodash/underscore )

À partir de ES5, nous avons findIndex sur un tableau, ce qui est plus facile sans lodash/underscore.

items.splice(items.findIndex(function(i){
    return i.id === "abc";
}), 1);

(ES5 est supporté dans presque tous les navigateurs mordus)

À propos de findIndex et son Compatibilité des navigateurs

Answer 4

Pour supprimer un objet par son identifiant dans le tableau donné ;

const hero = [{'id' : 1, 'name' : 'hero1'}, {'id': 2, 'name' : 'hero2'}];
//remove hero1
const updatedHero = hero.filter(item => item.id !== 1);

Answer 5

FindIndex fonctionne pour les navigateurs modernes :

var myArr = [{id:'a'},{id:'myid'},{id:'c'}];
var index = myArr.findIndex(function(o){
  return o.id === 'myid';
})
if (index !== -1) myArr.splice(index, 1);