La manière la plus simple de manipuler et transporter de gros blocs de données en Javascript (ainsi que dans plusieurs autres langages de programmation) est via les tableaux unidimensionnels et multidimensionnels. La modification et le tri de ces données requiert souvent des procédés d’itérations qui peuvent êtres lourds et relativement fastidieux. Heureusement, Javascript propose un ensemble de méthodes qui facilite plusieurs processus de manière assez élégante.
La fonction map() est essentiellement une boucle « for each » spécialement pour les transformations de valeurs. Pour chaque valeur entrée, on a une valeur sortie. Voici un exemple de code typique pouvant être simplifié avec la méthode map() :
var numbers = [1, 2, 3, 4];
var new_numbers = [];
for(var i = 0; i < numbers.length; i++) {
new_numbers[i] = numbers[i] * 2;
}
console.log("Les nombres doublés sont", new_numbers); // [2, 4, 6, 8]
Ce code, bien que fonctionnel et clair peut être simplifié davantage et faire abstraction des boucles, ainsi :
var numbers = [1, 2, 3, 4];
var new_numbers = numbers.map(function(number){
return number * 2;
});
console.log("Les nombres doublés sont", new_numbers); // [2, 4, 6, 8]
Au besoin ces fonctions peuvent être enchaînées pour cumuler les effets. En voici un exemple:
var numbers = [1, 2, 3, 4];
var new_numbers = numbers.map(function(number){
return number * 2;
}).map(function(number){
return number++;
});
console.log("Les nombres doublés et incrémentés sont", new_numbers); // [3, 5, 7, 9]
Dans le cadre de l’usage de la fonction « map() », un certain nombre de règles est à respecter afin de ne pas obtenir des comportements inattendus ou problématiques :
var new_numbers = numbers.map(function(number){
numbers[1] = number * 3;
return number * 2;
});
var xyz = 0;
var new_numbers = numbers.map(function(number){
xyz = number * 3;
return number * 2;
});
La fonction map() est bien utile pour modifier des groupes entiers de valeurs, mais dans bien des cas on désire uniquement modifier un sous-ensemble de ces valeurs en se basant sur un énoncé conditionnel. C’est à ce moment qu’entre en jeu la fonction filter(). La fonction filter() permet, tel que son nom l’indique, de filtrer un ensemble de données.
Voyez l’exemple suivant :
var numbers = [1, 2, 3, 4];
var new_numbers = [];
for(var i = 0; i < numbers.length; i++) {
if(numbers[i] % 2 !== 0) {
new_numbers[i] = numbers[i] * 2;
}
}
console.log("Les nombres doublés sont", new_numbers); // [2, 6]
À l’aide des fonctions map() et filter(), le code ci-haut peut être simplifié ainsi :
var numbers = [1, 2, 3, 4];
var new_numbers = numbers.filter(function(number){
return (number % 2 !== 0);
}).map(function(number){
return number * 2;
});
console.log("Les nombres doublés sont", new_numbers); // [2, 6]
Il y a un certain nombre de différences entre les fonctions map() et filter(). Spécifiquement, au niveau des valeurs de retour, filter() ne retourne pas de données modifiées, mais doit retourner une valeur booléenne(vrai/faux). Ceci a un impact sur si les données testées seront prises en compte ou non.
*Les fonctions map() & filter() peuvent être enchaînées les une après les autres, infiniment. Conséquemment, n’hésitez pas à en faire usage afin d’optimiser votre code.
Si ce que vous désirez faire, est obtenir un sous-produit des données d’un tableau, la fonction reduce() est là pour répondre à la majeure partie de vos besoins les plus simples.
Aimeriez-vous avoir un total? Voici un exemple d’usage où on double toutes les valeurs d’un tableau avant d’en faire le cumul. :
var numbers = [1, 2, 3, 4];
var total_number = numbers.map(function(number){
return number * 2;
}).reduce(function(total, number){
return total + number;
}, 0);
console.log("Le total est", total_number); // 20
La seconde valeur passée à la méthode est la valeur de départ de la valeur qui sera retournée. Dans ce cas-ci, la valeur de départ est 0. Pour chacune des valeurs dans le tableau, on double la valeur et la cumule à partir de 0. La résultante est de 20. ((1×2)+(2×2)+(3×2)+(4×2)).
Dans l’exemple ci-haut, la valeur de retour est un entier, mais vous pourriez faire des concaténations textuelles, assembler un tableau, ou autre; considérez simplement de faire les retours appropriés à l’intérieur de votre callback, mais aussi d’initialiser correctement votre second paramètre avec une valeur de départ appropriée.
Ces fonctions sont d’excellents raccourcis pour la rédaction d’un code propre et optimal lors de manipulations de données dans un tableau. La pratique est clé, donc n’hésitez pas à expérimenter & poser vos questions dans la zone des commentaires, plus bas, au besoin.
Exemple de code pour soumettre un formulaire avec CakePHP en utilisant Ajax et avoir un retour des erreurs de validation.
SVG (Scalable Vector Graphics / Graphiques vectoriels redimensionnables) est une spécification du W3C qui date déjà de 2001.
Alors ça y est, votre boutique en ligne est ouverte! Voici quelques conseils qui ont fait leurs preuves pour générer du traffic.
Sur votre boutique Shopify, il est possible d’ajouter, de modifier et de supprimer les menus.
pourquoi dit-on que la fonction map est essentiellement une boucle for each
Bonjour,
On dit que map est une boucle for each car elle exécute la fonction pour chaque itération, dans le cas de l’exemple sur chaque chiffre du tableau numbers.
Merci beaucoup pour la clarté de vos explications , simple et concis , j’ ai pu avancer très vite .
Bienvenue!