Underscore.JS - Guide rapide

Underscore.JS est une bibliothèque javascript populaire qui fournit plus de 100 fonctions pour faciliter le développement Web. Il fournit des fonctions d'assistance telles que mapper, filtrer, appeler ainsi que la liaison de fonctions, la création de modèles javascript, les vérifications d'égalité profonde, la création d'index, etc. Underscore.JS peut être utilisé directement dans un navigateur et également avec Node.js.

Travailler avec des objets à l'aide de JavaScript peut être assez difficile, en particulier si vous avez beaucoup de manipulations à faire avec eux. Underscore est livré avec de nombreuses fonctionnalités qui facilitent votre travail avec des objets.

Underscore.JS est un projet open source et vous pouvez facilement contribuer à la bibliothèque et ajouter des fonctionnalités sous forme de plugins et les rendre disponibles sur GitHub et dans Node.js.

traits

Laissez-nous comprendre en détail toutes les fonctionnalités importantes disponibles avec Underscore -

Les collections

Underscore.JS fournit diverses fonctions pour les collections comme each, map, reduction qui sont utilisées pour appliquer une opération sur chaque élément d'une collection. Il fournit des méthodes telles que groupBy, countBy, max, min qui traite les collections et facilite de nombreuses tâches.

Tableaux

Underscore.JS fournit diverses fonctions pour les tableaux, comme l'itération et le traitement des tableaux tels que first, initial, lastIndexOf, intersection, difference, etc.

Les fonctions

Underscore.JS fournit des fonctions telles que la liaison, le retard, avant, après, etc.

Objets

Underscore.JS fournit des fonctions pour manipuler des objets, pour mapper des objets et comparer des objets. Par exemple, les clés, les valeurs, les extensions, les extendOwn, isEqual, isEmpty etc.

Utilitaires

Underscore.JS fournit diverses méthodes utilitaires telles que noConflict, random, iteratee, escape, etc.

Chaînage

Underscore.JS fournit des méthodes de chaînage ainsi que la chaîne, la valeur.

Dans les chapitres suivants, nous aborderons les fonctions importantes de Underscore.JS

Dans ce chapitre, vous apprendrez en détail comment configurer l'environnement de travail de Underscore.JS sur votre ordinateur local. Avant de commencer à travailler sur Underscore.JS, vous devez avoir accès à la bibliothèque. Vous pouvez accéder à ses fichiers dans l'une des méthodes suivantes -

Méthode 1: Utilisation du fichier Underscore.JS dans le navigateur

Dans cette méthode, nous allons avoir besoin du fichier Underscore.JS de son site officiel et l'utiliser directement dans le navigateur.

Étape 1

Dans un premier temps, rendez-vous sur le site officiel de Underscore.JS https://underscorejs.org/.

Notez qu'il existe une option de téléchargement disponible qui vous donne le dernier fichier underscore-min.js UMD (Production) disponible. Cliquez avec le bouton droit sur le lien et choisissez Enregistrer sous. Notez que le fichier est disponible avec et sans minification.

Étape 2

Maintenant, incluez underscore-min.js à l'intérieur de scripttag et commencez à travailler avec Underscore.JS. Pour cela, vous pouvez utiliser le code ci-dessous -

<script type = "text/JavaScript" src = "https://underscorejs.org/underscore-min.js"></script>

Voici un exemple de travail et sa sortie pour une meilleure compréhension -

Exemple

<html>
   <head>
      <title>Underscore.JS - Working Example</title>
      <script type = "text/JavaScript" src = "https://underscorejs.org/underscore-min.js"></script>
      <style>
         div {
            border: solid 1px #ccc;
            padding:10px;
            font-family: "Segoe UI",Arial,sans-serif;
            width: 50%;
         }
      </style>
   </head>
   <body>
      <div style = "font-size:25px" id = "list">
	  </div>
      <script type = "text/JavaScript">
         var numbers = [1, 2, 3, 4];
         var listOfNumbers = '';
         _.each(numbers, function(x) { listOfNumbers += x + ' ' });
         document.getElementById("list").innerHTML = listOfNumbers;
      </script>
   </body>
</html>

Production

Méthode 2: Utilisation de Node.js

Si vous optez pour cette méthode, assurez-vous d'avoir Node.js et npminstallé sur votre système. Vous pouvez utiliser la commande suivante pour installer Underscore.JS -

npm install underscore

Vous pouvez observer la sortie suivante une fois Underscore.JS installé avec succès -

+ [email protected]
added 1 package from 1 contributor and audited 1 package in 6.331s
found 0 vulnerabilities

Maintenant, pour tester si Underscore.JS fonctionne correctement avec Node.js, créez le fichier tester.js et ajoutez-y le code suivant -

var _ = require('underscore');
var numbers = [1, 2, 3, 4];
var listOfNumbers = '';
_.each(numbers, function(x) { listOfNumbers += x + ' ' });
console.log(listOfNumbers);

Enregistrez le programme ci-dessus dans tester.js. Les commandes suivantes sont utilisées pour compiler et exécuter ce programme.

Commander

\>node tester.js

Production

1 2 3 4

Underscore.JS a de nombreuses méthodes faciles à utiliser qui aident à itérer les collections. Ce chapitre les aborde en détail.

Underscore.JS fournit diverses méthodes pour itérer les collections comme indiqué ci-dessous -

N ° Sr. Méthode et syntaxe
1 chaque

_.each (liste, itération, [contexte])

2 carte

_.map (liste, itération, [contexte])

3 réduire

_.reduce (liste, itération, [mémo], [contexte])

4 réduireDroite

_.reduceRight (liste, itération, [mémo], [contexte])

5 trouver

_.find (liste, prédicat, [contexte])

6 filtre

_.filter (liste, prédicat, [contexte])

sept

_.where (liste, propriétés)

8 trouverOù

_.findWhere (liste, propriétés)

9 rejeter

_.reject (liste, prédicat, [contexte])

dix chaque

_.every (liste, [prédicat], [contexte])

11 certains

_.some (liste, [prédicat], [contexte])

Underscore.JS a de nombreuses méthodes faciles à utiliser qui aident à traiter les collections. Ce chapitre les aborde en détail.

Underscore.JS fournit diverses méthodes pour traiter les collections comme indiqué ci-dessous -

N ° Sr. Méthode et syntaxe
1 contient

_.contains (liste, valeur, [fromIndex])

2 invoquer

_.invoke (liste, methodName, * arguments)

3 cueillir

_.pluck (liste, nompropriété)

4 max

_.max (liste, [iteratee], [contexte])

5 min

_.min (liste, [iteratee], [contexte])

6 Trier par

_.sortBy (liste, itération, [contexte])

sept par groupe

_.groupBy (liste, itéré, [contexte])

8 indexBy

_.indexBy (liste, itération, [contexte])

9 countBy

_.countBy (liste, itération, [contexte])

dix mélanger

_.shuffle (liste)

11 échantillon

_.sample (liste, [n])

12 toArray

_.toArray (liste)

13 Taille

_.size (liste)

14 cloison

_.partition (liste, prédicat)

15 compact

_.compact (liste)

Underscore.JS a de nombreuses méthodes faciles à utiliser qui aident à itérer les tableaux. Ce chapitre les aborde en détail.

Underscore.JS fournit diverses méthodes pour itérer les tableaux comme indiqué ci-dessous -

N ° Sr. Méthode et syntaxe
1 première

_.first (tableau, [n])

2 initiale

_.initial (tableau, [n])

3 dernier

_.last (tableau, [n])

4 du repos

_.rest (tableau, [index])

5 Indice de

_.indexOf (tableau, valeur, [isSorted])

6 lastIndexOf

_.lastIndexOf (tableau, valeur, [fromIndex])

sept sortedIndex

_.sortedIndex (tableau, valeur, [iteratee], [contexte])

8 findIndex

_.findIndex (tableau, prédicat, [contexte])

9 findLastIndex

_.findLastIndex (tableau, prédicat, [contexte])

Underscore.JS a de nombreuses méthodes faciles à utiliser qui aident à traiter les tableaux. Ce chapitre les aborde en détail.

Underscore.JS fournit diverses méthodes pour traiter les tableaux comme indiqué ci-dessous -

N ° Sr. Méthode et syntaxe
1 aplatir

_.flatten (tableau, [peu profond])

2 sans pour autant

_.without (tableau, * valeurs)

3 syndicat

_.union (* tableaux)

4 intersection

_.intersection (* tableaux)

5 différence

_.différence (tableau, * autres)

6 uniq

_.uniq (tableau, [isSorted], [iteratee])

sept Zip *: français

_.zip (* tableaux)

8 décompresser

_.unzip (tableau)

9 objet

_.object (liste, [valeurs])

dix tronçon

_.chunk (tableau, longueur)

11 intervalle

_.range ([start], stop, [step])

Underscore.JS a de nombreuses méthodes faciles à utiliser qui aident à gérer les fonctions. Ce chapitre les aborde en détail.

Underscore.JS fournit diverses méthodes pour gérer les fonctions énumérées ci-dessous -

N ° Sr. Méthode et syntaxe
1 lier

_.bind (fonction, objet, * arguments)

2 partiel

_.partial (fonction, * arguments)

3 mémoriser

_.memoize (fonction, [hashFunction])

4 retard

_.delay (fonction, attendre, * arguments)

5 une fois que

_.once (fonction)

6 avant

_.before (décompte, fonction)

sept emballage

_.wrap (fonction, wrapper)

8 nier

_.negate (prédicat)

9 composer

_.compose (* fonctions)

Underscore.JS a de nombreuses méthodes faciles à utiliser qui aident à mapper des objets. Ce chapitre les aborde en détail.

Underscore.JS fournit diverses méthodes pour gérer le mappage d'objets comme indiqué ci-dessous -

N ° Sr. Méthode et syntaxe
1 clés

_.keys (objet)

2 allKeys

_.allKeys (objet)

3 valeurs

_.values ​​(objet)

4 mapObject

_.mapObject (objet, iteratee, [contexte])

5 paires

_.pairs (objet)

6 inverser

_.invert (objet)

sept créer

_.create (prototype, accessoires)

8 les fonctions

_.functions (objet)

9 findKey

_.findKey (objet, prédicat, [contexte])

Underscore.JS a de nombreuses méthodes faciles à utiliser qui aident à mettre à jour les objets. Ce chapitre les aborde en détail.

Underscore.JS fournit diverses méthodes pour gérer les mises à jour d'objets comme indiqué ci-dessous -

N ° Sr. Méthode et syntaxe
1 étendre

_.extend (destination, * sources)

2 choisir

_.pick (objet, * clés)

3 omettre

_.omit (objet, * clés)

4 valeurs par défaut

_.defaults (objet, * par défaut)

5 cloner

_.clone (objet)

6 robinet

_.tap (objet, intercepteur)

sept a

_.has (objet, clé)

8 propriété

_.property (chemin)

9 propriété de

_.propertyOf (objet)

Underscore.JS a de nombreuses méthodes faciles à utiliser qui aident à comparer des objets. Ce chapitre les aborde en détail.

Underscore.JS fournit diverses méthodes pour gérer la comparaison d'objets comme indiqué ci-dessous -

N ° Sr. Méthode et syntaxe
1 matcher

_.matcher (attrs)

2 est égal

_.isEqual (objet, autre)

3 isMatch

_.isMatch (objet, propriétés)

4 est vide

_.isEmpty (objet)

5 isArray

_.isArray (objet)

6 isObject

_.isObject (valeur)

sept isArguments

_.isArguments (objet)

8 isFunction

_.isFunction (objet)

9 isString

_.isString (objet)

dix isNumber

_.isNumber (objet)

11 isFinite

_.isFinite (objet)

12 isBoolean

_.isBoolean (objet)

13 isDate

_.isDate (objet)

14 isRegExp

_.isRegExp (objet)

15 isError

_.isError (objet)

16 isSymbol

_.isSymbol (objet)

17 isMap

_.isMap (objet)

18 isWeakMap

_.isWeakMap (objet)

19 isSet

_.isSet (objet)

20 isWeakSet

_.isWeakSet (objet)

21 isNaN

_.isNaN (objet)

22 isNull

_.isNull (objet)

23 isUndefined

_.isUndefined (valeur)

Underscore.JS a de nombreuses méthodes utilitaires faciles à utiliser. Ce chapitre les aborde en détail.

Underscore.JS fournit diverses méthodes utilitaires énumérées ci-dessous -

N ° Sr. Méthode et syntaxe
1 identité

_.identité (valeur)

2 constant

_.constant (valeur)

3 noop

_.noop ()

4 fois

_.times (n, iteratee, [contexte])

5 Aléatoire

_.random (min, max)

6 mixin

_.mixin (objet)

sept itérer

_.iteratee (valeur, [contexte])

8 identifiant unique

_.uniqueId ([préfixe])

9 échapper

_.escape (chaîne)

dix unescape

_.unescape (chaîne)

11 résultat

_.result (objet, propriété, [defaultValue])

12 maintenant

_.maintenant()

13 modèle

_.template (templateString, [paramètres])

Underscore.JS a des méthodes pour créer une chaîne de méthodes et ensuite récupérer leur résultat efficace. Ce chapitre les aborde en détail.

Underscore.JS fournit diverses méthodes utilitaires énumérées ci-dessous -

N ° Sr. Méthode et syntaxe
1 chaîne

_.chain (objet)

2 valeur

_.chain (obj) .value ()