Un'introduzione a Lodash e ai suoi vantaggi per gli sviluppatori JavaScript
Lodash è una libreria di utilità per potenziare il tuo codice JavaScript e semplificare le nozioni di base.
Lodash è una libreria JavaScript che offre funzioni di utilità per attività di programmazione tipiche utilizzando il modello di programmazione funzionale.
La libreria, che funziona con browser Web e Node.js, può modificare e convertire dati, eseguire operazioni asincrone e altro ancora.
Scopri come utilizzare lodash per manipolare array, stringhe e oggetti e scopri le sue funzionalità avanzate come la composizione delle funzioni.
Iniziare con Lodash
Puoi aggiungere lodash alla tua app in due modi: utilizzando una rete per la distribuzione di contenuti (CDN) o installandolo utilizzando npm o Yarn.
Per utilizzare lodash direttamente nel browser, copia il collegamento CDN lodash di seguito e inseriscilo nella sezione head del tuo file HTML:
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"
type="text/javascript"></script>
Utilizzando questo approccio, puoi eseguire script utilizzando lodash nel corpo del tuo HTML.
Per utilizzare lodash in un progetto Node.js, devi installarlo nella directory del tuo progetto. Puoi usare npm o Yarn per farlo:
npm install --save lodash
# or
yarn add lodash
Ora puoi utilizzare lodash richiedendolo nel tuo file JavaScript:
// Requiring the lodash library
const _ = require("lodash");
// Using the _.sum method
const numbers = [10, 20, 30, 40, 50];
const sum = _.sum(numbers);
console.log(sum);
Per eseguire il file JavaScript, inserisci il comando node:
node [Your script name]
Manipolazione degli array in Lodash
Lodash viene fornito con una serie di metodi per la manipolazione degli array che forniscono funzionalità oltre la classe Array incorporata di JavaScript.
.pezzo
Questo metodo divide un array in gruppi di array più piccoli di una determinata dimensione. Il pezzo finale potrebbe essere più piccolo della dimensione richiesta.
Ecco un esempio:
const array = [ 'a', 'b', 'c', 'd', 'e', 'f', 'g' ];
const newArray = _.chunk(array, 2)
console.log(newArray)
// Output:
// [ [ 'a', 'b' ], [ 'c', 'd' ], [ 'e', 'f' ], [ 'g' ] ]
.concat
Questo metodo genera un nuovo array concatenando i valori alla fine di un array esistente.
Per esempio:
const array = [ 1, 2, 'a' ];
const newArray = _.concat(array, 5, 'b', [ 8 ], [ [ 9 ] ]);
console.log(newArray);
// Output:
// [ 1, 2, 'a', 5, 'b', 8, [ 9 ] ]
.giuntura
Questo metodo restituisce una stringa combinando gli elementi di un array. Li unisce utilizzando un delimitatore che passi come parametro quando chiami il metodo. Il delimitatore predefinito che utilizza è una virgola:
const array = [ "l", "o", "d", "a", "s", "h" ];
const newArray = _.join(array);
console.log(newArray);
// Output:
// l,o,d,a,s,h
const newArray = _.join(array, "-");
console.log(newArray);
// Output:
// l-o-d-a-s-h
Manipolazione delle stringhe in Lodash
Con JavaScript semplice, la formattazione delle stringhe è un processo semplice. Ma lodash lo rende ancora più semplice.
Alcune delle operazioni di manipolazione delle stringhe più comuni che puoi eseguire con lodash includono:
.startsWith e .endsWith
Questi due metodi controllano rispettivamente se una stringa inizia o termina con una sottostringa. Entrambi i metodi restituiscono un valore booleano true o false.
Per esempio:
const string = "lodash";
console.log(_.startsWith(string, "l"));
// Output: true
console.log(_.startsWith(string, "o"));
// Output: false
console.log(_.endsWith(string, "m"));
// Output: false
console.log(_.endsWith(string, "h"));
// Output: true
.ripetere
Questo metodo stampa ripetutamente una stringa un numero specifico di volte. Prende la stringa come primo argomento e il numero di ripetizioni come secondo:
const string = "lodash"
const newString = _.repeat(string, 3);
console.log(newString);
// Output: lodashlodashlodash
.ordinare
Questo metodo rimuove gli spazi bianchi iniziali e finali. Puoi anche usarlo per rimuovere qualsiasi carattere specifico all'inizio e alla fine di una stringa.
Per esempio:
// Removing leading & trailing whitespace
const string = " bar "
const newString = _.trim(string)
console.log(newString);
// Output: bar
// Removing specified characters
const string = ",bar,"
const newString = _.trim(string, ",")
console.log(newString);
// Output: bar
Manipolazione di oggetti in Lodash
Di seguito sono riportati alcuni esempi di manipolazione delle stringhe che puoi eseguire con lodash:
.unire
Il metodo _.merge() crea un nuovo oggetto combinando le proprietà degli oggetti di input. Il valore di una proprietà dell'oggetto successivo sostituirà il valore dell'oggetto precedente se la proprietà è presente in più di un oggetto.
Per esempio:
const books = {
'Mathematics': 4,
'Science': 7
};
const notes = {
'Science': 3 ,
'Chemistry': 5
};
_.merge(books, notes);
console.log(books);
// Output:
// { Mathematics: 4, Science: 3, Chemistry: 5 }
In questo esempio, il metodo aggiunge la proprietà "Chimica" del secondo oggetto e sovrascrive il valore della proprietà "Scienza" del primo oggetto.
.ha
Questo metodo restituisce true se in un oggetto esiste una determinata serie di proprietà e false altrimenti.
Per esempio:
const books = {
'Mathematics': 4,
'Science': 7
};
console.log(_.has(books, "Mathematics"));
// Output: true
.omettere
Questo metodo restituisce un nuovo oggetto rimuovendo le proprietà specificate da quello specificato.
Per esempio:
var books = {
'Mathematics': 4,
'Science': 3 ,
'Chemistry': 5
};
console.log(_.omit(books, "Science"));
// Output: { Mathematics: 4, Chemistry: 5 }
Composizione delle funzioni in Lodash
La composizione di funzioni è una tecnica che puoi utilizzare in un linguaggio di programmazione funzionale. Implica la combinazione di due o più funzioni in una nuova funzione chiamando ciascuna funzione in un ordine particolare. Questa funzionalità consente di creare una logica più complessa da funzioni più semplici.
Per applicare questa tecnica, lodash viene fornito con le funzioni _.flow e _.flowRight. La funzione _.flow() accetta un elenco di funzioni come argomenti e restituisce una nuova funzione che applica le funzioni nello stesso ordine in cui le passi. La funzione _.flowRight()< La funzione fa lo stesso, ma chiama le funzioni al contrario.
Per esempio:
function addFive(number) {
return number + 5
}
function timesTwo(number) {
return number * 2
}
const addFiveAndTimesTwo = _.flow([addFive, timesTwo]);
const addFiveAndTimesTwoReverse = _.flowRight([addFive, timesTwo]);
console.log(addFiveAndTimesTwo(3));
// Output: 16
console.log(addFiveAndTimesTwoReverse(3));
// Output: 11
Il codice precedente definisce le funzioni addFive e timesTwo. La funzione addFive restituisce il risultato dell'aggiunta di 5 a un determinato numero. La funzione timesTwo moltiplica un numero di input per 2 e restituisce il risultato.
Il codice utilizza quindi la funzione _.flow() per combinare le altre due e produrre la nuova funzione, addFiveAndTimesTwo. Questa nuova funzione eseguirà innanzitutto l'operazione addFive sul suo argomento prima di eseguire l'operazione timesTwo sul risultato finale.
La funzione _.flowRight() produce una nuova funzione che fa la stessa cosa di flow, ma al contrario.
Infine, questo codice chiama le due nuove funzioni, passando 3, come argomento, e registra i risultati sulla console.
I vantaggi di lavorare con Lodash
Puoi utilizzare lodash per semplificare il tuo codice e rendere i tuoi progetti più flessibili e gestibili. La sua vasta gamma di funzioni di utilità, l'adozione diffusa e gli aggiornamenti regolari ti aiuteranno a scrivere codice elegante ed efficace. Puoi utilizzare lodash per garantire che il tuo codice sia sempre aggiornato e compatibile con i browser contemporanei.