JScript Katana

Guida a Underscore.js: Semplifica gli Array, gli Oggetti e le Funzioni JavaScript

Librerie esterne
佐川 直弘 | Naohiro Sagawa
By 佐川 直弘 | Naohiro Sagawa (運営者)
※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　
目次

1. Introduzione

JavaScript è un linguaggio di programmazione essenziale per lo sviluppo web, ma lavorare con array e oggetti può spesso rendere il codice complesso. In particolare per operazioni come il filtraggio e la trasformazione dei dati, un codice conciso ed efficiente è altamente desiderabile. È qui che la libreria JavaScript Underscore.js risulta utile. Utilizzando questa libreria, puoi semplificare il modo in cui vengono scritte le manipolazioni complesse dei dati.

I Vantaggi di Underscore.js

  1. Codice Più Pulito
  • Con il JavaScript tradizionale, certi processi tendono a diventare verbosi, ma con Underscore.js, possono spesso essere scritti in poche righe.
  1. Ampio Set di Funzioni Utility
  • Fornisce numerose funzionalità per la manipolazione degli array, la gestione degli oggetti e il controllo delle funzioni.
  1. Leggero e Flessibile
  • Puoi utilizzare solo le funzioni di cui hai bisogno, mantenendo il sovraccarico di performance al minimo.

Cosa Imparerai in Questo Articolo

  • Come configurare Underscore.js
  • Funzioni di base ed esempi pratici
  • Casi d’uso reali per lo sviluppo

2. Cos’è Underscore.js?

Panoramica di Underscore.js

Underscore.js è una libreria JavaScript leggera progettata per semplificare la manipolazione dei dati. Fornisce un’ampia gamma di funzioni utility principalmente per lavorare efficientemente con array e oggetti, spesso indicata come un toolkit di utility JavaScript. Sebbene JavaScript abbia potenti funzionalità integrate, il codice può talvolta diventare lungo o difficile da leggere. Utilizzando Underscore.js, puoi risolvere questi problemi e scrivere codice più pulito e manutenibile.

Caratteristiche Principali

  1. Funzioni Utility Complete
  • Offre funzioni per manipolazione degli array , gestione degli oggetti , e controllo delle funzioni , tra le altre.
  1. Codice Semplificato e Leggibile
  • Rispetto al JavaScript tradizionale, riduce il codice boilerplate e migliora la leggibilità.
  1. Nessuna Dipendenza
  • Non si basa su altre librerie, rendendolo flessibile per l’integrazione.
  1. Leggero e Veloce
  • La sua piccola dimensione e l’impatto minimo sulle performance lo rendono adatto anche per applicazioni web moderne.

Underscore.js vs. Lodash

Una libreria comunemente confrontata con Underscore.js è Lodash. Lodash è stato costruito su Underscore.js e ne estende le capacità. Ecco alcune differenze:

FeatureUnderscore.jsLodash
FunctionalityProvides many basic utility functionsExpanded functionality with more features
Modular SupportPartially supportedFully modular
PerformanceFastFast and further optimized

La scelta dipende dai requisiti del tuo progetto. Se hai bisogno di una libreria semplice e leggera, Underscore.js è più adatta.

Quando è Utile Underscore.js?

Underscore.js eccelle nei seguenti scenari:

  1. Lavorare con Array
  • Esegui filtraggio, mappatura e altre operazioni sugli array con una sintassi concisa.
  1. Gestire Oggetti
  • Recupera facilmente chiavi, valori o unisci proprietà degli oggetti.
  1. Controllare Funzioni
  • Implementa esecuzione una tantum, esecuzione ritardata e altri pattern di controllo delle funzioni con facilità.
  1. Funzioni Utility
  • Usalo per l’ordinamento, la randomizzazione o persino come un semplice motore di template.

3. Come Installare

In questa sezione, passeremo attraverso i passaggi specifici per aggiungere Underscore.js al tuo progetto. Copriremo l’uso di un CDN, l’installazione tramite npm o yarn, il download manuale dei file e l’integrazione con bundler di moduli.

1. Usare un CDN

Un CDN (Content Delivery Network) ti permette di utilizzare librerie ospitate su internet semplicemente aggiungendo un link. Inserisci il seguente codice nel tag <head> o alla fine del tag <body> nel tuo file HTML:

Esempio: Aggiungere a un file HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Using Underscore.js</title>
  <!-- Underscore.js CDN Link -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.6/underscore-min.js"></script>
</head>
<body>
  <h1>Testing Underscore.js</h1>
  <script>
    // Test code
    const data = [1, 2, 3, 4, 5];
    const evenNumbers = _.filter(data, function(num) {
      return num % 2 === 0;
    });
    console.log(evenNumbers); // [2, 4]
  </script>
</body>
</html>

Quando aperto in un browser, la console dello sviluppatore mostrerà solo i numeri pari.

2. Install con npm o yarn

Puoi anche installare Underscore.js nel tuo ambiente locale o in un progetto Node.js.

Utilizzo di npm

npm install underscore

Utilizzo di yarn

yarn add underscore

Esempio di importazione in JavaScript

import _ from 'underscore';

const data = [10, 20, 30, 40];
const result = _.map(data, (num) => num * 2);
console.log(result); // [20, 40, 60, 80]

3. Download del file

  1. Vai al sito ufficiale: underscorejs.org
  2. Scarica il file JavaScript più recente dalla sezione “Download”.
  3. Posiziona il file scaricato nella cartella del tuo progetto (es.js/` ).
  4. Collegalo nel tuo HTML usando un tag script.
    <script src="js/underscore-min.js"></script>

4. Utilizzo di un bundler di moduli

Se usi Webpack o Parcel, è altrettanto semplice:

Esempio con Webpack

  1. Installa via npm:
    npm install underscore
  1. Importa nel tuo file JavaScript:
    import _ from 'underscore';
  1. Esegui il bundle e utilizza come necessario.

Risoluzione dei problemi

1. “Uncaught ReferenceError: _ is not”

  • Underscore.js potrebbe non essere stato caricato correttamente. Controlla il link CDN o il percorso di importazione.

2. Errori dopo l’installazione con npm

  • Assicurati che Node.js e npm siano aggiornati allultima versione.

4. Uso di base

In questa sezione introdurremo alcune delle funzioni principali dierscore.js con esempi. Queste funzioni sono particolarmente utili per semplificare le operazioni su array e oggetti.

1. Iterare sugli array – _.each()

_.each() itera su array o oggetti.

Esempio

const numbers = [1, 2, 3, 4, 5];

// Print each element to the console
_.each(numbers, function(num) {
  console.log(num);
});

Output:

1
2
3
4
5

Punti chiave:

  • Funziona sia con gli array sia con gli oggetti.
  • La callback riceve l’elemento, l’indice e l’intera collezione.

2. Mappare gli array – _.map()

_.map() applica una funzione a ciascun elemento di un array e restituisce un nuovo array.

Esempio

const numbers = [1, 2, 3, 4, 5];

// Double each element
const doubled = _.map(numbers, function(num) {
  return num * 2;
});

console.log(doubled);

Output:

[2, 4, 6, 8, 10]

3. Trovare il primo elemento corrispondente – _.find()

_.find() restituisce il primo elemento che soddisfa una condizione.

Esempio

const numbers = [1, 2, 3, 4, 5];

// Find the first element greater than or equal to 3
const result = _.find(numbers, function(num) {
  return num >= 3;
});

console.log(result);

Output:

3

4. Filtrare gli elementi – _.filter()

_.filter() estrae tutti gli elementi che soddisfano una condizione in un nuovo array.

Esempio

const numbers = [1, 2, 3, 4, 5];

// Get only even numbers
const evens = _.filter(numbers, function(num) {
  return num % 2 === 0;
});

console.log(evens);

Output:

[2, 4]

5. Mescolare gli elementi – _.shuffle()

_.shuffle() randomizza l’ordine degli elementi in un array.

Esempio

const numbers = [1, 2, 3, 4, 5];

// Shuffle the array
const shuffled = _.shuffle(numbers);

console.log(shuffled);

Output: (esempio)

[3, 5, 1, 4, 2]

6. Rimuovere i duplicati – _.uniq()

_.uniq() rimuove gli elementi duplicati da un array.

Esempio

const numbers = [1, 2, 2, 3, 4, 4, 5];

// Remove duplicates
const uniqueNumbers = _.uniq(numbers);

console.log(uniqueNumbers);

Output:

[1, 2, 3, 4, 5]

Riepilogo

Finora abbiamo esaminato alcune delle funzioni fondamentali di Underscore.js:

  • _.each() per l’iterazione
  • _.map() per creare nuovi array
  • _.find() e _.filter() per il matching condizionale
  • _.shuffle() per randomizzare gli elementi
  • _.uniq() per rimuovere i duplicati

5. Uso avanzato

In questa sezione, esploreremo funzioni più avanzate in Underscore.js. Queste permettono una manipolazione e analisi dei dati più potenti.

1. Ordinamento Array – _.sortBy()

_.sortBy() ordina un array in base a una chiave o condizione data.

Esempio

const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 20 },
  { name: 'Charlie', age: 30 }
];

// Sort by age
const sortedUsers = _.sortBy(users, 'age');

console.log(sortedUsers);

Output:

[
  { name: 'Bob', age: 20 },
  { name: 'Alice', age: 25 },
  { name: 'Charlie', age: 30 }
]

2. Raggruppamento Dati – _.groupBy()

_.groupBy() raggruppa elementi in un array in base a una chiave o condizione.

Esempio

const numbers = [1.1, 2.3, 2.4, 3.5, 4.7];

// Group by integer part
const grouped = _.groupBy(numbers, function(num) {
  return Math.floor(num);
});

console.log(grouped);

Output:

{
  1: [1.1],
  2: [2.3, 2.4],
  3: [3.5],
  4: [4.7]
}

3. Conteggio Dati – _.countBy()

_.countBy() rende facile contare gli elementi in base a una condizione.

Esempio

const words = ['apple', 'banana', 'apricot', 'blueberry'];

// Count by first letter
const counts = _.countBy(words, function(word) {
  return word[0];
});

console.log(counts);

Output:

{
  a: 2,
  b: 2
}

Riepilogo

In questa sezione, abbiamo coperto casi d’uso avanzati di Underscore.js:

  • _.sortBy() per ordinare array
  • _.groupBy() e _.countBy() per raggruppare e contare dati

6. Operazioni sugli Oggetti

In questa sezione, copriremo funzioni utili di Underscore.js per lavorare con oggetti. Queste funzioni rendono più facile processare chiavi, valori e proprietà degli oggetti in modo efficiente.

1. Recupero Chiavi e Valori

Ottieni Chiavi – _.keys()

const person = { name: 'Alice', age: 25, city: 'Tokyo' };

const keys = _.keys(person);
console.log(keys);

Output:

['name', 'age', 'city']

Ottieni Valori – _.values()

const values = _.values(person);
console.log(values);

Output:

['Alice', 25, 'Tokyo']

2. Clonazione Oggetti – _.clone()

_.clone() crea una copia superficiale di un oggetto.

const original = { name: 'Alice', age: 25 };
const clone = _.clone(original);

clone.age = 30; // Modify the clone
console.log(original.age); // 25
console.log(clone.age);    // 30

Riepilogo

In questa sezione, abbiamo introdotto funzioni relative agli oggetti in Underscore.js:

  • _.keys() e _.values() per recuperare chiavi e valori
  • _.clone() per creare copie superficiali

7. Operazioni sulle Funzioni

In questa sezione, esploreremo come Underscore.js ti aiuti a controllare e ottimizzare il comportamento delle funzioni. Queste utility sono particolarmente utili per il controllo dell’esecuzione e l’ottimizzazione delle prestazioni.

1. Binding Funzioni – _.bind()

_.bind() lega una funzione a un oggetto specifico, garantendo che this si riferisca sempre a quell’oggetto.

Esempio

const person = {
  name: 'Alice',
  greet: function(greeting) {
    return `${greeting}, my name is ${this.name}`;
  }
};

const boundGreet = _.bind(person.greet, person);

console.log(boundGreet('Hello')); // Hello, my name is Alice

2. Ritardo Esecuzione – _.delay()

_.delay() ritarda l’esecuzione di una funzione per un intervallo di tempo specificato.

Esempio

_.delay(function(message) {
  console.log(message);
}, 2000, 'Displayed after 2 seconds');

Output: (dopo 2 secondi)

Displayed after 2 seconds

3. Esecuzione Una Volta – _.once()

_.once() garantisce che una funzione venga eseguita solo la prima volta che viene chiamata.

Esempio

const initialize = _.once(function() {
  console.log('Initialization complete');
});

initialize(); // Runs
initialize(); // Ignored

4. Memoizzazione – _.memoize()

_.memoize() memorizza nella cache i risultati di una funzione, saltando il ricalcolo per gli stessi input.

Esempio

const factorial = _.memoize(function(n) {
  return n <= 1 ? 1 : n * factorial(n - 1);
});

console.log(factorial(5)); // Computed
console.log(factorial(5)); // Retrieved from cache

5. Limitazione dell’esecuzione – _.throttle()

_.throttle() garantisce che una funzione venga eseguita al massimo una volta entro un determinato intervallo di tempo.

Esempio

const log = _.throttle(function() {
  console.log('Processing...');
}, 2000);

// Simulate rapid events
setInterval(log, 500); // Executes only once every 2 seconds

Riepilogo

Questa sezione ha introdotto le utility relative alle funzioni in Underscore.js:

  • _.bind() per fissare this
  • _.delay() per l’esecuzione ritardata
  • _.once() per l’inizializzazione una tantum
  • _.memoize() per memorizzare nella cache i risultati
  • _.throttle() per limitare il tasso di esecuzione

8. Funzioni di utilità

In questa sezione, copriremo alcune delle utili funzioni di utilità fornite da Underscore.js. Queste funzioni possono essere applicate in una vasta gamma di situazioni, come la generazione di valori casuali, il controllo dello stato dei dati o il lavoro con i template.

1. Generazione di numeri casuali – _.random()

_.random() genera un intero o un numero a virgola mobile casuale entro un intervallo specificato.

Esempio

console.log(_.random(1, 10)); // Integer
console.log(_.random(1, 10, true)); // Floating point

2. Verifica di valori vuoti – _.isEmpty()

_.isEmpty() verifica se un array, un oggetto o una stringa è vuoto.

Esempio

console.log(_.isEmpty([]));        // true
console.log(_.isEmpty({}));        // true
console.log(_.isEmpty(''));        // true
console.log(_.isEmpty([1, 2, 3])); // false

3. Creazione di template – _.template()

_.template() è usato per creare semplici template di stringhe.

Esempio

const template = _.template('Hello, <%= name %>!');
console.log(template({ name: 'Alice' }));

Output:

Hello, Alice!

Riepilogo

Ecco le funzioni di utilità che abbiamo introdotto:

  • _.random() per generare numeri casuali
  • _.isEmpty() per verificare se le strutture dati sono vuote
  • _.template() per creare semplici template

9. Conclusione

In questo articolo, abbiamo esplorato Underscore.js dalle basi ai casi d’uso più avanzati. Questa libreria è molto efficace per semplificare la manipolazione dei dati e scrivere codice JavaScript efficiente e manutenibile.

Riepilogo

  1. Uso di base – Abbiamo appreso le funzioni fondamentali per lavorare con array e oggetti.
  2. Uso avanzato – Abbiamo trattato la classificazione, l’ordinamento e l’aggregazione dei dati.
  3. Operazioni su funzioni – Abbiamo spiegato l’ottimizzazione con il controllo dell’esecuzione e la memoizzazione.
  4. Funzioni di utilità – Abbiamo introdotto la randomizzazione, i controlli di vuoto e la creazione di template.

Considerazioni finali

Underscore.js è uno strumento potente che rende lo sviluppo JavaScript più efficiente e più facile da gestire. Usa questo articolo come guida per integrarlo nei tuoi progetti. Continua a praticare per affinare ulteriormente le tue competenze.

Domande frequenti (FAQ)

Q1: Underscore.js è gratuito?

R: Sì. Underscore.js è fornito sotto licenza MIT ed è gratuito sia per uso personale che commerciale.

Q2: Qual è la differenza tra Underscore.js e Lodash?

R: Underscore.js è una libreria di utilità semplice e leggera. Lodash è basato su Underscore.js ma estende le funzionalità, offrendo migliori prestazioni e piena modularità. La scelta dipende dai requisiti del progetto.

Q3: Underscore.js è superfluo con JavaScript moderno (ES6+)?

R: Sebbene ES6+ includa potenti metodi per array e oggetti, Underscore.js rimane utile per la compatibilità cross-browser, la sintassi concisa e il lavoro con codice legacy.

Q4: Quali tipi di progetti sono più adatti a Underscore.js?

R: Progetti piccoli o di media dimensione o applicazioni che privilegiano la semplicità del codice. È particolarmente utile quando si desiderano utility leggere per operazioni rapide sui dati.

Q5: Come installo Underscore.js?

A: Puoi installarlo in vari modi:

  1. Link CDN:
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.6/underscore-min.js"></script>
  1. npm:
    npm install underscore
  1. yarn:
    yarn add underscore

Q6: Dove posso trovare la documentazione ufficiale?

A: La documentazione ufficiale è disponibile qui: Sito Ufficiale di Underscore.js

Q7: Underscore.js può essere utilizzato in progetti grandi?

A: Sì, anche se per progetti più grandi Lodash è spesso raccomandato grazie alla sua modularizzazione e ottimizzazioni delle prestazioni. Tuttavia, Underscore.js funziona bene per esigenze su piccola e media scala.

Q8: Ci sono altri modi per controllare l’esecuzione delle funzioni?

A: Sì. JavaScript moderno supporta setTimeout(), setInterval(), Promise e async/await. Tuttavia, Underscore.js fornisce _.throttle() e _.debounce() per implementazioni concise ed efficienti.

Q9: Ci sono avvertenze quando si usa Underscore.js?

A:

  1. Fai attenzione a non abusarne dove le funzionalità native ES6 sono sufficienti.
  2. Usa sempre l’ultima versione per evitare problemi di sicurezza.
  3. Per progetti più grandi, considera Lodash come alternativa.

Q10: _.template() è raccomandato come motore di template?

A: _.template() è comodo per il templating semplice. Per esigenze avanzate, considera librerie dedicate come Handlebars.js o EJS.

広告