Supprimer un élément du tableau à l'aide de UnderscoreJS


137

Dis que j'ai ce code

var arr = [{id: 1, nom: 'a'}, {id: 2, nom: 'b'}, {id: 3, nom: 'c'}];

et je veux supprimer l'élément avec id = 3 du tableau. Y a-t-il un moyen de faire cela sans épisser? Peut-être quelque chose en utilisant un trait de soulignement ou quelque chose comme ça?

Merci!


Si vous ne souhaitez pas créer un nouveau tableau, l'épissage est le seul choix. Je parie que le soulignement l'utilise aussi (en interne, si une telle méthode existe).
Felix Kling

6
Quel est le problème avec l'épissage?
Šime Vidas

Avez-vous vérifié la référence du trait de soulignement?
Šime Vidas

En utilisant simplement JavaScript, il s'agit d'une copie de supprimer des objets du tableau par propriété d'objet .
Felix Kling

5
bien n'est pas en double car il a le tag pour underscore.js
Garis M Suero

Réponses:


279

En utilisant simplement JavaScript, cela a déjà été répondu: supprimer les objets du tableau par propriété d'objet .

En utilisant underscore.js, vous pouvez combiner .findWhereavec .without:

var arr = [{
  id: 1,
  name: 'a'
}, {
  id: 2,
  name: 'b'
}, {
  id: 3,
  name: 'c'
}];

//substract third
arr = _.without(arr, _.findWhere(arr, {
  id: 3
}));
console.log(arr);
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

Cependant, puisque vous créez de toute façon un nouveau tableau dans ce cas, vous pouvez simplement utiliser _.filterou la Array.prototype.filterfonction native (comme indiqué dans l'autre question). Ensuite, vous n'effectueriez une itération sur le tableau qu'une fois au lieu de potentiellement deux fois comme ici.

Si vous souhaitez modifier le tableau sur place , vous devez utiliser .splice. Ceci est également montré dans l'autre question et le undescore ne semble pas fournir de fonction utile pour cela.


1
Oui, cela fonctionne parfaitement, j'ai parcouru la documentation des traits de soulignement mais je n'ai pas très bien compris comment le retirer sans. Je vous remercie!
climboid

10
_.Reject ou _.filter () ne seraient-ils pas beaucoup plus efficaces ici? Vous vous retrouveriez avec deux itérations de la liste juste pour retirer un élément.
Rick Strahl

1
C'est peut-être un doublon, mais c'est la meilleure réponse.
Michael J. Calkins

2
@RickStrahl Vous avez raison. _.rejectressemble à une meilleure sélection ici.
Tarik

1
@lukaserat pour faire apparaître le dernier élément, utilisez arr.pop()...
Emile Bergeron

96

Vous pouvez utiliser Underscore .filter

    var arr = [{
      id: 1,
      name: 'a'
    }, {
      id: 2,
      name: 'b'
    }, {
      id: 3,
      name: 'c'
    }];

    var filtered = _(arr).filter(function(item) {
         return item.id !== 3
    });

Peut aussi s'écrire:

var filtered = arr.filter(function(item) {
    return item.id !== 3
});

var filtered = _.filter(arr, function(item) {
    return item.id !== 3
});

Vérifier Fiddle

Vous pouvez aussi utiliser .reject


Je pense que vous vouliez dire: var filtered = _.filter (arr, function (item) {return item.id! == 3});
tbh__

2
@tbh__ _()créera un wrapper autour de la collection qui vous permettra d'invoquer des méthodes de soulignement.
Sushanth -

J'utilise le soulignement depuis des années, je ne l'ai jamais su. Merci
tbh__


16

Underscore a une méthode _without () parfaite pour supprimer un élément d'un tableau, surtout si vous avez l'objet à supprimer.

Renvoie une copie du tableau avec toutes les instances des valeurs supprimées.

_.without(["bob", "sam", "fred"], "sam");

=> ["bob", "fred"]

Fonctionne également avec des objets plus complexes.

var bob = { Name: "Bob", Age: 35 };
var sam = { Name: "Sam", Age: 19 };
var fred = { Name: "Fred", Age: 50 };

var people = [bob, sam, fred]

_.without(people, sam);

=> [{ Name: "Bob", Age: 35 }, { Name: "Fred", Age: 50 }];

Si vous n'avez pas l'élément à supprimer, juste une propriété de celui-ci, vous pouvez utiliser _.findWhereet ensuite _.without.


2
Remarque: cela ne fonctionne que parce que vous passez l'objet sam à sans. Si vous passez plutôt { Name: "Sam", Age: 19 }à sans, plutôt qu'à la variable sam, cela ne fonctionne plus. Fiddle
Adam

5

Veuillez faire preuve de prudence si vous filtrez des chaînes et recherchez des filtres insensibles à la casse. _.without () est sensible à la casse. Vous pouvez également utiliser _.reject () comme indiqué ci-dessous.

var arr = ["test","test1","test2"];

var filtered = _.filter(arr, function(arrItem) {
    return arrItem.toLowerCase() !== "TEST".toLowerCase();
});
console.log(filtered);
// ["test1", "test2"]

var filtered1 = _.without(arr,"TEST");
console.log(filtered1);
// ["test", "test1", "test2"]

var filtered2 = _.reject(arr, function(arrItem){ 
    return arrItem.toLowerCase() === "TEST".toLowerCase();
});
console.log(filtered2);
// ["test1", "test2"]

4

D'autres réponses créent une nouvelle copie du tableau, si vous souhaitez modifier le tableau en place, vous pouvez utiliser:

arr.splice(_.findIndex(arr, { id: 3 }), 1);

Mais cela suppose que l'élément sera toujours trouvé à l'intérieur du tableau (car s'il n'est pas trouvé, il supprimera toujours le dernier élément). Pour être sûr, vous pouvez utiliser:

var index = _.findIndex(arr, { id: 3 });
if (index > -1) {
    arr.splice(index, 1);
}

2

ou d'une autre manière pratique:

_.omit(arr, _.findWhere(arr, {id: 3}));

mes 2 cents


1
omit fonctionne objectet renvoie un fichier object. donc pas très bon pour travailler avec Arraysoù nous pourrions nous attendre à obtenir un arrayretour après la suppression d'un élément.
ScrapCode

1
Donc, _ . Sans le sur que vous regardez: _.without([1, 2, 1, 0, 3, 1, 4], 0, 1); => [2, 3, 4]
Nadeem

2

L'utilisation peut utiliser la méthode de JavaScriptArray#filter simple comme ceci:

var arr = [{id:1,name:'a'},{id:2,name:'b'},{id:3,name:'c'}];

var filteredArr = arr.filter(obj => obj.id != 3);

console.log(filteredArr);

Ou, utilisez Array#reduceet des Array#concatméthodes comme celle-ci:

var arr = [{id:1,name:'a'},{id:2,name:'b'},{id:3,name:'c'}];

var reducedArr = arr.reduce((accumulator, currObj) => {
  return (currObj.id != 3) ? accumulator.concat(currObj) : accumulator;
}, []);

console.log(reducedArr);

REMARQUE:

  • Ces deux éléments sont une approche fonctionnelle pure ( c'est-à-dire qu'ils ne modifient pas le tableau existant).
  • Non, une bibliothèque externe est requise dans cette approche (Vanilla JavaScript suffit).

0

J'avais l'habitude d'essayer cette méthode

_.filter(data, function(d) { return d.name != 'a' });

Il pourrait y avoir de meilleures méthodes comme les solutions ci-dessus fournies par les utilisateurs


0

En utilisant underscore.js

var arr = [{id:1,name:'a'},{id:2,name:'b'},{id:3,name:'c'}];

var resultArr = _.reject(arr,{id:3});

console.log(resultArr);

Le résultat sera: [{id:1name:'a'},{id:2,name:'c'}]


-1

Vous pouvez utiliser la méthode de rejet de Underscore, ci-dessous retournera un nouveau tableau qui n'aura pas de tableau avec une correspondance particulière

arr = _.reject(arr, function(objArr){ return objArr.id == 3; });
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.