javascript - remove - vider un tableau js




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

J'ai un tableau d'entiers et j'utilise la méthode .push() pour y 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 JavaScript de base - aucun framework n'est autorisé.


Édité en octobre 2016

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

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

Retrait d'un article (code ECMA-262 Edition 5, ancien code 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 ]

Retrait de l'article (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 de flèche n'est pas prise en charge dans IE, 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 du tout dans IE, Chrome avant la version 47, Firefox avant la version 43, Safari avant la version 9 et Edge avant la version 14, voici donc 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 vous-même dans BabelJS :)

Référence


ES6 & sans mutation: (octobre 2016)

const removeByIndex = (list, index) =>
  [
    ...list.slice(0, index),
    ...list.slice(index + 1)
  ];

Ensuite :

removeByIndex([33,22,11,44],1) //=> [33,11,44]

Découvrez ce code. Cela fonctionne dans tous les principaux navigateurs .

remove_item = function (arr, value) {
    var b = '';
    for (b in arr) {
        if (arr[b] === value) {
            arr.splice(b, 1);
            break;
        }
    }
    return arr;
}

Appeler cette fonction

remove_item(array,value);

Il n'est pas nécessaire d'utiliser indexOf ou splice . Cependant, cela fonctionne mieux si vous ne voulez supprimer qu'une seule occurrence d'un élément.

Rechercher et déplacer (déplacer):

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;
}

Utilisez indexOf et splice (indexof):

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

Utilisez uniquement une splice (épissure):

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

Temps d'exécution sur nodejs pour un tableau contenant 1 000 éléments (moyenne de plus de 10 000 exécutions):

indexof est environ 10 fois plus lent que déplacer . Même s’il est amélioré en supprimant l’appel à indexOf dans indexOf il sera beaucoup moins indexOf que move .

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

Je ne sais pas comment vous vous attendez à array.remove(int) que array.remove(int) se comporte. Je peux penser à trois possibilités que vous voudrez peut-être.

Pour supprimer un élément d'un tableau d'indice i :

array.splice(i, 1);

Si vous souhaitez supprimer tous les éléments avec un number de valeur du tableau:

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

Si vous voulez simplement que l'élément d'indice i n'existe plus, vous ne voulez pas que les index des autres éléments changent:

delete array[i];

Je suis assez nouveau pour JavaScript et j'avais besoin de cette fonctionnalité. J'ai simplement écrit ceci:

function removeFromArray(array, item, index) {
  while((index = array.indexOf(item)) > -1) {
    array.splice(index, 1);
  }
}

Puis quand je veux l'utiliser:

//Set-up some dummy data
var dummyObj = {name:"meow"};
var dummyArray = [dummyObj, "item1", "item1", "item2"];

//Remove the dummy data
removeFromArray(dummyArray, dummyObj);
removeFromArray(dummyArray, "item2");

Sortie - Comme prévu. ["item1", "item1"]

Vous pouvez avoir des besoins différents des miens, vous pouvez donc facilement les modifier pour les adapter. J'espère que ça aidera quelqu'un.


Recherchez l' index de l'élément de tableau que vous souhaitez supprimer, puis supprimez-le avec splice .

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

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

Le second paramètre de splice est le nombre d'éléments à supprimer. Notez que splice modifie le tableau à la place et renvoie un nouveau tableau contenant les éléments supprimés.

Remarque : la prise en charge du navigateur pour indexOf est limitée. il n'est pas pris en charge dans Internet Explorer 7 et 8.

Si vous avez besoin de l' indexOf dans un navigateur non pris en charge, essayez le polyfill suivant. Trouvez plus d'informations sur ce polyfill ici .

Array.prototype.indexOf || (Array.prototype.indexOf = function(d, e) {
    var a;
    if (null == this) throw new TypeError('"this" is null or not defined');
    var c = Object(this),
        b = c.length >>> 0;
    if (0 === b) return -1;
    a = +e || 0;
    Infinity === Math.abs(a) && (a = 0);
    if (a >= b) return -1;
    for (a = Math.max(0 <= a ? a : b - Math.abs(a), 0); a < b;) {
        if (a in c && c[a] === d) return a;
        a++
    }
    return -1
});

Si vous avez des objets complexes dans le tableau, vous pouvez utiliser des filtres? Dans les situations où $ .inArray ou array.splice n'est pas aussi facile à utiliser. Surtout si les objets sont peut-être peu profonds dans le tableau.

Par exemple, si vous avez un objet avec un champ Id et que vous voulez que l'objet soit supprimé d'un tableau:

this.array = this.array.filter(function(element, i) {
    return element.id !== idToRemove;
});

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

NOTE: il mettra à jour le tableau donné et retournera 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;
    }
};

Un ami avait des problèmes dans Internet Explorer 8 et m'a montré ce qu'il avait fait. Je lui ai dit que c'était faux et il m'a dit qu'il avait la réponse ici. La réponse actuelle maximale ne fonctionnera pas dans tous les navigateurs (Internet Explorer 8 par exemple) et 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 parcourt le tableau en arrière (car les index et la longueur changent à mesure que les éléments sont supprimés) et supprime l'élément s'il est trouvé. Cela fonctionne dans tous les navigateurs.


Vous pouvez le faire facilement avec la méthode de filter :

function remove(arrOriginal, elementToRemove){
    return arrOriginal.filter(function(el){return el !== elementToRemove});
}
console.log( remove([1, 2, 1, 0, 3, 1, 4], 1) );

Cela supprime tous les éléments du tableau et fonctionne également plus rapidement que la combinaison de slice et indexOf


Vous pouvez utiliser ES6.

var array=['1','2','3','4','5','6']
var index = array.filter((value)=>value!='3');

Sortie:

["1", "2", "4", "5", "6"]

Underscore.js peut être utilisé pour résoudre des problèmes avec plusieurs navigateurs. Il utilise des méthodes de navigateur intégrées si elles sont présentes. S'ils sont absents, comme dans le cas d'anciennes versions d'Internet Explorer, il utilise ses propres méthodes personnalisées.

Un exemple simple pour supprimer des éléments d'un tableau (du site Web):

_.without([1, 2, 1, 0, 3, 1, 4], 0, 1); // => [2, 3, 4]

Mise à jour: cette méthode est recommandée uniquement si vous ne pouvez pas utiliser ECMAScript 2015 (anciennement ES6). Si vous pouvez l’utiliser, d’autres réponses ici fournissent des implémentations bien plus soignées.

Cet article résout votre problème et supprime également toutes les occurrences de l'argument au lieu de 1 (ou une valeur spécifiée).

Array.prototype.destroy = function(obj){
    // Return null if no objects were found and removed
    var destroyed = null;

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

        // Use while-loop to find adjacent equal objects
        while(this[i] === obj){

            // Remove this[i] and store it within destroyed
            destroyed = this.splice(i, 1)[0];
        }
    }

    return destroyed;
}

Usage:

var x = [1, 2, 3, 3, true, false, undefined, false];

x.destroy(3);         // => 3
x.destroy(false);     // => false
x;                    // => [1, 2, true, undefined]

x.destroy(true);      // => true
x.destroy(undefined); // => undefined
x;                    // => [1, 2]

x.destroy(3);         // => null
x;                    // => [1, 2]

J'ai une autre bonne solution pour supprimer d'un tableau:

var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

filter


Sur la base de toutes les réponses qui étaient principalement correctes et en tenant compte des meilleures pratiques suggérées (en particulier, n'utilisant pas directement Array.prototype), j'ai proposé le code ci-dessous:

function arrayWithout(arr, values) {
  var isArray = function(canBeArray) {
    if (Array.isArray) {
      return Array.isArray(canBeArray);
    }
    return Object.prototype.toString.call(canBeArray) === '[object Array]';
  };

  var excludedValues = (isArray(values)) ? values : [].slice.call(arguments, 1);
  var arrCopy = arr.slice(0);

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

  return arrCopy;
}

En examinant la fonction ci-dessus, malgré le fait que cela fonctionne bien, j'ai réalisé qu'il pourrait y avoir une amélioration des performances. Utiliser aussi ES6 au lieu de ES5 est une bien meilleure approche. Pour cela, voici le code amélioré:

const arrayWithoutFastest = (() => {
  const isArray = canBeArray => ('isArray' in Array) 
    ? Array.isArray(canBeArray) 
    : Object.prototype.toString.call(canBeArray) === '[object Array]';

  let mapIncludes = (map, key) => map.has(key);
  let objectIncludes = (obj, key) => key in obj;
  let includes;

  function arrayWithoutFastest(arr, ...thisArgs) {
    let withoutValues = isArray(thisArgs[0]) ? thisArgs[0] : thisArgs;

    if (typeof Map !== 'undefined') {
      withoutValues = withoutValues.reduce((map, value) => map.set(value, value), new Map());
      includes = mapIncludes;
    } else {
      withoutValues = withoutValues.reduce((map, value) => { map[value] = value; return map; } , {}); 
      includes = objectIncludes;
    }

    const arrCopy = [];
    const length = arr.length;

    for (let i = 0; i < length; i++) {
      // If value is not in exclude list
      if (!includes(withoutValues, arr[i])) {
        arrCopy.push(arr[i]);
      }
    }

    return arrCopy;
  }

  return arrayWithoutFastest;  
})();

Comment utiliser:

const arr = [1,2,3,4,5,"name", false];

arrayWithoutFastest(arr, 1); // will return array [2,3,4,5,"name", false]
arrayWithoutFastest(arr, 'name'); // will return [2,3,4,5, false]
arrayWithoutFastest(arr, false); // will return [2,3,4,5]
arrayWithoutFastest(arr,[1,2]); // will return [3,4,5,"name", false];
arrayWithoutFastest(arr, {bar: "foo"}); // will return the same array (new copy)

J'écris actuellement un article de blog dans lequel j'ai évalué plusieurs solutions pour Array sans problème et comparé le temps qu'il faut pour fonctionner. Je mettrai à jour cette réponse avec le lien une fois ce post terminé. Juste pour vous faire savoir, j'ai comparé ce qui précède à lodash sans et, si le navigateur le prend en charge Map, il bat lodash! Notez que je n'utilise Array.prototype.indexOfni Array.prototype.includesn'emballe les valeurs exlcudeValues ​​dans un Mapou Objectrend l'interrogation plus rapide! ( https://jsperf.com/array-without-benchmark-against-lodash )


Vous pouvez faire une boucle arrière pour vous assurer de ne pas rater les index, s'il existe plusieurs instances de l'élément.

var myElement = "chocolate";
var myArray = ['chocolate', 'poptart', 'poptart', 'poptart', 'chocolate', 'poptart', 'poptart', 'chocolate'];

/* Important code */
for (var i = myArray.length - 1; i >= 0; i--) {
    if (myArray[i] == myElement) myArray.splice(i, 1);
}

Démo en direct


Je sais qu'il y a déjà beaucoup de réponses, mais bon nombre d'entre elles semblent compliquer exagérément le problème. Voici un moyen simple et récursif de supprimer toutes les occurrences d’une clé - d’auto-appels jusqu’à ce que l’index ne soit plus trouvé. Oui, cela ne fonctionne que dans les navigateurs avec indexOf, mais c'est simple et peut être facilement rempli.

Fonction autonome

function removeAll(array, key){
    var index = array.indexOf(key);

    if(index === -1) return;

    array.splice(index, 1);
    removeAll(array,key);
}

Méthode prototype

Array.prototype.removeAll = function(key){
    var index = this.indexOf(key);

    if(index === -1) return;

    this.splice(index, 1);
    this.removeAll(key);
}

Voici quelques façons de supprimer un élément d'un tableau à l'aide de JavaScript .

Toutes les méthodes décrites ne modifient pas le tableau d'origine , mais en créent un nouveau.

Si vous connaissez l'index d'un article

Supposons que vous avez un tableau et que vous souhaitez supprimer un élément en position i.

Une méthode consiste à utiliser slice():

const items = ['a', 'b', 'c', 'd', 'e', 'f']
const i = 3
const filteredItems = items.slice(0, i-1).concat(items.slice(i, items.length))

console.log(filteredItems)

slice()crée un nouveau tableau avec les index qu'il reçoit. Nous créons simplement un nouveau tableau, du début à l’index que nous voulons supprimer, et concaténons un autre tableau à partir de la première position qui suit celle que nous avons supprimée à la fin du tableau.

Si vous connaissez la valeur

Dans ce cas, une bonne option consiste à utiliser filter()une approche plus déclarative :

const items = ['a', 'b', 'c', 'd', 'e', 'f']
const valueToRemove = 'c'
const filteredItems = items.filter(item => item !== valueToRemove)

console.log(filteredItems)

Ceci utilise les fonctions de flèche ES6. Vous pouvez utiliser les fonctions traditionnelles pour prendre en charge les anciens navigateurs:

const items = ['a', 'b', 'c', 'd', 'e', 'f']
const valueToRemove = 'c'
const filteredItems = items.filter(function(item) {
  return item !== valueToRemove
})

console.log(filteredItems)

ou vous pouvez utiliser Babel et transpiler le code ES6 en ES5 pour le rendre plus digeste aux anciens navigateurs, tout en écrivant du code JavaScript moderne dans votre code.

Supprimer plusieurs éléments

Et si au lieu d'un seul élément, vous souhaitez supprimer plusieurs éléments?

Trouvons la solution la plus simple.

Par index

Vous pouvez simplement créer une fonction et supprimer des éléments en série:

const items = ['a', 'b', 'c', 'd', 'e', 'f']

const removeItem = (items, i) =>
  items.slice(0, i-1).concat(items.slice(i, items.length))

let filteredItems = removeItem(items, 3)
filteredItems = removeItem(filteredItems, 5)
//["a", "b", "c", "d"]

console.log(filteredItems)

Par valeur

Vous pouvez rechercher une inclusion dans la fonction de rappel:

const items = ['a', 'b', 'c', 'd', 'e', 'f']
const valuesToRemove = ['c', 'd']
const filteredItems = items.filter(item => !valuesToRemove.includes(item))
// ["a", "b", "e", "f"]

console.log(filteredItems)

Évitez de muter le tableau d'origine

splice()(à ne pas confondre avec slice()) mute le tableau d'origine et doit être évité.

(à l'origine posté à https://flaviocopes.com/how-to-remove-item-from-array/ )


  Array.prototype.removeItem = function(a) {
            for (i = 0; i < this.length; i++) {
                if (this[i] == a) {
                    for (i2 = i; i2 < this.length - 1; i2++) {
                        this[i2] = this[i2 + 1];
                    }
                    this.length = this.length - 1
                    return;
                }
            }
        }

    var recentMovies = ['Iron Man', 'Batman', 'Superman', 'Spiderman'];
    recentMovies.removeItem('Superman');




arrays