10 fonctions Lodash que vous pouvez remplacer avec ES6 –

À l'heure actuelle, Lodash est le paquet npm le plus dépendant, mais si vous utilisez ES6, vous n'en aurez peut-être pas réellement besoin.

Dans cet article, nous allons examiner les méthodes de collecte natives avec des fonctions flèches et d'autres nouvelles fonctionnalités ES6 pour nous aider à contourner de nombreux cas d'utilisation courants.

Pour une introduction approfondie et de qualité à ES6, vous ne pouvez pas passer devant le développeur canadien de full-stack Wes Bos. Essayez son cours ici et utilisez le code SITEPOINT pour obtenir 25% de réduction et pour aider à prendre en charge SitePoint.

1. Mapper, filtrer, réduire

Ces méthodes de collecte rendent la transformation de données un jeu d'enfant et un support quasi universel. Nous pouvons les coupler avec des fonctions de flèches pour nous aider à écrire des alternatives laconiques aux implémentations offertes par Lodash:

 _. Map ([1, 2, 3]function (n) {return n * 3;});
// [3, 6, 9]
_.reduce ([1, 2, 3]fonction (total, n) {return total + n;}, 0);
// 6
_.filter ([1, 2, 3]fonction (n) {return n <= 2; });
// [1, 2]

// becomes

[1, 2, 3].map(n => n * 3);
[1, 2, 3] .reduce ((total, n) => total + n);
[1, 2, 3] .filter (n => n <= 2);

Cela ne s'arrête pas là non plus. Si nous utilisons un navigateur moderne, nous pouvons aussi utiliser trouver certains tous les et reduceRight aussi.

2 . Head & Tail

La syntaxe de déstructuration nous permet d'obtenir la tête et la queue d'une liste sans fonctions d'utilité:

 _. Head ([1, 2, 3]);
// 1
_.tail ([1, 2, 3]);
// [2, 3]

// devient

const [head, ...tail] = [1, 2, 3];

Il est également possible d'obtenir les éléments initiaux et le dernier élément d'une manière similaire:

 _. Initial ([1, 2, 3]);
// -> [1, 2]
_.last ([1, 2, 3]);
// 3

// devient

const [last, ...initial] = [1, 2, 3] .reverse ();

Si vous trouvez ennuyeux que reverse mute la structure de données, vous pouvez utiliser l'opérateur spread pour cloner le tableau avant d'appeler reverse:

 const xs = [1, 2, 3];
const [last, ...initial] = [...xs] .reverse ();

3. Repos et propagation

Les fonctions repos et propagation nous permettent de définir et d'invoquer des fonctions acceptant un nombre variable d'arguments. ES6 a introduit des syntaxes dédiées pour ces deux opérations:

 var say = _.rest (function (what, names) {
  var last = _.last (noms);
  var initial = _.initial (noms);
  var finalSeparator = (_.size (noms)> 1? ', &': '');
  retourne quoi + '' + initial.join (',') +
    finalSeparator + _.last (noms);
});

dire («bonjour», «fred», «barney», «cailloux»);
// "bonjour fred, barney, & galets"

// devient

const say = (quoi, ... noms) => {
  const [last, ...initial] = noms.reverse ();
  const finalSeparator = (noms.length> 1? ', &': '');
  return $ {what} $ {initial.join (',')} $ {finalSeparator} $ {last} `;
}

dire («bonjour», «fred», «barney», «cailloux»);
// "bonjour fred, barney, & galets"

4. Curry

Sans un langage de plus haut niveau tel que [TypeScript][5] ou [Flow][6]on ne peut pas donner à nos fonctions le type signatures, ce qui rend currying assez difficile. Lorsque nous recevons des fonctions curry, il est difficile de savoir combien d'arguments ont déjà été fournis, et que nous devrons fournir ensuite. Avec les fonctions de flèches, nous pouvons explicitement définir les fonctions curry, les rendant plus faciles à comprendre pour les autres programmeurs:

 function add (a, b) {
  retourne a + b;
}
var curriedAdd = _.curry (ajouter);
var add2 = curriedAdd (2);
add2 (1);
// 3

// devient

const add = a => b => a + b;
const add2 = add (2);
add2 (1);
// 3

Ces flèches explicitement cariées sont particulièrement importantes pour le débogage:

 var lodashAdd = _.curry (function (a, b) {
  retourne a + b;
});
var add3 = lodashAdd (3);
console.log (add3.length)
// 0
console.log (add3);
// Fonction (a, b) {
// / * [wrapped with _.curry & _.partial] * /
// retourne a + b;
//}

// devient

const es6Add = a => b => a + b;
const add3 = es6Add (3);
console.log (add3.length);
// 1
console.log (add3);
// Fonction b => a + b

Si nous utilisons une bibliothèque fonctionnelle comme lodash / fp ou ramda nous pouvons également utiliser des flèches pour supprimer le besoin du style auto-curry:

 _ .map (_. prop ('nom')) (personnes);

// devient

people.map (person => person.name);

5. Partiel

Comme pour la correction, nous pouvons utiliser les fonctions flèches pour rendre l'application partielle facile et explicite:

 var greet = function (salutation, nom) {
  renvoyer le message d'accueil + '' + nom;
}

var sayHelloTo = _.partial (salut, 'bonjour');
ditesHelloTo ('fred');
// "Bonjour Fred"

// devient

const sayHelloTo = name => saluer ('bonjour', nom);
ditesHelloTo ('fred');
// "Bonjour Fred"

Il est également possible d'utiliser des paramètres de repos avec l'opérateur spread pour appliquer partiellement des fonctions variadiques:

 const sayHelloTo = (nom, ... args) => greet ('bonjour', nom, ... args);
sayHelloTo ('fred', 1, 2, 3);
// "Bonjour Fred"

6. Opérateurs

Lodash possède un certain nombre de fonctions qui réimplémentent les opérateurs syntaxiques en tant que fonctions, de sorte qu'ils peuvent être transmis aux méthodes de collection

Dans la plupart des cas, les fonctions flèches les rendent simples et courts. :

 _. Éq (3, 3);
// vrai
_.add (10, 1);
// 11
_.map ([1, 2, 3]fonction (n) {
  return _.multiply (n, 10);
});
// [10, 20, 30]
_.reduce ([1, 2, 3]_.add);
// 6

// devient

3 === 3
10 + 1
[1, 2, 3] .map (n => n * 10);
[1, 2, 3] .reduce ((total, n) => total + n);

7. Chemins

Beaucoup de fonctions de Lodash prennent des chemins comme des chaînes ou des tableaux. Nous pouvons utiliser des fonctions flèches pour créer des chemins plus réutilisables à la place:

 var object = {'a': [{ 'b': { 'c': 3 } }, 4]};

_.at (objet, ['a[0] .b.c ',' a [1] ']);
// [3, 4]
_.at (['a', 'b', 'c']0, 2);
// ['a', 'c']

// devient

[
  obj => obj.a[0] .b.c,
  obj => obj.a [1]
] .map (chemin => chemin (objet));

[
  arr => arr[0],
  arr => arr [2]
] .map (chemin => chemin (['a', 'b', 'c']));

Parce que ces chemins sont "juste des fonctions", nous pouvons les composer aussi:

 const getFirstPerson = people => people [0];
const getPostCode = personne => person.address.codepost;
const getFirstPostCode = people => getPostCode (getFirstPerson (personnes));

Nous pouvons même créer des chemins d'ordre supérieur qui acceptent les paramètres:

 const getFirstNPeople = n => people => people.slice (0, n);

const getFirst5People = getFirstNPeople (5);
const getFirst5PostCodes = personnes => getFirst5People (personnes) .map (getPostCode);

8. Pick

L'utilitaire pick nous permet de sélectionner les propriétés que nous voulons d'un objet cible. Nous pouvons obtenir les mêmes résultats en utilisant des littéraux déstructurants et sténographiques:

 var object = {'a': 1, 'b': '2', 'c': 3};

return _.pick (objet, ['a', 'c']);
// {a: 1, c: 3}

// devient

const {a, c} = {a: 1, b: 2, c: 3};

return {a, c};

9. Constant, Identity, Noop

Lodash fournit des utilitaires pour créer des fonctions simples avec un comportement spécifique:

 _. Constant ({'a': 1}) ();
// {a: 1}
_.identity ({user: 'fred'});
// {user: 'fred'}
_.noop ();
// indéfini

Nous pouvons définir toutes ces fonctions en ligne en utilisant les flèches:

 constante const = x => () => x;
const identité = x => x;
const noop = () => undefined;

Ou nous pourrions réécrire l'exemple ci-dessus comme suit:

 (() => ({a: 1})) ();
// {a: 1}
(x => x) ({utilisateur: 'fred'});
// {user: 'fred'}
(() => indéfini) ();
// indéfini

10. Chaînage et flux

Lodash fournit quelques fonctions pour nous aider à écrire des instructions chaînées. Dans de nombreux cas, les méthodes de collecte intégrées renvoient une instance de tableau pouvant être directement chaînée, mais dans certains cas où la méthode mute la collection, cela n'est pas possible.

Cependant, nous pouvons définir les mêmes transformations en tant que tableau de fonctions de flèches:

 _ ([1, 2, 3])
 .tap (fonction (tableau) {
   // Mutation du tableau d'entrée.
   array.pop ();
 })
 .sens inverse()
 .valeur();
// [2, 1]

// devient

const pipeline = [
  array => { array.pop(); return array; },
  array => array.reverse()
];

pipeline.reduce ((xs, f) => f (xs), [1, 2, 3]);

De cette façon, nous n'avons même pas à penser à la différence entre tap et à . Envelopper cette réduction dans une fonction utilitaire en fait un excellent outil général:

 const pipe = functions => data => {
  return functions.reduce (
    (value, func) => func (valeur),
    Les données
  )
}

const pipe = pipe ([
  x => x * 2,
  x => x / 3,
  x => x > 5,
  b => !b
]);

pipeline (5);
// vrai
pipeline (20);
// faux

Conclusion

Lodash est toujours une excellente bibliothèque, et cet article offre seulement une nouvelle perspective sur la façon dont la version évoluée de JavaScript nous permet de résoudre certains problèmes dans des situations où nous aurions auparavant utilisé des modules utilitaires. ] Ne pas en tenir compte. Au lieu de cela, la prochaine fois que vous parviendrez à une abstraction, pensez à savoir si une simple fonction ferait l'affaire!

Cet article a été révisé par les pairs Mark Brown . Merci à tous les pairs évaluateurs de SitePoint pour avoir rendu le contenu de SitePoint le meilleur possible!

Digital Nomad et co-fondateur de la start-up basée au Royaume-Uni, Astral Dynamics.