Supprimer les éléments vides d'un tableau en Javascript

Comment supprimer les éléments vides d'un tableau en JavaScript ?

Y a-t-il une façon simple, ou dois-je parcourir cela et les supprimer manuellement ?

Réponse #1

Quelques façons simples :

var arr = [1,2,,3,,-3,null,,0,,undefined,4,,4,,5,,6,,,,];

arr.filter(n => n)
// [1, 2, 3, -3, 4, 4, 5, 6]

arr.filter(Number) 
// [1, 2, 3, -3, 4, 4, 5, 6]

arr.filter(Boolean) 
// [1, 2, 3, -3, 4, 4, 5, 6]

ou - Méthode classique : itération simple

var arr = [1,2,null, undefined,3,,3,,,0,,,[],,{},,5,,6,,,,],
    len = arr.length, i;

for(i = 0; i < len; i++ )
    arr[i] && arr.push(arr[i]);  // copy non-empty values to the end of the array

arr.splice(0 , len);  // cut the array and leave only the non-empty values
// [1,2,3,3,[],Object{},5,6]

jQuery :

var arr = [1,2,,3,,3,,,0,,,4,,4,,5,,6,,,,];
    
arr = $.grep(arr, n => n == 0 || n);
// [1, 2, 3, 3, 0, 4, 4, 5, 6]

Réponse #2

ÉDIT : Cette question a été répondue il y a presque neuf ans, à une époque où il n’y avait pas beaucoup de méthodes intégrées utiles dans le Array.prototype.

Maintenant, certainement, je vous recommanderais d'utiliser la méthode filter.

Gardez à l'esprit que cette méthode vous renverra un nouveau tableau avec les éléments qui répondent aux critères de la fonction de rappel que vous lui fournissez.

Par exemple, si vous voulez supprimer les valeurs null ou undefined :

var array = [0, 1, null, 2, "", 3, undefined, 3,,,,,, 4,, 4,, 5,, 6,,,,];

var filtered = array.filter(function (el) {
  return el != null;
});

console.log(filtered);

Cela dépendra de ce que vous considérez comme « vide », par exemple, si vous traitiez des chaînes, la fonction ci-dessus ne supprimerait pas les éléments qui sont une chaîne vide.

Un schéma typique que je vois souvent utilisé est de supprimer les éléments qui sont faux, ce qui inclut une chaîne vide "", 0, NaN, null, undefined et false.

Vous pouvez passer à la méthode filter la fonction constructeur Boolean, ou retourner le même élément dans la fonction de critères de filtrage, par exemple :

var filtered = array.filter(Boolean);

Ou

var filtered = array.filter(function(el) { return el; });

Dans les deux cas, cela fonctionne parce que la méthode filter dans le premier cas appelle le constructeur Boolean comme une fonction, convertissant la valeur, et dans le deuxième cas, la méthode filter transforme en interne la valeur de retour du rappel en Boolean de manière implicite.

Si vous travaillez avec des tableaux creux et que vous essayez de vous débarrasser des « trous », vous pouvez utiliser la méthode filter en passant un rappel qui retourne true, par exemple :

var sparseArray = [0, , , 1, , , , , 2, , , , 3],
    cleanArray = sparseArray.filter(function () { return true });

console.log(cleanArray); // [ 0, 1, 2, 3 ]

Ancienne réponse : Ne fais pas ça !

J'utilise cette méthode, en étendant le prototype natif Array :

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

test = new Array("", "One", "Two", "", "Three", "", "Four").clean("");
test2 = [1, 2,, 3,, 3,,,,,, 4,, 4,, 5,, 6,,,,];
test2.clean(undefined);

Ou vous pouvez simplement pousser les éléments existants dans un autre tableau :

// Will remove all falsy values: undefined, null, 0, false, NaN and "" (empty string)
function cleanArray(actual) {
  var newArray = new Array();
  for (var i = 0; i < actual.length; i++) {
    if (actual[i]) {
      newArray.push(actual[i]);
    }
  }
  return newArray;
}

cleanArray([1, 2,, 3,, 3,,,,,, 4,, 4,, 5,, 6,,,,]);

Réponse #3

Si vous devez supprimer TOUTES les valeurs vides ("", null, undefined et 0) :

arr = arr.filter(function(e){return e}); 

Pour supprimer les valeurs vides et les sauts de ligne :

arr = arr.filter(function(e){ return e.replace(/(\r\n|\n|\r)/gm,"")});

Exemple :

arr = ["hello",0,"",null,undefined,1,100," "]  
arr.filter(function(e){return e});

Retour :

["hello", 1, 100, " "]

MISE À JOUR (basée sur le commentaire d'Alnitak)

Dans certaines situations, vous pouvez vouloir conserver « 0 » dans le tableau et supprimer tout le reste (null, undefined et « »), voici une façon de le faire :

arr.filter(function(e){ return e === 0 || e });

Retour :

["hello", 0, 1, 100, " "]

Réponse #4

Simple ligne unique :

[1, false, "", undefined, 2].filter(Boolean); // [1, 2]

ou en utilisant underscorejs.org :

_.filter([1, false, "", undefined, 2], Boolean); // [1, 2]
// or even:
_.compact([1, false, "", undefined, 2]); // [1, 2]

Réponse #5

Si vous avez Javascript 1.6 ou une version ultérieure, vous pouvez utiliser Array.filter en utilisant une fonction de rappel triviale return true, par exemple :

arr = arr.filter(function() { return true; });

puisque .filter ignore automatiquement les éléments manquants dans le tableau d'origine.

La page MDN liée ci-dessus contient également une version pratique de filter avec vérification des erreurs qui peut être utilisée dans les interpréteurs JavaScript qui ne prennent pas en charge la version officielle.

Notez que cela ne supprimera pas les entrées null ni les entrées avec une valeur undefined explicite, mais l’OP a spécifiquement demandé des entrées « manquantes ».

Réponse #6

Pour enlever les trous, vous devriez utiliser

arr.filter(() => true)
arr.flat(0) // New in ES2019

Pour supprimer hole, null et undefined :

arr.filter(x => x != null)

Pour supprimer les valeurs vides et fausses (null, undefined, 0, -0, 0n, NaN, "", false, document.all) :

arr.filter(x => x)

arr = [, null, (void 0), 0, -0, 0n, NaN, false, '', 42];
console.log(arr.filter(() => true)); // [null, (void 0), 0, -0, 0n, NaN, false, '', 42]
console.log(arr.filter(x => x != null)); // [0, -0, 0n, NaN, false, "", 42]
console.log(arr.filter(x => x)); // [42]

Note :

• Les trous sont certains indices de tableau sans éléments.

arr = [, ,];
console.log(arr[0], 0 in arr, arr.length); // undefined, false, 2; arr[0] is a hole
arr[42] = 42;
console.log(arr[10], 10 in arr, arr.length); // undefined, false, 43; arr[10] is a hole

arr1 = [1, 2, 3];
arr1[0] = (void 0);
console.log(arr1[0], 0 in arr1); // undefined, true; a[0] is undefined, not a hole

arr2 = [1, 2, 3];
delete arr2[0]; // NEVER do this please
console.log(arr2[0], 0 in arr2, arr2.length); // undefined, false; a[0] is a hole

• Toutes les méthodes ci-dessus renvoient une copie du tableau donné, sans le modifier sur place.

arr = [1, 3, null, 4];
filtered = arr.filter(x => x != null);
console.log(filtered); // [1, 3, 4]
console.log(arr); // [1, 3, null, 4]; not modified

Réponse #7

La façon propre de le faire.

var arr = [0,1,2,"Thomas","false",false,true,null,3,4,undefined,5,"end"];
arr = arr.filter(Boolean);
// [1, 2, "Thomas", "false", true, 3, 4, 5, "end"]

Réponse #8

En fait, vous pouvez utiliser les méthodes ES6+, supposons que le tableau soit ci-dessous :

const arr = [1,2,3,undefined,4,5,6,undefined,7,8,undefined,undefined,0,9];

Et la réponse pourrait être l'une de ces deux façons :

• Première manière :

  const clearArray = arr.filter(i => i); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
  

• Deuxième manière :

  const clearArray = arr.filter(Boolean); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
  

Mise à jour du 14 octobre 2022 :

Ces deux réponses ne sont pas entièrement correctes, même dans l'exemple donné, oui, ça fonctionne mais faites attention au nombre 0 dans le tableau donné, de toutes les deux façons le nombre zéro disparaît et c'est évidemment lié à la vérification des éléments en utilisant la coercition booléenne.

Une façon complètement correcte est de vérifier les valeurs nulles et de les supprimer :

const notNil = (i) => !(typeof i === 'undefined' || i === null);

const clearArray = arr.filter(i => isNil(i));

const arr = [1,2,3,undefined,4,5,6,undefined,7,8,undefined,undefined,0,9];
const notNil = (i) => !(typeof i === 'undefined' || i === null);

console.log("Not nil: ", arr.filter(notNil));

Réponse #9

ES6 :

let newArr = arr.filter(e => e);

Réponse #10

ES6 simple

['a','b','',,,'w','b'].filter(v => v);

Réponse #11

Avec Underscore/Lodash :

Cas d'utilisation général :

_.without(array, emptyVal, otherEmptyVal);
_.without([1, 2, 1, 0, 3, 1, 4], 0, 1);

Avec les vides :

_.without(['foo', 'bar', '', 'baz', '', '', 'foobar'], '');
--> ["foo", "bar", "baz", "foobar"]

Voir la documentation de lodash pour la fonction without.

Réponse #12

Si l'utilisation d'une bibliothèque est une option, je sais qu'underscore.js a une fonction appelée compact() http://documentcloud.github.com/underscore/ elle a également plusieurs autres fonctions utiles liées aux tableaux et aux collections.

Voici un extrait de leur documentation :

_.compact(tableau)

Renvoie une copie du tableau avec toutes les valeurs falsy supprimées. En JavaScript, false, null, 0, "", undefined et NaN sont tous falsy.

_.compact([0, 1, false, 2, '', 3]);

=> [1, 2, 3]

Réponse #13

@Alnitak

En fait, Array.filter fonctionne sur tous les navigateurs si vous ajoutez un peu de code supplémentaire. Voir ci-dessous.

var array = ["","one",0,"",null,0,1,2,4,"two"];

function isempty(x){
if(x!=="")
    return true;
}
var res = array.filter(isempty);
document.writeln(res.toJSONString());
// gives: ["one",0,null,0,1,2,4,"two"]  

Voici le code que vous devez ajouter pour IE, mais le filtrage et la programmation fonctionnelle en valent la peine selon moi.

//This prototype is provided by the Mozilla foundation and
//is distributed under the MIT license.
//http://www.ibiblio.org/pub/Linux/LICENSES/mit.license

if (!Array.prototype.filter)
{
  Array.prototype.filter = function(fun /*, thisp*/)
  {
    var len = this.length;
    if (typeof fun != "function")
      throw new TypeError();

    var res = new Array();
    var thisp = arguments[1];
    for (var i = 0; i < len; i++)
    {
      if (i in this)
      {
        var val = this[i]; // in case fun mutates this
        if (fun.call(thisp, val, i, this))
          res.push(val);
      }
    }

    return res;
  };
}

Réponse #14

Comme personne d'autre ne l'a mentionné et que la plupart des gens ont underscore inclus dans leur projet, vous pouvez également utiliser _.without(array, *values);.

_.without(["text", "string", null, null, null, "text"], null)
// => ["text", "string", "text"]

Réponse #15

Pour supprimer les éléments indéfinis d'un tableau, vous pouvez simplement utiliser

const array = [
  { name: "tim", age: 1 },
  undefined,
  { name: "ewrfer", age: 22 },
  { name: "3tf5gh", age: 56 },
  null,
  { name: "kygm", age: 19 },
  undefined,
];
console.log(array.filter(Boolean));

Réponse #16

foo = [0, 1, 2, "", , false, 3, "four", null]

foo.filter(e => e === 0 ? true : e)

retours

[0, 1, 2, 3, "four"]

Si vous êtes sûr de ne pas avoir de 0 dans votre tableau, cela peut sembler un peu plus joli :

foo.filter(e => e)