DEV Community

loading...
Younup

Lodash pour JS

Younup
Administrator of Younup
・3 min read

LODASH

Google et StackOverflow sont tes meilleurs amis ? Alors cet article est pour toi, car je vais te présenter ton 3ème ami : « Lodash ».

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 :

npm i --save lodash
Enter fullscreen mode Exit fullscreen mode

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:

Import { isEqual } from ‘lodash’;  
Enter fullscreen mode Exit fullscreen mode

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

Import * as _ from ‘lodash’. 
Enter fullscreen mode Exit fullscreen mode

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

Exemple avec la méthode isEqual():

  _.isEqual()
Enter fullscreen mode Exit fullscreen mode

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: <script>.

<script src="lodash.js"></script>
Enter fullscreen mode Exit fullscreen mode
Sources

Les sources sont disponible sur le site officiel de Lodash.

Voici quelques fonctions intéressantes qui valent le détour :
OrderBy(), DifferenceBy(), Chain().

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

1 -- OrderBy()

Fonctionnalité intéressante de lodash, la méthode orderBy() 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 : OrderBy(a,b,c);

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 :

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]]
Enter fullscreen mode Exit fullscreen mode

2 -- differenceBy()

La fonction differenceBy() est un outil qui simplifie la comparaison entre 2 tableaux.

Fonction : DifferenceBy(a,b,c);

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 :

 _.differenceBy([{ 'x': 2}, {'x': 1 }], [{ 'x': 1 }], 'x');
 // retourne => [{ 'x': 2 }]
Enter fullscreen mode Exit fullscreen mode

## 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 chain().

Exemple :

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'
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (1)

Collapse
lukeshiru profile image
LUKESHIRU