JavaScript Katana

Underscore.js‑Tutorial: JavaScript‑Array‑ und Objektoperationen vereinfachen

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

1. Einführung

JavaScript ist eine unverzichtbare Programmiersprache für die Webentwicklung, aber die Arbeit mit Arrays und Objekten kann den Code schnell komplex machen. Insbesondere Aufgaben wie Datenfilterung und -transformation erfordern häufig eine sauberere, effizientere Syntax.

Genau hier kommt die JavaScript‑Bibliothek Underscore.js ins Spiel. Mit dieser Bibliothek können selbst komplexe Datenoperationen einfach und lesbar geschrieben werden.

Warum Underscore.js herausragt

  1. Kürzerer Code
  • Vorgänge, die in reinem JavaScript oft umständlich werden, lassen sich mit Underscore.js in nur wenigen Zeilen ausdrücken.
  1. Ein umfangreiches Set an praktischen Funktionen
  • Sie bietet viele Features, darunter Array‑Operationen, Objekt‑Handling und Funktions‑Kontrolle.
  1. Leichtgewichtig und flexibel
  • Da Sie nur das verwenden können, was Sie benötigen, lässt sich die Performance‑Auswirkung auf ein Minimum reduzieren.

Was Sie in diesem Artikel lernen werden

  • Wie man Underscore.js einrichtet
  • Kernfunktionen und praktische Beispiele
  • Praxisnahe Anwendungsfälle, die bei der Entwicklung helfen

2. Was ist Underscore.js?

Überblick über Underscore.js

Underscore.js ist eine leichtgewichtige Bibliothek, die die Datenmanipulation in JavaScript erleichtert. Sie bietet ein breites Spektrum an praktischen Funktionen, die hauptsächlich dazu dienen, Operationen auf Arrays und Objekten zu vereinfachen, und wird häufig als JavaScript‑Utility‑Toolkit bezeichnet.

Die Standard‑Features von JavaScript sind mächtig, aber der Code kann lang werden und die Lesbarkeit leiden. Mit Underscore.js lassen sich diese Probleme angehen, sodass Sie einfacheren, wartbareren Code schreiben können.

Hauptmerkmale

  1. Eine große Vielfalt an Hilfsfunktionen
  • Sie stellt viele Funktionen bereit, darunter Array‑Operationen, Objekt‑Operationen und Funktions‑Kontrolle.
  1. Einfacher, lesbarer Code
  • Im Vergleich zu herkömmlichen, reinen JavaScript‑Mustern reduziert sie Boilerplate‑Code und verbessert die Lesbarkeit.
  1. Keine Abhängigkeiten
  • Da sie nicht von anderen Bibliotheken abhängt, kann sie flexibel in vielen Umgebungen eingesetzt werden.
  1. Leichtgewichtig und schnell
  • Ihre geringe Größe und niedrige Overhead machen sie auch für moderne Web‑Anwendungen zu einer guten Wahl.

Underscore.js vs. Lodash

Eine häufig verglichene Bibliothek ist Lodash. Lodash baut auf Underscore.js auf und erweitert dessen Funktionsumfang, wobei sich unter anderem folgende Unterschiede ergeben.

AspectUnderscore.jsLodash
FunctionalityIncludes many core utility functionsOffers an even broader feature set
Modular usagePartially supportedFully modularized
PerformanceFastFast and further optimized

Welche Sie wählen, hängt von den Anforderungen Ihres Projekts ab, aber wenn Sie eine einfache und leichtgewichtige Bibliothek suchen, ist Underscore.js eine starke Wahl.

Wie kann Underscore.js helfen?

Underscore.js ist besonders nützlich in Situationen wie den folgenden.

  1. Array‑Datenmanipulation
  • Sie ermöglicht knappen Code für Vorgänge wie Filtern und Mappen.
  1. Objekt‑Manipulation
  • Sie können leicht Schlüssel/Werte abrufen und Elemente zusammenführen, unter anderem.
  1. Funktions‑Kontrolle
  • Sie erleichtert die Implementierung von Kontrollen wie „nur einmal ausführen“ oder verzögerte Ausführung.
  1. Nutzung von Hilfsfunktionen
  • Sie können sie auch zum Sortieren, Randomisieren und sogar als einfaches Templating‑Engine einsetzen.

3. Installation

In diesem Abschnitt gehen wir konkrete Schritte durch, um Underscore.js zu Ihrem Projekt hinzuzufügen. Sie lernen sowohl den CDN‑Ansatz als auch die lokale Installation durch Herunterladen der Dateien kennen.

1. Nutzung eines CDN

Ein CDN (Content Delivery Network) ist ein praktischer Weg, eine Bibliothek zu verwenden, indem man einfach auf eine gehostete Datei im Internet verweist. Sie können Underscore.js einbinden, indem Sie den folgenden Code innerhalb des <head>‑Tags oder am Ende des <body>‑Tags in Ihrer HTML‑Datei hinzufügen.

Beispiel: Einbinden in eine HTML‑Datei

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Underscore.jsの導入</title>
  <!-- Underscore.jsのCDNリンク -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.6/underscore-min.js"></script>
</head>
<body>
  <h1>Underscore.jsのテスト</h1>
  <script>
    // 動作確認コード
    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>

Wenn Sie diese Datei in einem Browser öffnen, können Sie bestätigen, dass nur gerade Zahlen in der Konsole der Entwicklerwerkzeuge angezeigt werden.

2. Installation mit npm oder yarn

Durch die Verwendung von npm oder yarn können Sie Underscore.js auch in einer lokalen Umgebung oder in einem Node.js‑Projekt nutzen.

Installation mit npm

npm install underscore

Installation mit yarn

yarn add underscore

Beispielimport in einer JavaScript‑Datei

import _ from 'underscore';

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

3. Herunterladen der Datei und lokale Verwendung

  1. Gehen Sie zur offiziellen Website ( underscorejs.org ).
  2. Laden Sie die neueste JavaScript‑Datei aus dem Abschnitt „Download“ herunter.
  3. Platzieren Sie die heruntergeladene Datei in einem geeigneten Ordner innerhalb Ihres Projekts (z. B. js/ ).
  4. Binden Sie sie in Ihrer HTML‑Datei mit einem <script>‑Tag ein.
    <script src="js/underscore-min.js"></script>

4. Verwendung eines Modul‑Bundlers

Wenn Sie einen Modul‑Bundler wie Webpack oder Parcel verwenden, können Sie Underscore.js ebenfalls einfach integrieren.

Beispiel: Webpack‑Setup

  1. Installieren Sie es mit npm.
    npm install underscore
  1. Importieren Sie es in Ihrer JavaScript‑Datei.
    import _ from 'underscore';
  1. Bündeln Sie es nach Bedarf und verwenden Sie es in Ihrem Projekt.

Fehlersuche

1. Wenn Sie „Uncaught ReferenceError: _ is not defined“ sehen

  • Underscore.js wurde möglicherweise nicht korrekt geladen. Überprüfen Sie Ihren CDN‑Link oder Ihren Importpfad erneut.

2. Wenn nach der Installation mit npm Fehler auftreten

  • Aktualisieren Sie Node.js und npm auf die neuesten Versionen.

4. Grundlegende Nutzung

In diesem Abschnitt stellen wir einige der Kernfunktionen von Underscore.js vor, zusammen mit praktischen Beispielen. Diese Funktionen sind äußerst nützlich, um effizient mit Arrays und Objekten zu arbeiten.

1. Durchlaufen von Arrays – _.each()

_.each() ist eine Funktion, die zum Durchlaufen von Arrays oder Objekten verwendet wird.

Beispiel

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

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

Ausgabe:

1  
2  
3  
4  
5

Wichtige Punkte:

  • Sie funktioniert nicht nur mit Arrays, sondern auch mit Objekten.
  • Der Callback erhält das Element, dessen Index und die gesamte Sammlung.

2. Abbilden von Arrays – _.map()

_.map() wendet eine Funktion auf jedes Element eines Arrays an und gibt ein neues Array zurück.

Beispiel

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

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

console.log(doubled);

Ausgabe:

[2, 4, 6, 8, 10]

3. Finden des ersten passenden Elements – _.find()

_.find() gibt das erste Element zurück, das einer angegebenen Bedingung entspricht.

Beispiel

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);

Ausgabe:

3

4. Filtern aller passenden Elemente – _.filter()

_.filter() extrahiert alle Elemente, die einer Bedingung entsprechen, und gibt sie als neues Array zurück.

Beispiel

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

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

console.log(evens);

Ausgabe:

[2, 4]

5. Mischen von Array‑Elementen – _.shuffle()

_.shuffle() ordnet die Elemente eines Arrays zufällig neu an.

Beispiel

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

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

console.log(shuffled);

Ausgabe: (Beispiel)

[3, 5, 1, 4, 2]

6. Entfernen doppelter Elemente – _.uniq()

_.uniq() entfernt doppelte Werte aus einem Array.

Beispiel

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

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

console.log(uniqueNumbers);

Ausgabe:

[1, 2, 3, 4, 5]

Zusammenfassung

Bisher haben wir die grundlegenden Funktionen von Underscore.js zusammen mit praktischen Beispielen behandelt.

  • _.each() zum Iterieren über Elemente
  • _.map() zum Erstellen neuer Arrays
  • _.find() und _.filter() zum Extrahieren passender Elemente
  • _.shuffle() zum Zufällig anordnen von Elementen
  • _.uniq() zum Entfernen von Duplikaten

5. Erweiterte Nutzung

In diesem Abschnitt erkunden wir erweiterte Funktionen von Underscore.js und praktische Anwendungsfälle. Diese Funktionen ermöglichen eine anspruchsvollere Datenmanipulation und -analyse.

1. Sortieren von Arrays – _.sortBy()

_.sortBy() sortiert Array-Elemente basierend auf einem angegebenen Schlüssel oder einer Bedingung.

Beispiel

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);

Ausgabe:

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

2. Gruppieren von Arrays – _.groupBy()

_.groupBy() gruppiert Array-Elemente basierend auf einem angegebenen Schlüssel oder einer Bedingung.

Beispiel

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);

Ausgabe:

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

3. Aggregieren von Daten – _.countBy()

_.countBy() ist eine bequeme Funktion zum Aggregieren von Daten.

Beispiel

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

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

console.log(counts);

Ausgabe:

{
  a: 2,
  b: 2
}

Zusammenfassung

In diesem Abschnitt haben wir erweiterte Nutzung von Underscore.js behandelt.

  • _.sortBy() zum Sortieren von Arrays
  • _.groupBy() und _.countBy() zum Kategorisieren und Aggregieren von Daten

6. Objektoperationen

In diesem Abschnitt stellen wir nützliche Funktionen für die Arbeit mit Objekten in Underscore.js vor. Diese Funktionen helfen, Objekteigenschaften und -werte effizient zu handhaben.

1. Abrufen von Objektschlüsseln und -werten

Schlüssel abrufen – _.keys()

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

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

Ausgabe:

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

Werte abrufen – _.values()

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

Ausgabe:

['Alice', 25, 'Tokyo']

2. Objekte klonen – _.clone()

_.clone() erstellt eine flache Kopie eines Objekts.

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

Zusammenfassung

In diesem Abschnitt haben wir erklärt, wie man mit Objekten in Underscore.js arbeitet.

7. Funktionsoperationen

In diesem Abschnitt erklären wir, wie man effektiv mit Funktionen in Underscore.js arbeitet. Diese Funktionen sind nützlich zur Steuerung der Ausführung und Verbesserung der Leistung.

1. Funktionen binden – _.bind()

_.bind() bindet ein spezifisches Objekt an this, wenn eine Funktion ausgeführt wird.

Beispiel

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. Verzögerte Ausführung – _.delay()

_.delay() verzögert die Ausführung einer Funktion um eine angegebene Zeitspanne.

Beispiel

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

Ausgabe: (nach 2 Sekunden)

Displayed after 2 seconds

3. Nur einmal ausführen – _.once()

_.once() stellt sicher, dass eine Funktion nur einmal ausgeführt wird. Nachfolgende Aufrufe werden ignoriert.

Beispiel

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

initialize(); // Executed
initialize(); // Ignored

4. Memoisierung – _.memoize()

_.memoize() speichert das Ergebnis einer Funktion im Cache und überspringt die Neuberechnung, wenn sie erneut mit denselben Argumenten aufgerufen wird.

Beispiel

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

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

5. Drosseln der Funktionsausführung – _.throttle()

_.throttle() begrenzt, wie oft eine Funktion ausgeführt werden kann.

Beispiel

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

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

Zusammenfassung

In diesem Abschnitt haben wir funktionsbezogene Hilfsprogramme in Underscore.js untersucht.

  • _.bind() zum Fixieren des this-Kontexts
  • _.delay() für verzögerte Ausführung
  • _.once() für einmalige Ausführung
  • _.memoize() zum Zwischenspeichern von Ergebnissen
  • _.throttle() zur Optimierung der Ausführungsfrequenz

8. Hilfsfunktionen

In diesem Abschnitt stellen wir praktische Hilfsfunktionen von Underscore.js vor. Diese Funktionen sind in vielen Situationen nützlich, einschließlich Datenverarbeitung, Zufallszahlengenerierung und Templating.

1. Zufallszahlen erzeugen – _.random()

_.random() erzeugt eine zufällige ganze Zahl oder Fließkommazahl innerhalb eines angegebenen Bereichs.

Beispiel

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

2. Prüfen auf leere Werte – _.isEmpty()

_.isEmpty() prüft, ob ein Array, Objekt oder String leer ist.

Beispiel

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

3. Templates erstellen – _.template()

_.template() wird verwendet, um String-Templates zu erstellen.

Beispiel

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

Ausgabe:

Hello, Alice!

Zusammenfassung

In diesem Abschnitt haben wir Hilfsfunktionen in Underscore.js behandelt.

  • _.random() zum Erzeugen zufälliger Zahlen
  • _.isEmpty() zum Prüfen des Datenzustands
  • _.template() für einfaches Templating

9. Fazit

In diesem Artikel haben wir Underscore.js von der Grundanwendung bis zu fortgeschritteneren Techniken behandelt. Diese Bibliothek ist äußerst nützlich, um die Datenmanipulation in JavaScript zu vereinfachen und effizienten, wartbaren Code zu schreiben.

Wichtige Erkenntnisse

  1. Grundlegende Nutzung – Kernfunktionen für die Manipulation von Arrays und Objekten gelernt.
  2. Fortgeschrittene Nutzung – Gruppierung, Sortierung und Aggregation untersucht.
  3. Funktionshilfen – Steuerung der Ausführung und Memoisierung behandelt.
  4. Hilfswerkzeuge – Zufallszahlengenerierung und Templating vorgestellt.

Abschließende Gedanken

Underscore.js ist ein leistungsstarkes Werkzeug, das die JavaScript-Entwicklung effizienter und zugänglicher macht. Nutzen Sie diesen Artikel als Referenz und versuchen Sie, ihn in Ihren eigenen Projekten anzuwenden. Fortlaufende praktische Übungen helfen Ihnen, Ihre Fähigkeiten weiter zu verbessern.

Häufig gestellte Fragen (FAQ)

Q1: Ist Underscore.js kostenlos zu verwenden?

A: Ja. Underscore.js ist unter der MIT-Lizenz veröffentlicht und kann kostenlos verwendet werden, auch in kommerziellen Projekten.

Q2: Was ist der Unterschied zwischen Underscore.js und Lodash?

A: Underscore.js ist eine einfache und leichte Hilfsbibliothek. Lodash baut auf Underscore.js auf und bietet zusätzliche Funktionen, Leistungsoptimierungen und eine stärkere Modularisierung. Wählen Sie je nach den Anforderungen Ihres Projekts.

Q3: Ist Underscore.js mit modernem JavaScript (ES6+) überflüssig?

A: ES6+ bietet viele native Funktionen für Array‑ und Objektoperationen, aber Underscore.js ist weiterhin nützlich für die Browser‑Kompatibilität und eine prägnante Syntax, besonders in Legacy‑Projekten.

Q4: Für welche Projektarten ist Underscore.js geeignet?

A: Es eignet sich gut für kleine bis mittelgroße Projekte und Anwendungen, bei denen Code‑Einfachheit wichtig ist. Besonders hilfreich ist es, wenn Sie leichte Hilfsfunktionen ohne schwere Abhängigkeiten benötigen.

Q5: Wie kann ich Underscore.js installieren?

A: Sie können es mit einer der folgenden Methoden installieren.

  1. Über CDN hinzufügen:
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.6/underscore-min.js"></script>
  1. Mit npm installieren:
    npm install underscore
  1. Mit yarn installieren:
    yarn add underscore

Wählen Sie die Methode, die am besten zu Ihrer Umgebung passt.

Q6: Wo finde ich die offizielle Dokumentation?

A: Sie finden sie auf der offiziellen Website:
Underscore.js Official Website

Q7: Kann Underscore.js in groß angelegten Projekten verwendet werden?

A: Ja, das kann es. Für große Projekte wird jedoch oft Lodash empfohlen, da es eine modulare Struktur und zusätzliche Optimierungen bietet. Underscore.js bleibt ideal für leichte Anwendungsfälle.

Q8: Gibt es Alternativen zur Steuerung der Funktionsausführung?

A: Ja. Modernes JavaScript bietet Alternativen wie setTimeout(), setInterval(), Promise und async/await. Allerdings ermöglichen Underscore.js‑Funktionen wie _.throttle() und _.debounce() sauberere und prägnantere Implementierungen.

Q9: Gibt es irgendwelche Fallstricke bei der Verwendung von Underscore.js?

A:

  1. Vermeiden Sie unnötige Abhängigkeiten, wenn native JavaScript‑Funktionen ausreichen.
  2. Halten Sie die Versionen aktuell, um Sicherheitsrisiken zu minimieren.
  3. Erwägen Sie, je nach Projektgröße zu Lodash zu migrieren.

Q10: Wird Underscore.js als Template‑Engine empfohlen?

A: _.template() ist für einfache Anwendungsfälle praktisch, aber für anspruchsvollere Templating‑Bedürfnisse werden dedizierte Bibliotheken wie Handlebars.js oder EJS empfohlen.

広告