Lodash: un utile libreria JavaScript

Lodash

Lodash è una libreria JavaScript che mette a disposizione dei programmatori un’utility di funzioni utilizzate per risolvere una serie di problemi comuni attraverso la programmazione funzionale. Basato su Underscore.js, Lodash ha rapidamente avuto un grande successo per la maggiore consistenza delle funzioni offerte e al gran numero di funzioni messe a disposizione per lavorare con gli array, i numeri, gli oggetti, le stringhe, ecc.

Per poter utilizzare Lodash occorre importare il file all’interno della pagina web:

<script src="lodash.js"></script>


Oppure importarlo tramite il riferimento ad un CDN, ad esempio:

<script type="text/javascript" src="https://cdn.jsdelivr.net/lodash/4.13.1/lodash.min.js"></script>

Ecco una serie di funzioni messe a disposizione da Lodash che non saremo più costretti a riscrivere ogni volta:

  • Ciclo for per n volte: per effettuare un’iterazione per un certo numero di volte in JavaScript dovremmo scrivere:

        for(var i = 0; i < 5; i++) {
            // ....
        }

    In Lodash basterà scrivere:

        _.times(5, function(){
            // ...
        });

  • Ciclo su una collezione: dato un array con alcune persone con i nomi dei propri animali:

        var ownerArr = [{
            "owner": "Marco",
            "pets": [{"name":"Molly"}, {"name": "Black"}]
        }, {
            "owner": "Alex",
            "pets": [{"name":"Fido"}, {"name": "Argo"}]
        }];

    Per recuperare il nome del primo animale di ogni proprietario dovremo scrivere:

        ownerArr.map(function(owner){
            return owner.pets[0].name;
        });

    In Lodash ci basterà scrivere:

        _.map(ownerArr, 'pets[0].name');

  • Copia profonda in un oggetto: in JavaScirpt per copiare tutti i valori di un oggetto in un altro occorre scrivere molte righe di codice (esempio). Dato il seguente oggetto:

        var objA = {
            "name": "colin"
        }

    In Lodash possiamo scrivere:

        var objB = _.cloneDeep(objA);
        objB === objA // Restituisce false

  • Numero random in un intervallo: in JavaScript per ottenere un numero random occorre fare riferimento alla funzione

        Math.random():
        function getRandomNumber(min, max){
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }

    In Lodash viene messa a disposizione una funzione random a cui bisogna semplicemente passare come parametri gli estremi dell’intervallo:

        _.random(1, 20); // Ritorna un numero tra 1 e 20
        _.random(20); // Ritorna un numero tra 0 e 20
        _.random(1, 20, true); // Ritorna un numero con la virgola tra 1 e 20

  • Estendere gli oggetti: per aggiungere un oggetto ad un altro oggetto, dati i seguenti elementi:

        var objA = {"name": "Roberto", "car": "fiat"};
        var objB = {"name": "Luca", "age": 25};

    In JavaScript dovremo scrivere:

        Object.prototype.extend = function(obj) {
            for (var i in obj) {
                if (obj.hasOwnProperty(i)) {
                    this[i] = obj[i];
                }
            }
        };

        objA.extend(objB);

    In Lodash basterà scrivere

        _.assign(objA, objB);

  • Selezionare un elemento random da una lista:

        var luckyDraw = ["Colin", "John", "James", "Lily", "Mary"];

        function pickRandomPerson(luckyDraw){
            var index = Math.floor(Math.random() * (luckyDraw.length -1));
            return luckyDraw[index];
        }

        pickRandomPerson(luckyDraw);

    In Lodash possiamo scrivere:

        _.sample(luckyDraw);

    Il metodo _.sample può restituire anche più elementi, ad esempio per 2 elementi scriveremo:

        _.sample(luckyDraw, 2);

Lodash offre tantissime funzioni di utilità comune, come _.isArray, _.isEmpty, _.isNull, _.isNaN, _.min e _.max, _.merge e _.isEqual. Per una lista completa di tutte le funzionalità messe a disposizione da Lodash vi rimando al sito ufficiale.

Credit link: colintoh.com

Pubblicato in Front-end, JavaScript, Programmazione Taggato con: , ,

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

*