Question Comment puis-je supprimer un élément particulier d'un tableau en JavaScript?


J'ai un tableau d'entiers, et j'utilise le .push() méthode pour ajouter des éléments.

Existe-t-il un moyen simple de supprimer un élément spécifique d'un tableau? L'équivalent de quelque chose comme array.remove(int);.

Je dois utiliser coeur JavaScript - non les frameworks sont autorisés.


6102
2018-04-23 22:17


origine


Réponses:


Trouvez le index de l'élément de tableau que vous voulez supprimer, puis supprimez cet index avec splice.

La méthode splice () modifie le contenu d'un tableau en supprimant   éléments existants et / ou ajout de nouveaux éléments.

var array = [2, 5, 9];
var index = array.indexOf(5);
if (index > -1) {
  array.splice(index, 1);
}
// array = [2, 9]

Le deuxième paramètre de splice est le nombre d'éléments à supprimer. Notez que splice modifie le tableau en place et renvoie un nouveau tableau contenant les éléments qui ont été supprimés.


Remarque: support du navigateur pour indexOf est limité


8887
2018-04-23 22:23



Je ne sais pas comment tu t'attends array.remove(int) se comporter. Il y a trois possibilités auxquelles je peux penser que vous pourriez vouloir.

Pour supprimer un élément d'un tableau à un index i:

array.splice(i, 1);

Si vous voulez supprimer tous les éléments avec valeur number à partir du tableau:

for(var i = array.length - 1; i >= 0; i--) {
    if(array[i] === number) {
       array.splice(i, 1);
    }
}

Si vous voulez juste faire l'élément à l'index i n'existe plus, mais vous ne voulez pas que les index des autres éléments changent:

delete array[i];

892
2018-04-23 22:20



Publié le 2016 octobre

  • Faites-le simple, intuitif et explicite (https://en.wikipedia.org/wiki/Occam%27s_razor)
  • Faites-le immuable (le tableau original reste inchangé)
  • Faites-le avec les fonctions JS standard, si votre navigateur ne les prend pas en charge - utiliser polyfill

Dans cet exemple de code, j'utilise "array.filter (...)" Fonction pour supprimer les éléments indésirables de tableau, cette fonction ne modifie pas le tableau d'origine et en crée un nouveau. Si votre navigateur ne prend pas en charge cette fonction (par exemple, IE avant la version 9 ou Firefox avant la version 1.5), envisagez d'utiliser le filtre polyfill de Mozilla.

Suppression d'un élément (code ECMA-262 Edition 5 aka aka oldstyle JS)

var value = 3

var arr = [1, 2, 3, 4, 5, 3]

arr = arr.filter(function(item) { 
    return item !== value
})

console.log(arr)
// [ 1, 2, 4, 5 ]

Suppression d'un élément (code ES2015)

let value = 3

let arr = [1, 2, 3, 4, 5, 3]

arr = arr.filter(item => item !== value)

console.log(arr)
// [ 1, 2, 4, 5 ]

IMPORTANT ES2015 "() => {}" la syntaxe de la fonction flèche n'est pas supportée dans IE du tout, Chrome avant la version 45, Firefox avant la version 22, Safari avant la version 10. Pour utiliser la syntaxe ES2015 dans les anciens navigateurs, vous pouvez utiliser BabelJS


Suppression de plusieurs éléments (code ES2016)

Un avantage supplémentaire de cette méthode est que vous pouvez supprimer plusieurs éléments

let forDeletion = [2, 3, 5]

let arr = [1, 2, 3, 4, 5, 3]

arr = arr.filter(item => !forDeletion.includes(item))
// !!! Read below about array.includes(...) support !!!

console.log(arr)
// [ 1, 4 ]

IMPORTANT "La fonction array.includes (...)" n'est pas prise en charge dans IE, Chrome avant la version 47, Firefox avant la version 43, Safari avant la version 9 et Edge avant la version 14 voici polyfill de Mozilla

Suppression de plusieurs éléments (JavaScript expérimental de pointe ES2018?)

// array-lib.js

export function remove(...forDeletion) {
    return this.filter(item => !forDeletion.includes(item))
}

// main.js

import { remove } from './array-lib.js'

let arr = [1, 2, 3, 4, 5, 3]

// :: This-Binding Syntax Proposal
// using "remove" function as "virtual method"
// without extending Array.prototype
arr = arr::remove(2, 3, 5)

console.log(arr)
// [ 1, 4 ]

Essayez-le vous-même dans BabelJS :)

Référence


669
2017-12-19 19:54



Cela dépend si vous voulez garder un emplacement vide ou non.

Si vous voulez un emplacement vide, la suppression est correcte:

delete array[ index ];

Si vous ne le faites pas, vous devriez utiliser le épissure méthode:

array.splice( index, 1 );

Et si vous avez besoin de la valeur de cet élément, vous pouvez simplement stocker l'élément du tableau retourné:

var value = array.splice( index, 1 )[0];

Dans le cas où vous voulez le faire dans un certain ordre, vous pouvez utiliser array.pop() pour le dernier ou array.shift() pour le premier (et les deux retournent la valeur de l'article aussi).

Et si vous ne connaissez pas l'index de l'article, vous pouvez utiliser array.indexOf( item ) pour l'obtenir (dans un if() pour obtenir un objet ou dans un while() pour tous les avoir). array.indexOf( item ) retourne l'index ou -1 s'il n'est pas trouvé.


357
2018-04-23 22:32



Un ami avait des problèmes dans Internet Explorer 8et m'a montré ce qu'il a fait. Je lui ai dit que c'était mal, et il m'a dit qu'il avait la réponse ici. La première réponse actuelle ne fonctionnera pas dans tous les navigateurs (Internet Explorer 8 par exemple), et cela ne supprimera que la première occurrence de l'élément.

Supprimer toutes les instances d'un tableau

function remove(arr, item) {
    for (var i = arr.length; i--;) {
        if (arr[i] === item) {
            arr.splice(i, 1);
        }
    }
}

Il boucle à travers le tableau vers l'arrière (puisque les indices et la longueur changeront à mesure que les éléments sont supprimés) et supprime l'élément s'il est trouvé. Cela fonctionne dans tous les navigateurs.


227
2017-08-10 19:21



Il y a deux approches principales:

  1. épissure(): anArray.splice(index, 1);

  2. effacer: delete anArray[index];

Soyez prudent lorsque vous utilisez delete pour un tableau. C'est bon pour supprimer des attributs d'objets mais pas si bon pour les tableaux. Il vaut mieux utiliser splice pour les tableaux.

Gardez à l'esprit que lorsque vous utilisez delete pour un tableau, vous pourriez obtenir des résultats erronés pour anArray.length. En d'autres termes, delete supprimerait l'élément mais ne mettrait pas à jour la valeur de la propriété length.

Vous pouvez également vous attendre à avoir des trous dans les numéros d'index après l'utilisation de la suppression, par ex. vous pourriez vous retrouver avec des index 1,3,4,8,9,11 et la longueur comme avant d'utiliser delete. Dans ce cas, tous indexés for les boucles planteraient, car les index ne sont plus séquentiels.

Si vous êtes obligé d'utiliser delete pour une raison quelconque, alors vous devriez utiliser for each boucles lorsque vous avez besoin de faire une boucle dans les tableaux. En fait, évitez toujours d'utiliser des boucles indexées, si possible. De cette façon, le code serait plus robuste et moins sujet aux problèmes avec les index.


131
2017-12-21 11:32



Array.prototype.remByVal = function(val) {
    for (var i = 0; i < this.length; i++) {
        if (this[i] === val) {
            this.splice(i, 1);
            i--;
        }
    }
    return this;
}
//Call like
[1, 2, 3, 4].remByVal(3);

Array.prototype.remByVal = function(val) {
    for (var i = 0; i < this.length; i++) {
        if (this[i] === val) {
            this.splice(i, 1);
            i--;
        }
    }
    return this;
}

var rooms = ['hello', 'something']

rooms = rooms.remByVal('hello')

console.log(rooms)


103
2018-04-23 22:20



Il n'y a pas besoin d'utiliser indexOf ou splice. Cependant, il fonctionne mieux si vous voulez seulement supprimer une occurrence d'un élément.

Trouvez et déplacez (déplacez):

function move(arr, val) {
  var j = 0;
  for (var i = 0, l = arr.length; i < l; i++) {
    if (arr[i] !== val) {
      arr[j++] = arr[i];
    }
  }
  arr.length = j;
}

Utilisation indexOf et splice (Indice de):

function indexof(arr, val) {
  var i;
  while ((i = arr.indexOf(val)) != -1) {
    arr.splice(i, 1);
  }
}

Utiliser seulement splice (épissure):

function splice(arr, val) {
  for (var i = arr.length; i--;) {
    if (arr[i] === val) {
      arr.splice(i, 1);
    }
  }
}

Run-times sur nodejs pour array avec 1000 éléments (moyenne sur 10000 runs):

Indice de est environ 10 fois plus lent que bouge toi. Même si amélioré en supprimant l'appel à indexOf dans épissure il fait beaucoup pire que bouge toi.

Remove all occurrences:
    move 0.0048 ms
    indexof 0.0463 ms
    splice 0.0359 ms

Remove first occurrence:
    move_one 0.0041 ms
    indexof_one 0.0021 ms

82
2017-09-19 01:53



Trop vieux pour répondre, mais peut-il aider quelqu'un, en fournissant un prédicat au lieu d'une valeur.

REMARQUE: il va mettre à jour le tableau donné, et retourner les lignes affectées

Usage

var removed = helper.removeOne(arr, row => row.id === 5 );

var removed = helper.remove(arr, row => row.name.startsWith('BMW'));

Définition

var helper = {

    // Remove and return the first occurrence     

    removeOne: function(array, predicate) {
        for (var i = 0; i < array.length; i++) {
            if (predicate(array[i])) {
                return array.splice(i, 1);
            }
        }
    },

    // Remove and return all occurrences  

    remove: function(array, predicate) {
        var removed = [];

        for (var i = 0; i < array.length;) {

            if (predicate(array[i])) {
                removed.push(array.splice(i, 1));
                continue;
            }

            i++;                
        }

        return removed;
    }
};

56
2018-05-02 12:00