Les amis qui ont utilisé le soulignement savent qu'il a une API très complète pour appeler la traversée des tableaux (ensembles), et _.each () est l'un d'eux. Voici un exemple simple:
var arr = [1, 2, 3, 4, 5]; _. Chaque (arr, fonction (el) {console.log (el);});Le code ci-dessus sortira 1, 2, 3, 4, 5 tour à tour. N'est-ce pas très intéressant? Vous n'avez même pas besoin d'écrire une boucle pour vous-même. La méthode _.each () est très utile pour traverser les tableaux, mais son implémentation interne n'est pas du tout difficile. Jetons un coup d'œil à la mise en œuvre de _.each (). Avant cela, jetons un coup d'œil à l'API de _.each (). _.each () est généralement appelé comme suit:
_.each (arr, fn, contexte);
Il reçoit 3 paramètres,
Le premier est un tableau qui doit être traversé (en fait, il est également possible d'être un objet, alors discutons donc plus tard);
La seconde est sa fonction de rappel (cette fonction de rappel peut passer en 3 paramètres, tels que: fonction (El, I, ARR), qui sont l'élément actuel, l'index actuel et le tableau d'origine, respectivement);
Le troisième est le contexte auquel la fonction de rappel doit être liée, c'est-à-dire en spécifiant cette valeur de la fonction de rappel FN.
OK, les besoins sont très clairs, commençons à travailler!
Implémentons d'abord le plus simple _.each (), qui ne peut pas modifier le contexte cela et reçoit deux paramètres. Le code est le suivant:
var _ = {}; // Supposons que c'est le soulignement // l'implémentation la plus simple du _.each method_.each = function (arr, fn) {for (var i = 0; i <arr.length; i ++) {fn (arr [i], i, arr); } return arr; // Renvoie le tableau d'origine}Et ça? N'est-ce pas très simple? Utilisez simplement une boucle pour une boucle et continuez à appeler la fonction de rappel. Cela peut être fait en quelques lignes de code. Je crois qu'aucun ami ne peut le comprendre! Tessons-le pour voir si cela fonctionne normalement:
var arr = [1, 2, 3, 4, 5]; _. Chaque (arr, fonction (el, i, arr) {console.log (el);});Ouvert dans le navigateur et la console verra la sortie correcte.
Un code aussi simple n'a aucun sens. Jetons un coup d'œil à un exemple plus difficile. Par exemple, Array Arr a une propriété SUM. Nous devons résumer tous les éléments du tableau et les stocker dans la somme, comme suit:
var arr = [1, 2, 3, 4, 5]; arr.sum = 0; // L'attribut SUM est utilisé pour stocker la somme de Array Elements_.Each (arr, fonction (el, i, arr) {this.sum + = el;});Pour le moment, cela est utilisé dans la fonction de rappel. S'il n'est pas lié, c'est la fenêtre par défaut. Ce n'est pas ce que nous voulons. Nous espérons qu'il est lié au tableau Arr. L'appel ou l'application peut implémenter cette fonction, le code est le suivant:
var _ = {}; // Supposons qu'il s'agisse du soulignement // lier, reçoit deux paramètres fn et context // liber fn au contexte var bind = function (fn, context) {context = context || nul; Fonction de retour (el, i, arr) {fn.call (contexte, el, i, arr); }} // _.each_.each = function (arr, fn, context) {// Appelez la méthode de liaison et bind fn au contexte fn = bind (fn, context); for (var i = 0; i <arr.length; i ++) {fn (arr [i], i, arr); } return arr;} // cas de test: var arr = [1, 2, 3, 4, 5]; arr.sum = 0; // L'attribut SUM est utilisé pour stocker la somme des éléments de tableau_.each (arr, function (el, i, arr) {this.sum + = el;}, arr); console.log (arr.sum); // 15OK, ce _.each () est déjà suffisamment puissant pour parcourir normalement le tableau, et vous pouvez également spécifier cette valeur à volonté pour modifier le contexte de la fonction de rappel. Cependant, comme nous l'avons mentionné précédemment, _.each () de souligner peut également traverser des objets, et cette implémentation n'est pas difficile. Il suffit de juger si le premier paramètre adopté est un objet ou un tableau. S'il s'agit d'un tableau, itérez comme nous. Sinon, s'il s'agit d'un objet, utilisez les objets pour ... dans Loop Traversal. Si vous êtes intéressé, vous pouvez l'essayer vous-même ou consulter le code source de soulignement.
Remarque: Étant donné que la norme ES5, les tableaux natifs ont déjà des méthodes de traversée telles que Array.prototype.Forach, array.prototype.map, etc., et les natives peuvent être utilisées dans le projet.
Ce qui précède est la description complète de l'analyse approfondie de la méthode de traversée du tableau JS (recommandé) introduit par l'éditeur. J'espère que ce sera utile à tout le monde. Si vous avez des questions, veuillez me laisser un message et l'éditeur répondra à tout le monde à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!