Comment passer un paramètre supplémentaire à la fonction de rappel dans la méthode Javascript .filter() ?

Question

Je veux comparer chaque chaîne dans un tableau avec une chaîne donnée. Ma mise en œuvre actuelle est :

function startsWith(element, wordToCompare) {
    return element.indexOf(wordToCompare) === 0;
}
addressBook.filter(startsWith);

Cette fonction simple fonctionne, mais seulement parce que pour le moment wordToCompare est défini comme une variable globale, mais bien sûr je veux éviter cela et le passer en tant que paramètre. Mon problème est que je ne suis pas sûr de comment définir startsWith() pour qu'il accepte un paramètre supplémentaire, car je ne comprends pas vraiment comment les paramètres par défaut qu'il prend sont passés. J'ai essayé toutes les différentes façons auxquelles je peux penser et aucune d'entre elles ne fonctionnent.

Si vous pouviez également expliquer comment les paramètres passés aux fonctions de rappel 'intégrées' (désolé, je ne connais pas de meilleur terme pour celles-ci) fonctionnent, ce serait génial

Answer 1

Faites en sorte que startsWith accepte le mot à comparer et retourne une fonction qui sera ensuite utilisée comme fonction de filtre/callback :

function startsWith(wordToCompare) {
    return function(element) {
        return element.indexOf(wordToCompare) === 0;
    }
}

addressBook.filter(startsWith(wordToCompare));

Une autre option serait d'utiliser Function.prototype.bind [MDN] (disponible uniquement dans les navigateurs prenant en charge ECMAScript 5, suivez un lien pour obtenir un shim pour les anciens navigateurs) et "fixer" le premier argument :

function startsWith(wordToCompare, element) {
    return element.indexOf(wordToCompare) === 0;
}

addressBook.filter(startsWith.bind(this, wordToCompare));

---

Je ne comprends pas vraiment comment les paramètres par défaut qu'il prend sont passés

Il n'y a rien de spécial à ce sujet. À un moment donné, filter appelle simplement le callback et passe l'élément actuel du tableau. C'est donc une fonction appelant une autre fonction, dans ce cas le callback que vous passez en argument.

Voici un exemple d'une fonction similaire :

function filter(array, callback) {
    var result = [];
    for(var i = 0, l = array.length; i < l; i++) {
        if(callback(array[i])) {  // ici le callback est appelé avec l'élément actuel
            result.push(array[i]);
        }
    }
    return result;
}

Answer 2

Le deuxième paramètre du filtre va définir this à l'intérieur du rappel.

arr.filter(callback[, thisArg])

Donc vous pourriez faire quelque chose comme :

function startsWith(element) {
    return element.indexOf(this) === 0;
}
addressBook.filter(startsWith, wordToCompare);

Answer 3

Pour ceux qui cherchent une alternative ES6 utilisant des fonctions fléchées, vous pouvez faire ce qui suit.

let startsWith = wordToCompare => (element, index, array) => {
  return element.indexOf(wordToCompare) === 0;
}

// où word serait votre argument
let result = addressBook.filter(startsWith("word"));

Version mise à jour utilisant includes:

const startsWith = wordToCompare => (element, index, array) => {
  return element.includes(wordToCompare);
}

Answer 4

function startsWith(element, wordToCompare) {
    return element.indexOf(wordToCompare) === 0;
}

// ...
var word = "QUELQUE CHOSE";

addressBook.filter(function(element){
    return startsWith(element, word);
});

Answer 5

Vous pouvez utiliser la fonction fléchée à l'intérieur d'un filtre, comme ceci :

résultat = addressBook.filter(element => element.indexOf(wordToCompare) === 0);

Fonctions fléchées sur MDN

Une expression de fonction fléchée présente une syntaxe plus courte par rapport aux expressions de fonction et lie de manière lexicale la valeur this (ne lie pas son propre this, arguments, super ou new.target). Les fonctions fléchées sont toujours anonymes. Ces expressions de fonction sont mieux adaptées pour les fonctions non méthodiques et ne peuvent pas être utilisées comme constructeurs.