Lodash pour JS

‍

Présentation

Lodash est une librairie open source JavaScript qui propose des outils permettant de simplifier la manipulation des tableaux, nombres, strings, et objets. Lodash est régulièrement mis-à-jour, et est actuellement à la version 4.17.21.

Le projet Lodash est accessible sur GitHub .

Installation

Pour installer Lodash avec npm, c’est très simple, il suffit de taper la commande suivante :

<pre><code>npm i --save lodash</code></pre>

Après avoir installé lodash, il suffit d'importer les méthodes dont vous avez besoin.

Pour importer une méthode lodash dans votre projet, il suffit de l’importer de cette manière:

<pre><code>Import { isEqual } from ‘lodash’;</code></pre>

Vous pouvez aussi, si besoin, importer toutes les méthodes lodash à la fois à l’aide d’un alias:

<pre><code>Import * as _ from ‘lodash’.</code></pre>

Dans ce cas, il vous faudra utiliser le “_.” en préfixe avant d’appeler vos méthodes.

Exemple avec la méthode isEqual():

<pre><code> _.isEqual()</code></pre>

‍

INSTALLER LODASH SANS NPM

Si vous n’utilisez pas npm, alors il suffit de télécharger la librairie à partir du site officiel et l’importer dans votre page HTML à l’aide de la balise HTML: <!-- fs-richtext-ignore --><script>.

<pre><code>&lt;script src="lodash.js">&lt;/script></code></pre>

‍

SOURCES

Les sources sont disponible sur le site officiel de Lodash.

Voici quelques fonctions intéressantes qui valent le détour : <span class="css-span">OrderBy()</span>, <span class="css-span">DifferenceBy()</span>, <span class="css-span">Chain()</span>.

Voyons de plus près les fonctions citées.
‍

1 -- OrderBy()

Fonctionnalité intéressante de lodash, la méthode <span class="css-span">orderBy()</span> permet de trier un tableau sur une ou plusieurs propriétés à la fois.

A ce jour, aucune fonction native ne permet de faire du tri sur plusieurs propriétés en JS, le seul moyen d’y parvenir est de créer sa propre fonction et de trier manuellement sur chacune des propriétés.

Cette fonction peut donc vous faire gagner du temps :

Fonction : <span class="css-span">OrderBy(a,b,c);</span>

Paramètre             Description

‍a                                    Tableau à trier
‍b.                                   Tableau contenant les propriétés à trier
‍c                                     Ordre de tri pour chaque propriété "b"

Retourne : Un nouveau tableau trié.

Exemple :

<pre><code>let users = [
   { 'user': 'bob', 'age': 48 },
   { 'user': 'patrick', 'age': 34 },
   { 'user': 'bob', 'age': 40 },
   { 'user': 'patrick', 'age': 36 }
];

// Tri des 'user' en ascendant, et par 'age' en descendant

_.orderBy(users, ['user', 'age'], ['asc', 'desc']);

// retourne => [['patrick', 36], ['patrick', 34], ['bob', 48], ['bob', 40]]<code><pre>

‍

2 -- differenceBy()

La fonction <span class="css-span">differenceBy()</span> est un outil qui simplifie la comparaison entre 2 tableaux.

Fonction : <span class="css-span">DifferenceBy(a,b,c);</span>

Paramètre           Description
‍a.                             Tableau à comparer
‍b.                             Tableau ou valeurs initial (les valeurs à exclure)
‍c.                              Itération invoqué pour chaque élément.

Retourne : Un nouveau tableau incluant les différences.

Exemple :

<pre><code> _.differenceBy([{ 'x': 2}, {'x': 1 }], [{ 'x': 1 }], 'x'); // retourne => [{ 'x': 2 }]<code><pre>

‍

3 -- Chain()

Un peu à la manière des jouets LEGO, les méthodes lodash sont compatibles entre elles et peuvent s’imbriquer les unes dans les autres à l’aide de la méthode <span class="css-span">chain()</span>.

Exemple :

<pre><code>let users = [
   { 'user': 'jean', 'age': 36 },
   { 'user': 'fred'; 'age': 40 },
   { 'user': 'tom', 'age': 1 }
];

let youngest = _
   .chain(users)
   .sortBy('age')
   .map(function(o) {
       return o.user + ' is ' + o.age;
   })
   .head()
   .value();
   // retourne => 'tom is 1'<code><pre>
‍

Conclusion

Nous avons vu que lodash nous fournit des outils très utiles qui pourraient nous manquer en JS natif.

Lodash contient plus d’une centaine de fonctions, certaines peuvent vous servirent et vous simplifier la vie. C’est pourquoi je vous invite à aller voir la documentation Lodash qui est complète et qualitative.

‍