Introduction Lodash est une bibliothèque JavaScript native réputée qui ne nécessite aucune autre dépendance tierce. Elle vise à améliorer la productivité des développeurs et à optimiser les performances des méthodes natives JavaScript. En d'autres termes, de nombreuses méthodes sont déjà implémentées dans Lodash, vous pouvez simplement les appeler sans avoir à les rédiger vous-même, tout en assurant la cohérence des méthodes. Lodash utilise un symbole simple _, tout comme le $ de jQuery, ce qui le rend très concis. D'autres bibliothèques similaires incluent Underscore.js et Lazy.js

Compatibilité Chrome 43 et supérieur Firefox 38 et supérieur IE 6-11 MS Edge Safari 5 et supérieur (couvre presque tous les navigateurs couramment disponibles sur le marché)

Installation Navigateur web

<script src="lodash.js"></script> Téléchargez directement le fichier et intégrez-le, ou utilisez un CDN

NPM $ npm i -g npm $ npm i --save lodash Installez d'abord globalement, puis spécifiquement dans votre projet

Node.js var utilitaires = require('lodash');

Pourquoi utiliser Lodash Lodash simplifie JavaScript en fournissant des méthodes pour les tableaux, les nombres, les objets et les chaînes de caractères.

Fonctions Lodash courantes (version de référence Lodash v4.16.1)

1. Boucle N fois

<script type="text/javascript">
  console.log('------- javascript -------');
  // Méthode de boucle native JavaScript
  for(var compteur = 0; compteur < 5; compteur++){
      console.log(compteur);
  }
  console.log('------- lodash -------');
  // Méthode times de Lodash
  utilitaires.times(5,function(element){
      console.log(element);
  });
</script>

La boucle for est un choix incontournable pour les itérations, mais dans ce cas d'utilisation spécifique, la solution _.times() est plus concise et facile à comprendre.

2. Recherche de valeur de propriété profonde

<script type="text/javascript">
  var tableauProprietaires = [{
      "proprietaire": "Colin",
      "animaux": [{ "nom": "chien1" }, { "nom": "chien2" }]
  }, {
      "proprietaire": "John",
      "animaux": [{ "nom": "chien3" }, { "nom": "chien4" }]
  }];
  var jsMap = tableauProprietaires.map(function (proprietaire) {
      return proprietaire.animaux[0].nom;
  });
  console.log('------- jsMap -------');
  console.log(jsMap);

  var lodashMap = utilitaires.map(tableauProprietaires, 'animaux[0].nom');
  console.log('------- lodashMap -------');
  console.log(lodashMap);
</script>

La méthode _.map de Lodash est très similaire à la méthode de tableau native JavaScript, mais elle offre des améliorations utiles. Vous pouvez naviguer dans les propriétés d'objets profondément imbriqués en utilisant une chaîne de caractères plutôt qu'une fonction de rappel.

3. Clonage profond d'objets

<script type="text/javascript">
  var objetA = {
      "nom": "Dupont"
  };
  var objetB = utilitaires.cloneDeep(objetA);
  console.log(objetA);
  console.log(objetB);
  console.log(objetA === objetB);
</script>

Le clonage profond d'objets JavaScript est difficile et il n'existe pas de solution simple. Vous pouvez utiliser la solution native : JSON.parse(JSON.stringify(objetACloner)) pour le clonage profond. Cependant, cette méthode ne fonctionne que lorsque l'objet ne contient aucune méthode.

4. Obtenir une valeur aléatoire dans une plage spécifiée

<script type="text/javascript">
  function obtenirNombreAleatoire(min, max){
      return Math.floor(Math.random() * (max - min)) + min;
  }
  console.log(obtenirNombreAleatoire(15, 20));

  console.log(utilitaires.random(15, 20));

</script>

La méthode *.random de Lodash est plus puissante et flexible que la méthode native ci-dessus. Vous pouvez ne passer qu'un seul paramètre comme valeur maximale, ou spécifier que le résultat doit être un nombre à virgule flottante : *.random(15,20,true)

5. Extension d'objets

<script type="text/javascript">
  Object.prototype.etendre = function(obj) {
      for (var cle in obj) {
          if (obj.hasOwnProperty(cle)) {    
              this[cle] = obj[cle];
          }
      }
  };

  var objetA = {"nom": "Martin", "voiture": "BMW"};
  var objetB = {"nom": "Bernard", "aimeManger": true};

  objetA.etendre(objetB);
  console.log(objetA); 

  console.log(utilitaires.assign(objetA, objetB));
</script>

La méthode _.assign peut également recevoir plusieurs objets en paramètre pour les fusionner, en combinant les propriétés des objets suivants.

6. Sélection aléatoire d'éléments dans une liste

<script type="text/javascript">
  var equipeCompetente = ["Alice", "Bob", "Claire", "David"];

  function selectionAleatoire(equipe){
      var index = Math.floor(Math.random() * equipe.length);
      return equipe[index];
  }

  console.log(selectionAleatoire(equipeCompetente));

  // Lodash
  console.log(utilitaires.sample(equipeCompetente));
  console.log(utilitaires.sampleSize(equipeCompetente,2));
</script>

Vous pouvez également spécifier le nombre d'éléments à retourner aléatoirement avec _.sampleSize(equipeCompetente,n), où n est le nombre d'éléments à retourner.

7. Vérifier si un objet contient un élément spécifique

<script type="text/javascript">
  var personneCompetente = {
          'nom': 'Alice',
          'genre': 'féminin'
      },
      equipeCompetente = ["Alice", "Bob", "Claire", "David"];


  console.log(utilitaires.includes(personneCompetente, 'Alice'));
  console.log(utilitaires.includes(equipeCompetente, 'Bob'));
  console.log(utilitaires.includes(equipeCompetente, 'Bob',2));
</script>

_.includes() prend en premier paramètre l'objet à interroger, en second l'élément à rechercher, et en optionnel l'indice de départ pour la recherche.

8. Itération sur une collection

<script type="text/javascript">
  utilitaires([1, 2]).forEach(function(valeur) {
      console.log(valeur);
  });
  utilitaires.forEach([1, 3] , function(valeur, cle) {
      console.log(cle,valeur);
  });
</script>

Ces deux méthodes affichent respectivement '1' et '2'. Elles fonctionnent aussi bien avec les objets qu'avec les tableaux. Pour les tableaux, la clé est l'indice de l'élément ; pour les objets, la clé est le nom de la propriété et la valeur est sa valeur.

9. Application d'une fonction à chaque élément d'une collection _.map()

<script type="text/javascript">
  function carre(n) {
      return n * n;
  }

  console.log(utilitaires.map([4, 8], carre));
  // => [16, 64]

  console.log(utilitaires.map({ 'a': 4, 'b': 8 }, carre));
  // => [16, 64]

  var utilisateurs = [
      { 'utilisateur': 'barney' },
      { 'utilisateur': 'fred' }
  ];

  // La syntaxe abrégée de l'itérateur \_.property.
  console.log(utilitaires.map(utilisateurs, 'utilisateur'));
  // => ['barney', 'fred']
</script>

10. Vérifier si une valeur est vide _.isEmpty()

<script type="text/javascript">
  utilitaires.isEmpty(null);
  // => true

  utilitaires.isEmpty(true);
  // => true

  utilitaires.isEmpty(1);
  // => true

  utilitaires.isEmpty([1, 2, 3]);
  // => false

  utilitaires.isEmpty({ 'a': 1 });
  // => false
</script>

11. Recherche de propriétés *.find(), *.filter(), _.reject()

<script type="text/javascript">
  var utilisateurs = [
      {'utilisateur': 'barney', 'age': 36, 'actif': true},
      {'utilisateur': 'fred', 'age': 40, 'actif': false},
      {'utilisateur': 'pebbles', 'age': 1, 'actif': true}
  ];

  console.log(utilitaires.find(utilisateurs, function (o) {
      return o.age < 40;
  }));
  console.log(utilitaires.find(utilisateurs, {'age': 1, 'actif': true}));
  console.log(utilitaires.filter(utilisateurs, {'age': 1, 'actif': true}));
  console.log(utilitaires.find(utilisateurs, ['actif', false]));
  console.log(utilitaires.filter(utilisateurs, ['actif', false]));
  console.log(utilitaires.find(utilisateurs, 'actif'));
  console.log(utilitaires.filter(utilisateurs, 'actif'));

</script>

_.find() renvoie le premier élément qui retourne une valeur true. _.filter() renvoie un tableau de tous les éléments qui retournent une valeur true. *.reject() est l'opposé de *.filter(), il renvoie les éléments qui ne retournent pas de valeur true.

12. Élimination des doublons dans un tableau _.uniq(array) crée une copie du tableau sans doublons.

Paramètres array (Array): Le tableau à vérifier.

Retourne un nouveau tableau sans doublons

<script type="text/javascript">
  var tableau1 = [2, 1, 2];

  var tableau2 = utilitaires.uniq(tableau1);


  function sansDoublons(tableau) {
      var nouveauTableau = [];
      for (var i = 0; i < tableau.length; i++) {
          if(nouveauTableau.indexOf(tableau[i]) == -1){
              nouveauTableau.push(tableau[i]);
          }
      }
      return nouveauTableau;
  }

  console.log(tableau1);
  console.log(tableau2);
  console.log(sansDoublons(tableau1));
</script>

.uniqBy(array,[iteratee=.identity]) est similaire à _.uniq, mais accepte une fontcion d'itération qui est appelée pour chaque élément du tableau pour déterminer sa valeur unique. La fonction d'itération reçoit un paramètre : (valeur).

<script type="text/javascript">
  console.log(utilitaires.uniqBy([2.1, 1.2, 2.3], Math.floor));
  // => [2.1, 1.2]
  
  console.log(utilitaires.uniqBy([{ 'x': 1 }, { 'x': 2 }, { 'x': 1 }], 'x'));
  // => [{ 'x': 1 }, { 'x': 2 }]
</script>

Math.floor arrondit à l'inférieur, mais ne modifie pas les valeurs originales, donc le résultat reste [2.1, 1.2] plutôt que [2, 1].

13. Insertion de modèles _.template([string=''], [options={}])

<div id="conteneur"></div>

<script src="https://cdn.bootcss.com/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        var donnees = [{nom: 'Alice'}, {nom: 'Bob'}, {nom: 'Claire'}];
        var modele = utilitaires.template($("#modele").html());
        $("#conteneur").html(modele(donnees));
    });
</script>
<script type="text/template" id="modele">
    <% utilitaires.each(obj,function(e,i){ %>
        - &lt;%= e.nom %&gt;&lt;%= i %&gt;
    <%})%>
</script>