web-dev-qa-db-fra.com

Manière propre de supprimer l'élément du tableau javascript (avec jQuery, coffeescript)

Il y a beaucoup de questions à ce sujet, notamment: la version jQuery du tableau contient , ne solution avec la méthode d'épissage et bien d'autres. Cependant, ils semblent tous compliqués et ennuyeux.

Avec les pouvoirs combinés de javascript, jQuery et coffeescript, quelle est la façon la plus propre de supprimer un élément d'un tableau javascript? Nous ne connaissons pas l'indice à l'avance. Dans du code:

a = [4,8,2,3]
a.remove(8)     # a is now [4,2,3]

À défaut d'une bonne méthode intégrée, quelle est une manière propre d'étendre les tableaux javascript pour prendre en charge une telle méthode? Si cela aide, j'utilise vraiment des tableaux comme ensembles. Les solutions fonctionneront idéalement bien en coffeescript avec le support jQuery. En outre, je ne me souciais pas de la vitesse, mais privilégiez plutôt un code clair et simple.

javascriptjquerycoffeescript
59
Peter

CoffeeScript:

Array::remove = (e) -> @[t..t] = [] if (t = @indexOf(e)) > -1

Ce qui épile simplement l'élément à la position t, l'index où e a été trouvé (s'il a été effectivement trouvé t > -1). Coffeescript se traduit par:

Array.prototype.remove = function(e) {
    var t, _ref;
    if ((t = this.indexOf(e)) > -1) {
        return ([].splice.apply(this, [t, t - t + 1].concat(_ref = [])), _ref);
    }
};

Et si vous souhaitez supprimer tous les éléments correspondants et renvoyer un nouveau tableau, en utilisant CoffeeScript et jQuery:

Array::remove = (v) -> $.grep @,(e)->e!=v

ce qui se traduit par:

Array.prototype.remove = function(v) {
    return $.grep(this, function(e) {
        return e !== v;
    });
};

Ou faire la même chose sans grep de jQuery:

Array::filterOutValue = (v) -> x for x in @ when x!=v

ce qui se traduit par:

Array.prototype.filterOutValue = function(v) {
    var x, _i, _len, _results;
    _results = [];
    for (_i = 0, _len = this.length; _i < _len; _i++) {
        x = this[_i];
        if (x !== v) {
            _results.Push(x);
        }
    }
    return _results;
};
87
Amir

Utiliser Vanilla Javascript:

Array.prototype.remove = function(elem) {
    var match = -1;

    while( (match = this.indexOf(elem)) > -1 ) {
        this.splice(match, 1);
    }
};

var a = [4, 8, 2, 3];

a.remove(8);

Seulement jQuery:

jQuery.removeFromArray = function(value, arr) {
    return jQuery.grep(arr, function(elem, index) {
        return elem !== value;
    });
};

var a = [4, 8, 2, 3];

a = jQuery.removeFromArray(8, a);
27
jAndy

C'est vraiment facile avec jQuery:

var index = $.inArray("value", myArray);
if(index != -1)
{
  myArray.splice(index, 1);
}

Remarques:

splice renvoie les éléments qui ont été supprimés, donc ne faites pas myArray = myArray.splice(). myArray.splice(index,1) signifie "supprimer l'élément de tableau à l'index 'index' du tableau".

$.inArray Renvoie l'index dans le tableau de la valeur que vous recherchez, ou -1 si la valeur n'est pas dans le tableau.

14
adavea

Cela semble assez clair et compréhensible; contrairement à d'autres réponses, il prend en compte la possibilité qu'un élément apparaisse plus d'une fois.

Array.prototype.remove = function (value) {
    for (var i = 0; i < this.length; ) {
        if (this[i] === value) {
            this.splice(i, 1);
        } else {
           ++i;
        }
    }
}

Dans CoffeeScript:

Array::remove = (value) ->
    i = 0
    while i < @length
        if @[i] == value
            @splice i, 1
        else
            ++i
    return @
9
Domenic

si vous utilisez également la bibliothèque nderscore.js du créateur de CoffeeScript, voici une seule ligne qui fonctionnera bien:

a = _(a).reject (v)-> v is e

ou en js:

a = _(a).reject(function(v) { return v == e; });
4
georgedyer

Bien que vous demandiez une approche propre en utilisant Coffeescript ou jQuery, je trouve que l'approche la plus propre utilise la méthode javascript Vanilla filter :

array.filter(function (item) { return item !== match });

Il semble plus propre dans coffeescript, mais cela se traduit exactement par le même javascript, donc je ne le considère que comme une différence visuelle, et non comme une fonctionnalité avancée de coffeescript:

array.filter (item) -> item isnt match

Le filtre n'est pas pris en charge dans les navigateurs hérités, mais Mozilla fournit un polyfill qui respecte la norme ECMA. Je pense que c'est une approche parfaitement sûre car vous n'apportez que les anciens navigateurs aux normes modernes et vous n'inventez aucune nouvelle fonctionnalité dans votre polyfill.

Désolé si vous cherchiez spécifiquement une méthode jQuery ou Coffeescript uniquement, mais je pense que vous demandiez principalement une méthode de bibliothèque car vous ne connaissiez pas une méthode propre uniquement en Javascript.

Voilà, aucune bibliothèque n'est nécessaire!

4
TimE

Ceci est juste un léger changement en la solution géniale d'Amir :

Array::remove = (e) -> @splice(t,1)[0] if (t = @indexOf(e)) > -1

qui renvoie l'élément si la liste le contient, vous pouvez donc faire quelque chose comme:

do_something 100 if a.remove(100)

Le script de suppression de café se traduit par ce javascript:

Array.prototype.remove = function(e) {
  var t, _ref;
  if ((t = this.indexOf(e)) > -1) {
    return ([].splice.apply(this, [t, t - t + 1].concat(_ref = [])), _ref);
  }};
3
Durant Schoon

Vous pourriez simplement essayer l'utilitaire grep de jQuery:

a = [4,8,2,3]
$.grep(a,function(v){return v!=8;})

Il peut y avoir un problème de performances ici, car vous amenez techniquement la variable à référencer un tableau nouvea; vous ne modifiez pas vraiment l'original. En supposant que l'original n'est pas référencé ailleurs, le garbage collector devrait prendre ou cela assez rapidement. Cela n'a jamais été un problème pour moi, mais d'autres pourraient le savoir. À votre santé!

1
Mike Marcacci