web-dev-qa-db-fra.com

Comment supprimer un élément d'un tableau par valeur?

Existe-t-il une méthode pour supprimer un élément d'un tableau JavaScript?

Étant donné un tableau:

var ary = ['three', 'seven', 'eleven'];

Je voudrais faire quelque chose comme:

removeItem('seven', ary);

J'ai regardé dans splice() mais cela ne supprime que par le numéro de position, alors que j'ai besoin de quelque chose pour supprimer un élément par sa valeur.

717
MacMac

Cela peut être une fonction globale ou une méthode d'objet personnalisé, si vous n'êtes pas autorisé à ajouter des prototypes natifs. Il supprime tous les éléments du tableau qui correspondent à l'un des arguments.

Array.prototype.remove = function() {
    var what, a = arguments, L = a.length, ax;
    while (L && this.length) {
        what = a[--L];
        while ((ax = this.indexOf(what)) !== -1) {
            this.splice(ax, 1);
        }
    }
    return this;
};

var ary = ['three', 'seven', 'eleven'];

ary.remove('seven');

/*  returned value: (Array)
three,eleven
*/

Pour en faire un global-

function removeA(arr) {
    var what, a = arguments, L = a.length, ax;
    while (L > 1 && arr.length) {
        what = a[--L];
        while ((ax= arr.indexOf(what)) !== -1) {
            arr.splice(ax, 1);
        }
    }
    return arr;
}
var ary = ['three', 'seven', 'eleven'];
removeA(ary, 'seven');


/*  returned value: (Array)
three,eleven
*/

Et pour prendre soin de IE8 et ci-dessous

if(!Array.prototype.indexOf) {
    Array.prototype.indexOf = function(what, i) {
        i = i || 0;
        var L = this.length;
        while (i < L) {
            if(this[i] === what) return i;
            ++i;
        }
        return -1;
    };
}
419
kennebec

Vous pouvez utiliser la méthode indexOf comme ceci:

var index = array.indexOf(item);
if (index !== -1) array.splice(index, 1);

Note: Vous aurez besoin de le caler pour IE8 et inférieur

var array = [1,2,3,4]
var item = 3

var index = array.indexOf(item);
if (index !== -1) array.splice(index, 1);

console.log(array)

1270
SLaks

Un one-liner le fera,

var ary = ['three', 'seven', 'eleven'];

// Remove item 'seven' from array
var filteredAry = ary.filter(function(e) { return e !== 'seven' })
//=> ["three", "eleven"]

// In ECMA6 (arrow function syntax):
var filteredAry = ary.filter(e => e !== 'seven')

Cela utilise la fonction filter dans JS. Il est pris en charge dans IE9 et supérieur.

Ce qu'il fait (depuis le lien doc)

filter () appelle une fonction de rappel fournie une fois pour chaque élément d'un tableau et construit un nouveau tableau de toutes les valeurs pour lesquelles le rappel retourne une valeur qui est vraie. callback n'est appelé que pour les index du tableau auxquels des valeurs ont été assignées; il n'est pas appelé pour les index qui ont été supprimés ou auxquels aucune valeur n'a été attribuée. Les éléments de tableau qui ne passent pas le test de rappel sont simplement ignorés et ne sont pas inclus dans le nouveau tableau.

Donc, fondamentalement, c'est la même chose que toutes les autres solutions for (var key in ary) { ... }, sauf que la construction for in est supportée à partir de IE6.

Fondamentalement, le filtre est une méthode pratique qui semble beaucoup plus jolie (et peut être chaînée) par opposition à la construction for in (AFAIK).

302
John Williams

Vous pouvez utiliser underscore.js . Cela rend vraiment les choses simples.

Par exemple, avec ceci:

var result = _.without(['three','seven','eleven'], 'seven');

Et result sera ['three','eleven'].

Dans votre cas, le code que vous devrez écrire est le suivant:

ary = _.without(ary, 'seven')

Cela réduit le code que vous écrivez.

127
vatsal

Découvrez de cette façon:

for(var i in array){
    if(array[i]=='seven'){
        array.splice(i,1);
        break;
    }
}

et dans une fonction:

function removeItem(array, item){
    for(var i in array){
        if(array[i]==item){
            array.splice(i,1);
            break;
        }
    }
}

removeItem(array, 'seven');
49
gadlol

Voici une version qui utilise la fonction inArray de jQuery :

var index = $.inArray(item, array);
if (index != -1) {
    array.splice(index, 1);
}
33
CorayThan
var index = array.indexOf('item');

if(index!=-1){

   array.splice(index, 1);
}
27
Kld

Vous pouvez le faire avec ces deux manières:

var arr = ["1","2","3","4"] // we wanna delete number "3"

premier:

arr.indexOf('3') !== -1 && arr.splice(arr.indexOf('3'), 1)

deuxième (ES6):

arr = arr.filter(e => e !== '3')
26
AmerllicA

Ce que vous recherchez, c'est le filtre

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Cela vous permettra de faire ce qui suit:

var ary = ['three', 'seven', 'eleven'];
var aryWithoutSeven = ary.filter(function(value) { return value != 'seven' });
console.log(aryWithoutSeven); // returns ['three', 'eleven']

Cela a également été noté dans ce fil ailleurs: https://stackoverflow.com/a/20827100/293492

15
Lotus

Comme il n’y en a pas une jolie, voici une fonction ES6 simple et réutilisable.

const removeArrayItem = (arr, itemToRemove) => {
  return arr.filter(item => item !== itemToRemove)
}

Usage:

const items = ['orange', 'purple', 'orange', 'brown', 'red', 'orange']
removeArrayItem(items, 'orange')
10
Shakespeare

Si vous avez des valeurs uniques dans votre tableau et que l'ordre n'a pas d'importance, vous pouvez utiliser Set , et il a delete :

var mySet = new Set(['foo']);
mySet.delete('foo'); // Returns true.  Successfully removed.
mySet.has('foo');    // Returns false. The "foo" element is no longer present.
9
greene

ES6 façon.

const commentsWithoutDeletedArray = commentsArray.filter(comment => comment.Id !== commentId);
7
Oliver Dixon

Simplement

var ary = ['three', 'seven', 'eleven'];
var index = ary.indexOf('seven'); // get index if value found otherwise -1

 if (index > -1) { //if found
   ary.splice(index, 1);
 }
7
Matee Gojra

Supprimer tous les éléments correspondants du tableau (plutôt que le premier, ce qui semble être la réponse la plus courante ici):

while ($.inArray(item, array) > -1) {
    array.splice( $.inArray(item, array), 1 );
}

J'ai utilisé jQuery pour soulever des objets lourds, mais vous avez une idée si vous voulez devenir natif.

7
Jason

Vraiment, je ne vois pas pourquoi cela ne peut pas être résolu avec

arr = arr.filter(value => value !== 'seven');

Ou peut-être que vous voulez utiliser Vanilla JS

arr = arr.filter(function(value) { return value !== 'seven' });
7
rbenvenuto

une solution très propre fonctionnant dans tous les navigateurs et sans aucun framework consiste à affecter un nouveau tableau à tout simplement le renvoyer sans l'élément à supprimer:

/**
 * @param {Array} array the original array with all items
 * @param {any} item the time you want to remove
 * @returns {Array} a new Array without the item
 */
var removeItemFromArray = function(array, item){
  /* assign a empty array */
  var tmp = [];
  /* loop over all array items */
  for(var index in array){
    if(array[index] !== item){
      /* Push to temporary array if not like item */
      tmp.Push(array[index]);
    }
  }
  /* return the temporary array */
  return tmp;
}
6
mtizziani

Vous pouvez y parvenir en utilisant Lodash_.remove function.

var array = ['three', 'seven', 'eleven'];
var evens = _.remove(array, function(e) {
  return e !== 'seven';
});

console.log(evens);
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>

4
Yi-Ting Liu

indexOf est une option, mais son implémentation consiste essentiellement à rechercher la valeur dans l'ensemble du tableau. Le temps d'exécution augmente donc avec la taille du tableau. (c'est donc dans tous les navigateurs, je suppose, je n'ai vérifié que Firefox).

Je n'ai pas d'IE6 à vérifier, mais je dirais que c'est un pari sûr que vous pouvez vérifier au moins un million d'éléments de tableau par seconde de cette façon sur presque n'importe quel ordinateur client. Si [taille du tableau] * [recherches par seconde] peut dépasser un million, vous devez envisager une implémentation différente.

En gros, vous pouvez utiliser un objet pour créer un index pour votre tableau, comme ceci:

var index={'three':0, 'seven':1, 'eleven':2};

Tout environnement JavaScript sain créera un index interrogeable pour ces objets afin que vous puissiez rapidement traduire une clé en une valeur, quel que soit le nombre de propriétés de l'objet.

Ceci est juste la méthode de base, en fonction de vos besoins, vous pouvez combiner plusieurs objets et/ou matrices pour rendre les mêmes données rapidement consultables pour différentes propriétés. Si vous spécifiez vos besoins exacts, je peux suggérer une structure de données plus spécifique.

4
aaaaaaaaaaaa

Dans toutes les valeurs uniques, vous pouvez:

a = new Set([1,2,3,4,5]) // a = Set(5) {1, 2, 3, 4, 5}
a.delete(3) // a = Set(5) {1, 2, 4, 5} 
[...a] // [1, 2, 4, 5]
3
Eugene Lyzo

L'astuce consiste à parcourir le tableau de bout en bout pour ne pas gâcher les index lors de la suppression d'éléments.

var deleteMe = function( arr, me ){
   var i = arr.length;
   while( i-- ) if(arr[i] === me ) arr.splice(i,1);
}

var arr = ["orange","red","black", "orange", "white" , "orange" ];

deleteMe( arr , "orange");

arr est maintenant ["rouge", "noir", "blanc"]

3
chaoticflow

Vous pouvez utiliser without ou pull à partir de Lodash :

const _ = require('lodash');
_.without([1, 2, 3, 2], 2); // -> [1, 3]
2
sakovias

Enlèvement non destructif:

function removeArrayValue(array, value)
{
    var thisArray = array.slice(0); // copy the array so method is non-destructive

    var idx = thisArray.indexOf(value); // initialise idx

    while(idx != -1)
    {
        thisArray.splice(idx, 1); // chop out element at idx

        idx = thisArray.indexOf(value); // look for next ocurrence of 'value'
    }

    return thisArray;
}
2
Randhir Rawatlal
function removeFrmArr(array, element) {
  return array.filter(e => e !== element);
};
var exampleArray = [1,2,3,4,5];
removeFrmArr(exampleArray, 3);
// return value like this
//[1, 2, 4, 5]
2
Subhojit Mondal

J'ai utilisé l'option la plus votée et créé une fonction permettant de nettoyer un tableau de mots en utilisant un autre tableau de mots indésirables: 

function cleanArrayOfSpecificTerms(array,unwantedTermsArray) {
  $.each(unwantedTermsArray, function( index, value ) {
    var index = array.indexOf(value);
    if (index > -1) {
      array.splice(index, 1);        
    }
  });
  return array;
}

Pour utiliser, procédez comme suit: 

var notInclude = ['Not','No','First','Last','Prior','Next', 'dogs','cats'];
var splitTerms = ["call", "log", "dogs", "cats", "topic", "change", "pricing"];

cleanArrayOfSpecificTerms(splitTerms,notInclude)
1
maudulus
let arr = [5, 15, 25, 30, 35];
console.log(arr); //result [5, 15, 25, 30, 35]
let index = arr.indexOf(30);

if (index > -1) {
   arr.splice(index, 1);
}
console.log(arr); //result [5, 15, 25, 35]
1
Asif vora

Veuillez ne pas utiliser la variante avec delete - elle crée un trou dans le tableau car elle ne réindexe pas les éléments après l'élément supprimé.

> Array.prototype.remove=function(v){
...     delete this[this.indexOf(v)]
... };
[Function]
> var myarray=["3","24","55","2"];
undefined
> myarray.remove("55");
undefined
> myarray
[ '3', '24', , '2' ]
1
Ilya Sher
var remove = function(array, value) {
    var index = null;

    while ((index = array.indexOf(value)) !== -1)
        array.splice(index, 1);

    return array;
};
0
Alexander Abashkin

// édité grâce à MarcoCI pour le conseil

essaye ça:

function wantDelete(item, arr){
  for (var i=0;i<arr.length;i++){
    if (arr[i]==item){
      arr.splice(i,1); //this delete from the "i" index in the array to the "1" length
      break;
    }
  }  
}
var goodGuys=wantDelete('bush', ['obama', 'bush', 'clinton']); //['obama', 'clinton']

espérons que cela vous aide

0
julian
//This function allows remove even array from array
var removeFromArr = function(arr, elem) { 
    var i, len = arr.length, new_arr = [],
    sort_fn = function (a, b) { return a - b; };
    for (i = 0; i < len; i += 1) {
        if (typeof elem === 'object' && typeof arr[i] === 'object') {
            if (arr[i].toString() === elem.toString()) {
                continue;
            } else {                    
                if (arr[i].sort(sort_fn).toString() === elem.sort(sort_fn).toString()) {
                    continue;
                }
            }
        }
        if (arr[i] !== elem) {
            new_arr.Push(arr[i]);
        }
    }
    return new_arr;
}

Exemple d'utilisation

var arr = [1, '2', [1 , 1] , 'abc', 1, '1', 1];
removeFromArr(arr, 1);
//["2", [1, 1], "abc", "1"]

var arr = [[1, 2] , 2, 'a', [2, 1], [1, 1, 2]];
removeFromArr(arr, [1,2]);
//[2, "a", [1, 1, 2]]
0
yesnik

J'ai essayé d'utiliser la méthode function de jbaron ci-dessus, mais j'ai constaté que je devais conserver le tableau d'origine intact pour une utilisation ultérieure, et créer un nouveau tableau comme celui-ci:

var newArray = referenceArray;

crée apparemment par référence au lieu de valeur, car lorsque j'ai supprimé un élément de newArray, le referenceArray l'a également supprimé. J'ai donc décidé de créer un nouveau tableau à chaque fois comme ceci:

function newArrRemoveItem(array, item, newArray){
    for(var i = 0; i < array.length; i++) {
        if(array[i]!=item){
            newArray.Push(array[i]);
        }
    }
}

Ensuite, je l'utilise comme ceci dans une autre fonction:

var vesselID = record.get('VesselID');
var otherVessels = new Array();
newArrRemoveItem(vesselArr,vesselID,otherVessels);

Maintenant, le vaisseauArr reste intact alors que chaque fois que j'exécute le code ci-dessus, le tableau otherVessels inclut tout le dernier élément vesselID.

0
Robert

Une autre variante:

if (!Array.prototype.removeArr) {
    Array.prototype.removeArr = function(arr) {
        if(!Array.isArray(arr)) arr=[arr];//let's be Nice to people who put a non-array value here.. that could be me!
        var that = this;
        if(arr.length){
            var i=0;
            while(i<that.length){
                if(arr.indexOf(that[i])>-1){
                    that.splice(i,1);
                }else i++;
            }
        }
        return that;
    }
}

C'est indexOf () à l'intérieur d'une boucle à nouveau, mais en supposant que le tableau à supprimer est petit par rapport au tableau à nettoyer; chaque suppression raccourcit la boucle while.

0
dkloke

Dans une fonction globale, nous ne pouvons pas passer directement une valeur personnalisée, mais il y a beaucoup de façons comme ci-dessous

 var ary = ['three', 'seven', 'eleven'];
 var index = ary.indexOf(item);//item: the value which you want to remove

 //Method 1
 ary.splice(index,1);

 //Method 2
 delete ary[index]; //in this method the deleted element will be undefined
0
Srikrushna Pal

Variante CoffeeScript + jQuery:

arrayRemoveItemByValue = (arr,value) ->
  r=$.inArray(value, arr)
  unless r==-1
    arr.splice(r,1)
  # return
  arr

console.log arrayRemoveItemByValue(['2','1','3'],'3')

il n'en enlève qu'un, pas tous.

0
Igor Teterin

La solution la plus simple est:

array.filter(valueForRemove => array.includes(valueForRemove));
0
Jackkobec

Vous pouvez utiliser lodash pull function

var ary = ['three', 'seven', 'eleven'];
_.pull(ary, 'seven'); // ['three', 'eleven']
console.log(ary)
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.6.1/lodash.js"></script>

0
Parth Raval