Underscore.JS - Guida rapida
Underscore.JS è una popolare libreria basata su javascript che fornisce oltre 100 funzioni per facilitare lo sviluppo web. Fornisce funzioni di supporto come mappa, filtro, invocazione e associazione di funzioni, modelli javascript, controlli di uguaglianza approfonditi, creazione di indici e così via. Underscore.JS può essere utilizzato direttamente all'interno di un browser e anche con Node.js.
Lavorare con oggetti usando JavaScript può essere piuttosto impegnativo, in particolare se devi manipolarli molto. Underscore è dotato di molte funzioni che facilitano il lavoro con gli oggetti.
Underscore.JS è un progetto open source e puoi facilmente contribuire alla libreria e aggiungere funzionalità sotto forma di plugin e renderlo disponibile su GitHub e in Node.js.
Caratteristiche
Cerchiamo di comprendere in dettaglio tutte le funzionalità importanti disponibili con Underscore -
Collezioni
Underscore.JS fornisce varie funzioni per le raccolte come ciascuna, map, reduce che vengono utilizzate per applicare un'operazione su ogni elemento di una raccolta. Fornisce metodi come groupBy, countBy, max, min che elabora le raccolte e facilita molte attività.
Arrays
Underscore.JS fornisce varie funzioni per array come l'iterazione e l'elaborazione di array come first, initial, lastIndexOf, intersection, difference ecc.
Funzioni
Underscore.JS fornisce funzioni come bind, delay, before, after etc.
Oggetti
Underscore.JS fornisce funzioni per manipolare oggetti, mappare oggetti e confrontare oggetti. Ad esempio, keys, values, extends, extendsOwn, isEqual, isEmpty ecc.
Utilità
Underscore.JS fornisce vari metodi di utilità come noConflict, random, iteratee, escape ecc.
Concatenamento
Underscore.JS fornisce metodi di concatenamento e catena, valore.
Nei capitoli successivi tratteremo le funzioni importanti di Underscore.JS
In questo capitolo imparerai in dettaglio come configurare l'ambiente di lavoro di Underscore.JS sul tuo computer locale. Prima di iniziare a lavorare su Underscore.JS, devi avere accesso alla libreria. È possibile accedere ai suoi file in uno dei seguenti metodi:
Metodo 1: utilizzo del file Underscore.JS nel browser
In questo metodo, avremo bisogno del file Underscore.JS dal suo sito Web ufficiale e lo utilizzeremo direttamente nel browser.
Passo 1
Come primo passo, vai al sito ufficiale di Underscore.JS https://underscorejs.org/.
Si noti che è disponibile un'opzione di download che fornisce l'ultimo file di sottolineatura-min.js UMD (Produzione) disponibile. Fare clic con il pulsante destro del mouse sul collegamento e scegliere Salva con nome. Notare che il file è disponibile con e senza minimizzazione.
Passo 2
Ora includi underscore-min.js dentro il scripttag e inizia a lavorare con Underscore.JS. Per questo, puoi utilizzare il codice fornito di seguito:
<script type = "text/JavaScript" src = "https://underscorejs.org/underscore-min.js"></script>Qui viene fornito un esempio funzionante e il suo output per una migliore comprensione -
Esempio
<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>Produzione
Metodo 2: utilizzo di Node.js
Se stai optando per questo metodo, assicurati di averlo fatto Node.js e npminstallato sul tuo sistema. È possibile utilizzare il seguente comando per installare Underscore.JS -
npm install underscoreÈ possibile osservare il seguente output una volta installato con successo Underscore.JS -
+ [email protected]
added 1 package from 1 contributor and audited 1 package in 6.331s
found 0 vulnerabilitiesOra, per verificare se Underscore.JS funziona bene con Node.js, crea il file tester.js e aggiungi il codice seguente:
var _ = require('underscore');
var numbers = [1, 2, 3, 4];
var listOfNumbers = '';
_.each(numbers, function(x) { listOfNumbers += x + ' ' });
console.log(listOfNumbers);Salvare il programma sopra in formato tester.js. I seguenti comandi vengono utilizzati per compilare ed eseguire questo programma.
Comando
\>node tester.jsProduzione
1 2 3 4Underscore.JS ha molti metodi facili da usare che aiutano nell'iterazione delle collezioni. Questo capitolo li discute in dettaglio.
Underscore.JS fornisce vari metodi per iterare le raccolte come elencato di seguito:
| Sr.No. | Metodo e sintassi |
|---|---|
| 1 | ogni _.each (list, iteratee, [context]) |
| 2 | carta geografica _.map (lista, iterazione, [contesto]) |
| 3 | ridurre _.reduce (list, iteratee, [memo], [context]) |
| 4 | reduceRight _.reduceRight (list, iteratee, [memo], [context]) |
| 5 | trova _.find (elenco, predicato, [contesto]) |
| 6 | filtro _.filter (elenco, predicato, [contesto]) |
| 7 | dove _.where (elenco, proprietà) |
| 8 | findWhere _.findWhere (elenco, proprietà) |
| 9 | rifiutare _.reject (elenco, predicato, [contesto]) |
| 10 | ogni _.every (elenco, [predicato], [contesto]) |
| 11 | alcuni _.some (list, [predicate], [context]) |
Underscore.JS ha molti metodi facili da usare che aiutano nell'elaborazione delle raccolte. Questo capitolo li discute in dettaglio.
Underscore.JS fornisce vari metodi per elaborare le raccolte come elencato di seguito:
| Sr.No. | Metodo e sintassi |
|---|---|
| 1 | contiene _.contains (list, value, [fromIndex]) |
| 2 | invocare _.invoke (list, methodName, * argomenti) |
| 3 | cogliere _.pluck (list, propertyName) |
| 4 | max _.max (list, [iteratee], [context]) |
| 5 | min _.min (list, [iteratee], [context]) |
| 6 | ordina per _.sortBy (list, iteratee, [context]) |
| 7 | raggruppa per _.groupBy (list, iteratee, [context]) |
| 8 | indexBy _.indexBy (list, iteratee, [context]) |
| 9 | countBy _.countBy (list, iteratee, [context]) |
| 10 | mescolare _.shuffle (elenco) |
| 11 | campione _.sample (list, [n]) |
| 12 | toArray _.toArray (elenco) |
| 13 | taglia _.size (elenco) |
| 14 | partizione _.partition (elenco, predicato) |
| 15 | compatto _.compact (elenco) |
Underscore.JS ha molti metodi facili da usare che aiutano a iterare gli array. Questo capitolo li discute in dettaglio.
Underscore.JS fornisce vari metodi per iterare gli array come elencato di seguito:
| Sr.No. | Metodo e sintassi |
|---|---|
| 1 | primo _.first (array, [n]) |
| 2 | iniziale _.initial (array, [n]) |
| 3 | scorso _.last (array, [n]) |
| 4 | riposo _.rest (array, [index]) |
| 5 | indice di _.indexOf (array, value, [isSorted]) |
| 6 | lastIndexOf _.lastIndexOf (array, value, [fromIndex]) |
| 7 | SortIndex _.sortedIndex (array, value, [iteratee], [context]) |
| 8 | findIndex _.findIndex (matrice, predicato, [contesto]) |
| 9 | findLastIndex _.findLastIndex (matrice, predicato, [contesto]) |
Underscore.JS ha molti metodi facili da usare che aiutano nell'elaborazione degli array. Questo capitolo li discute in dettaglio.
Underscore.JS fornisce vari metodi per elaborare gli array come elencato di seguito:
| Sr.No. | Metodo e sintassi |
|---|---|
| 1 | appiattire _.flatten (array, [shallow]) |
| 2 | senza _.without (array, * valori) |
| 3 | unione _.union (* array) |
| 4 | intersezione _.intersection (* array) |
| 5 | differenza _.difference (array, * altri) |
| 6 | uniq _.uniq (array, [isSorted], [iteratee]) |
| 7 | cerniera lampo _.zip (* array) |
| 8 | decomprimere _.unzip (array) |
| 9 | oggetto _.object (elenco, [valori]) |
| 10 | pezzo _.chunk (array, lunghezza) |
| 11 | gamma _.range ([start], stop, [step]) |
Underscore.JS ha molti metodi facili da usare che aiutano nella gestione delle funzioni. Questo capitolo li discute in dettaglio.
Underscore.JS fornisce vari metodi per gestire le funzioni come elencato di seguito:
| Sr.No. | Metodo e sintassi |
|---|---|
| 1 | legare _.bind (funzione, oggetto, * argomenti) |
| 2 | parziale _.partial (funzione, * argomenti) |
| 3 | memoize _.memoize (funzione, [hashFunction]) |
| 4 | ritardo _.delay (funzione, attesa, * argomenti) |
| 5 | una volta _.once (funzione) |
| 6 | prima _.before (count, function) |
| 7 | avvolgere _.wrap (funzione, wrapper) |
| 8 | negare _.negate (predicato) |
| 9 | comporre _.compose (* funzioni) |
Underscore.JS ha molti metodi facili da usare che aiutano a mappare gli oggetti. Questo capitolo li discute in dettaglio.
Underscore.JS fornisce vari metodi per gestire la mappatura degli oggetti come elencato di seguito:
| Sr.No. | Metodo e sintassi |
|---|---|
| 1 | chiavi _.keys (oggetto) |
| 2 | allKeys _.allKeys (oggetto) |
| 3 | valori _.values (oggetto) |
| 4 | mapObject _.mapObject (oggetto, iterazione, [contesto]) |
| 5 | coppie _.pairs (oggetto) |
| 6 | invertire _.invert (oggetto) |
| 7 | creare _.create (prototype, props) |
| 8 | funzioni _.functions (oggetto) |
| 9 | findKey _.findKey (oggetto, predicato, [contesto]) |
Underscore.JS ha molti metodi facili da usare che aiutano ad aggiornare gli oggetti. Questo capitolo li discute in dettaglio.
Underscore.JS fornisce vari metodi per gestire gli aggiornamenti degli oggetti come elencato di seguito:
| Sr.No. | Metodo e sintassi |
|---|---|
| 1 | estendere _.extend (destinazione, * sorgenti) |
| 2 | scegliere _.pick (oggetto, * chiavi) |
| 3 | omettere _.omit (oggetto, * chiavi) |
| 4 | impostazioni predefinite _.defaults (oggetto, * predefiniti) |
| 5 | clone _.clone (oggetto) |
| 6 | rubinetto _.tap (oggetto, intercettore) |
| 7 | ha _.has (oggetto, chiave) |
| 8 | proprietà _.property (percorso) |
| 9 | proprietà di _.propertyOf (oggetto) |
Underscore.JS ha molti metodi facili da usare che aiutano a confrontare gli oggetti. Questo capitolo li discute in dettaglio.
Underscore.JS fornisce vari metodi per gestire il confronto degli oggetti come elencato di seguito:
| Sr.No. | Metodo e sintassi |
|---|---|
| 1 | matcher _.matcher (attrs) |
| 2 | è uguale _.isEqual (oggetto, altro) |
| 3 | isMatch _.isMatch (oggetto, proprietà) |
| 4 | è vuoto _.isEmpty (oggetto) |
| 5 | isArray _.isArray (oggetto) |
| 6 | isObject _.isObject (valore) |
| 7 | isArguments _.isArguments (oggetto) |
| 8 | isFunction _.isFunction (oggetto) |
| 9 | isString _.isString (oggetto) |
| 10 | isNumber _.isNumber (oggetto) |
| 11 | isFinite _.isFinite (oggetto) |
| 12 | isBoolean _.isBoolean (oggetto) |
| 13 | isDate _.isDate (oggetto) |
| 14 | isRegExp _.isRegExp (oggetto) |
| 15 | isError _.isError (oggetto) |
| 16 | isSymbol _.isSymbol (oggetto) |
| 17 | isMap _.isMap (oggetto) |
| 18 | isWeakMap _.isWeakMap (oggetto) |
| 19 | è impostato _.isSet (oggetto) |
| 20 | isWeakSet _.isWeakSet (oggetto) |
| 21 | isNaN _.isNaN (oggetto) |
| 22 | è zero _.isNull (oggetto) |
| 23 | isUndefined _.isUndefined (valore) |
Underscore.JS ha molti metodi di utilità facili da usare. Questo capitolo li discute in dettaglio.
Underscore.JS fornisce vari metodi di utilità come elencato di seguito:
| Sr.No. | Metodo e sintassi |
|---|---|
| 1 | identità _.identity (value) |
| 2 | costante _.constant (valore) |
| 3 | noop _.noop () |
| 4 | volte _.times (n, iteratee, [context]) |
| 5 | casuale _.random (min, max) |
| 6 | mixin _.mixin (oggetto) |
| 7 | iterate _.iteratee (valore, [contesto]) |
| 8 | uniqueId _.uniqueId ([prefix]) |
| 9 | fuga _.escape (stringa) |
| 10 | unescape _.unescape (stringa) |
| 11 | risultato _.result (oggetto, proprietà, [defaultValue]) |
| 12 | adesso _.adesso() |
| 13 | modello _.template (templateString, [impostazioni]) |
Underscore.JS ha metodi per creare una catena di metodi e quindi recuperare il loro risultato effettivo. Questo capitolo li discute in dettaglio.
Underscore.JS fornisce vari metodi di utilità come elencato di seguito:
| Sr.No. | Metodo e sintassi |
|---|---|
| 1 | catena _.chain (oggetto) |
| 2 | valore _.chain (obj) .value () |