web-dev-qa-db-fra.com

Comment filtrer () NaN, null, 0, false dans un tableau (JS)

On m'a demandé de filtrer NaN, null, 0, false dans un tableau .

Heureusement j'ai répondu à la question. 

function bouncer(arr) {
  function filterer(arr) {
     return arr > 0|| isNaN(arr) === true;
  }
  arr = arr.filter(filterer);
  return arr;
}

//example input
bouncer([0, 1, 2, 3, 'ate', '', false]); //output [1, 2, 3, 'ate']

mais le fait est que je ne sais vraiment pas comment j'ai trouvé la réponse ou plutôt, je ne sais pas comment cela fonctionne. Spécialement sur arr> 0 comment le filtre sait-il que arr est déjà lu sur arr [1], arr [2], etc. sans utiliser de boucle pour itérer dans tous les tableaux.

ou peut simplement expliquer comment coder fonctionne. [J'ai essayé de l'expliquer clairement ---]

8
Fhrey

Regardez les docs pour Array.filter. Notez en particulier les arguments du rappel:

Fonction pour tester chaque élément du tableau. Appelé avec des arguments (élément, index, tableau). Renvoie true pour conserver l'élément, false sinon.

Donc, dans votre cas, arr est l'élément (et mal nommé, d'où votre confusion). Le filtre parcourt votre tableau et, pour chaque élément appelé, vous rappelez en passant l'élément à la position actuelle sous la forme arr

Comme d'autres l'ont souligné dans les commentaires, la logique de votre rappel de filtre est en fait erronée pour les valeurs négatives, mais cela peut ne pas être un problème si vous savez que votre tableau ne contiendra jamais de valeurs négatives (mais cela peut être dangereux de supposer ).

Et, bien sûr, en interne, cela passe en boucle dans votre tableau. Vous ne pouvez pas filtrer votre tableau (non trié) sans toucher à chaque élément du tableau. Regardez le polyfil dans le lien pour avoir une idée de la façon dont cela fonctionne pourrait (peut-être parce qu’il s’agit d’un détail d’implémentation qui peut différer selon les moteurs JavaScript, mais qui impliquera sans aucun doute une boucle array, appelle le rappel (notez les arguments) et si le rappel renvoie true, il est poussé sur un tableau de résultats. 

3
Matt Burland

Si on vous a demandé de filtrer NaN, null, 0, false dans un tableau, vos solutions ne fonctionnent pas vraiment.

Votre contribution de:

bouncer([0, 1, 2, 3, 'ate', '', false, NaN]);

Obtiendra la sortie de:

[1, 2, 3, 'ate', NaN]

Pour filtrer toutes les valeurs "fausses", vous pouvez simplement utiliser Boolean:

function bouncer(arr) {
  return arr.filter(Boolean);
}

bouncer([0, 1, 2, 3, 'ate', '', false, NaN]);

Sortie:

[1, 2, 3, 'ate']

Étant donné que le constructeur Boolean est également une fonction, il renvoie soit true pour l’argument ‘véracité’, soit false pour l’argument 'falsy'. Si la valeur est omise ou est 0, -0, null, false, NaN, undefined ou la chaîne vide (""), l'objet a la valeur false. Toutes les autres valeurs, y compris tout objet ou la chaîne "false", créent un objet avec une valeur initiale de true.

71
Bluefin

Vous pouvez également utiliser une fonction d'identité au lieu de Boolean.

function bouncer(arr) {
  return arr.filter(x => x);
}
6
Trevor Dixon

Je travaille également sur l’algorithme Free Falsy Bouncer du Free Code Camp. J'ai trouvé le moyen le plus simple de le faire est:

function bouncer(arr) {
   return arr.filter(Boolean);
}
4
elimcjah

La méthode filter () crée un nouveau tableau avec tous les éléments qui passent le test implémenté par la fonction fournie.

Étant donné que false, null, 0, "", undefined et NaN sont tous des valeurs Falsy dans JavaScript, ils renverront false lorsqu'ils seront testés.

function bouncer(arr) {
  var array = arr.filter(function(val){
    return val;
  });
  return array;
}

Seules les valeurs qui ne retournent pas false seront ajoutées au array.

2
Ravi Kumar Seth

Ne serait pas plus élégant de partir du principe que tous les éléments indésirables sont considérés comme faux quand les valeurs booléennes sont attendues, alors:

function clear (arr){
   var stripped = [];
   for (i = 0, len = arr.length; i < len; i++){
      if (arr[i])
         stripped.Push(arr[i]);
   }
   return stripped;
}
1
adam bahdaj

Depuis que je suis débutant en codage, ma logique a été d’utiliser des booléens primitifs pour comparer les éléments filtrés là, "Si nécessaire, la valeur transmise comme premier paramètre est convertie en valeur booléenne. Si valeur est omise ou vaut 0, -0, null, false, NaN, la chaîne vide (" "), la valeur initiale de l'objet est false. Toutes les autres valeurs, y compris les objets ou la chaîne "false", créent un objet avec la valeur initiale true. " Donc, la logique depuis filtre renvoie la valeur si c'est vrai ou false, vous devez renvoyer des valeurs si elles sont vraies . En outre, je n’ai pas tout appris sur la méthode de filtrage; pour les recherches que j’ai effectuées, j’ai Je vais essayer d’expliquer ici.´

redéfinition de la méthode (elle existe déjà, c'est juste pour comprendre) la méthode de filtrage accepte une fonction appelée un prédicat, c'est-à-dire une fonction qui reçoit une valeur et renvoie true ou false.

Le résultat var est un tableau vide où les résultats seront poussés avec la méthode Push . Nous utilisons une méthode forEach avec cela (ceci, dans ce contexte, est appliqué au prototype de tableau, cela signifie que vous aurez le Méthode de filtrage disponible sur chaque tableau que vous définissez, avec le sintax de array.method (args) dans ce cas array.filter (args)) des ressources https: //developer.mozilla .org/en-US/docs/Web/JavaScript/Référence/Global_Objects/Object/prototype

Nous allons maintenant exécuter une opération dans chaque élément du tableau, avec la méthode forEach, puis appliquer la fonction de prédicat à l'élément itch du tableau et, si elle renvoie true, l'ajouter aux résultats.

Array.prototype.filter = function(predicate){   
    var results = [];

    this.forEach(function(item) {   
        if (predicate(item)) {
            results.Push(item);
        }

    });
};

// ------------------------------- Solution correcte --------------- ------------

function bouncer (arrToFilter){

    return arrToFilter.filter(Boolean);
}

// ---------- Code sans la méthode de filtrage ---------

function bouncerNoFilterMethod(arrToFilter){
    var results = [];

    arrToFilter.forEach(function(arrToFilter){
        if(arrToFilter){
            results.Push(arrToFilter);
        }
    });

    return  results;    
}

console.log(bouncerNoFilterMethod([7, "ate", "", false, 9]));
console.log(bouncerNoFilterMethod(["a", "b", "c"]));
console.log(bouncerNoFilterMethod([false, null, 0, NaN, undefined, ""]));
console.log(bouncerNoFilterMethod([1, null, NaN, 2, undefined]));
console.log(bouncer([7, "ate", "", false, 9]));
console.log(bouncer(["a", "b", "c"]));
console.log(bouncer([false, null, 0, NaN, undefined, ""]));
console.log(bouncer([1, null, NaN, 2, undefined]));

J'espère que cela aide à comprendre la méthode, et que la première chose qui ne l'a pas comprise était de transmettre la fonction, le prédicat de la méthode. Si j'ai des erreurs ici, veuillez suggérer des corrections.

On dirait que Boolean est le correctif/réponse le plus simple pour le défi "FreeCodeCamp", mais il pourrait être utile d'essayer plusieurs choses pour comprendre le pourquoi et le comment.

function bouncer(arr) {
      return arr.filter(function(val){
        return val;
     });
    }

Ceci évalue tout ce qui passe à travers le filtre, en utilisant la fonction (callback) transmise, qui renvoie des valeurs. Si elle ne renvoie pas de valeur, ce que null, etc. ne renverra pas, elle ne sera pas incluse dans le retour. Au moins, cette méthode m'a aidé à comprendre pourquoi plutôt que de simplement réussir le test.

0
Holden

Fonction pour tester chaque élément du tableau. Invoqué avec des arguments (élément, index, tableau). Renvoie true pour conserver l'élément, false autrement

Si vous voulez juste une explication. Tableau filter() comme son nom l’indique. Supprime l'élément indésirable si la condition échoue (false).

(arr > 0|| isNaN(arr) === true)

0,  false || false  //removed
1,  true || false  
2,  true || false
3,  true || false
'ate', false || true
'',   false|| false  // removed
false  false || false //removed

Sortie:

[1, 2, 3, "ate"]
0
Manwal