JScript Katana

Underscore.js‑Leitfaden: JavaScript‑Arrays, -Objekte und -Funktionen vereinfachen

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

1. Einführung

JavaScript ist eine essenzielle Programmiersprache für die Webentwicklung, aber die Arbeit mit Arrays und Objekten kann den Code oft komplex machen. Besonders für Operationen wie das Filtern und Transformieren von Daten ist präziser und effizienter Code sehr wünschenswert. Hier wird die JavaScript-Bibliothek Underscore.js hilfreich. Durch die Verwendung dieser Bibliothek können Sie die Art und Weise, wie komplexe Datenmanipulationen geschrieben werden, vereinfachen.

Die Vorteile von Underscore.js

  1. Sauberer Code
  • Mit traditionellem JavaScript neigen bestimmte Prozesse dazu, ausführlich zu werden, aber mit Underscore.js können sie oft in nur wenigen Zeilen geschrieben werden.
  1. Reichhaltiges Set an Hilfsfunktionen
  • Es bietet zahlreiche Funktionen für die Array-Manipulation, Objektbehandlung und Funktionssteuerung.
  1. Leichtgewichtig und flexibel
  • Sie können nur die Funktionen verwenden, die Sie benötigen, und den Leistungsaufwand auf ein Minimum beschränken.

Was Sie in diesem Artikel lernen werden

  • Wie man Underscore.js einrichtet
  • Grundlegende Funktionen und praktische Beispiele
  • Praktische Anwendungsfälle für die Entwicklung

2. Was ist Underscore.js?

Überblick über Underscore.js

Underscore.js ist eine leichtgewichtige JavaScript-Bibliothek, die entwickelt wurde, um Datenmanipulationen zu vereinfachen. Sie bietet eine breite Palette an Hilfsfunktionen hauptsächlich für die effiziente Arbeit mit Arrays und Objekten, oft als JavaScript-Utility-Toolkit bezeichnet. Während JavaScript selbst leistungsstarke eingebaute Funktionen hat, kann der Code manchmal lang oder schwer lesbar werden. Durch die Verwendung von Underscore.js können Sie diese Probleme lösen und saubereren, wartbareren Code schreiben.

Wichtige Merkmale

  1. Umfassende Hilfsfunktionen
  • Es bietet Funktionen für Array-Manipulation , Objektbehandlung , und Funktionssteuerung , unter anderem.
  1. Vereinfachter, lesbarer Code
  • Im Vergleich zu traditionellem JavaScript reduziert es Boilerplate und verbessert die Lesbarkeit.
  1. Keine Abhängigkeiten
  • Es hängt nicht von anderen Bibliotheken ab, was es flexibel für die Integration macht.
  1. Leichtgewichtig und schnell
  • Seine kleine Größe und minimale Auswirkungen auf die Leistung machen es sogar für moderne Web-Anwendungen geeignet.

Underscore.js vs. Lodash

Eine häufig verglichene Bibliothek zu Underscore.js ist Lodash. Lodash wurde auf Underscore.js aufgebaut und erweitert seine Fähigkeiten. Hier sind einige Unterschiede:

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

Welche Sie wählen, hängt von den Anforderungen Ihres Projekts ab. Wenn Sie eine einfache und leichtgewichtige Bibliothek benötigen, ist Underscore.js die bessere Wahl.

Wann ist Underscore.js nützlich?

Underscore.js glänzt in den folgenden Szenarien:

  1. Arbeiten mit Arrays
  • Führen Sie Filterung, Mapping und andere Array-Operationen mit präziser Syntax durch.
  1. Behandlung von Objekten
  • Holen Sie leicht Schlüssel, Werte oder verschmelzen Sie Objekteigenschaften.
  1. Steuerung von Funktionen
  • Implementieren Sie Einmal-Ausführung, verzögerte Ausführung und andere Funktionssteuerungsmuster mit Leichtigkeit.
  1. Hilfsfunktionen
  • Verwenden Sie es für Sortierung, Randomisierung oder sogar als einfachen Template-Engine.

3. Wie man installiert

In diesem Abschnitt gehen wir die spezifischen Schritte durch, um Underscore.js zu Ihrem Projekt hinzuzufügen. Wir behandeln die Verwendung eines CDN, die Installation über npm oder yarn, das manuelle Herunterladen von Dateien und die Integration mit Modul-Bundlern.

1. Verwendung eines CDN

Ein CDN (Content Delivery Network) ermöglicht es Ihnen, Bibliotheken, die im Internet gehostet werden, einfach durch Hinzufügen eines Links zu verwenden. Fügen Sie den folgenden Code in den <head>-Tag oder am Ende des <body>-Tags in Ihrer HTML-Datei ein:

Beispiel: Hinzufügen zu einer HTML-Datei

<!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>

Wenn Sie es in einem Browser öffnen, zeigt die Entwicklerkonsole nur die geraden Zahlen an.

2. Installation mit npm oder yarn

Sie können Underscore.js auch in Ihrer lokalen Umgebung oder in einem Node.js‑Projekt installieren.

Verwendung von npm

npm install underscore

Verwendung von yarn

yarn add underscore

Importbeispiel 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. Datei herunterladen

  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 Ihrem Projektordner (z. B. js/).
  4. Binden Sie sie in Ihrem HTML mit einem <script>‑Tag ein.
    <script src="js/underscore-min.js"></script>

4. Verwendung eines Modul‑Bündlers

Wenn Sie Webpack oder Parcel verwenden, ist es genauso einfach:

Beispiel mit Webpack

  1. Installation über npm:
    npm install underscore
  1. Importieren Sie in Ihrer JavaScript‑Datei:
    import _ from 'underscore';
  1. Bündeln Sie und verwenden Sie es nach Bedarf.

Fehlerbehebung

1. „Uncaught ReferenceError: _ is not defined“

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

2. Fehler nach npm-Installation

  • Stellen Sie sicher, dass Node.js und npm auf die neueste Version aktualisiert sind.

4. Grundlegende Nutzung

In diesem Abschnitt stellen wir einige der Kernfunktionen von Underscore.js mit Beispielen vor. Diese Funktionen sind besonders nützlich, um Array‑ und Objektoperationen zu vereinfachen.

1. Iterieren über Arrays – _.each()

_.each() iteriert über Arrays oder Objekte.

Beispiel

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

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

Ausgabe:

1
2
3
4
5

Wichtige Punkte:

  • Funktioniert sowohl mit Arrays als auch mit Objekten.
  • Der Callback erhält das Element, den Index und die gesamte Sammlung.

2. Arrays abbilden – _.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. Erstes passendes Element finden – _.find()

_.find() gibt das erste Element zurück, das einer 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. Elemente filtern – _.filter()

_.filter() extrahiert alle Elemente, die einer Bedingung entsprechen, in ein neues Array.

Beispiel

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

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

console.log(evens);

Ausgabe:

[2, 4]

5. Elemente mischen – _.shuffle()

_.shuffle() randomisiert die Reihenfolge der Elemente in einem Array.

Beispiel

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

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

console.log(shuffled);

Ausgabe: (Beispiel)

[3, 5, 1, 4, 2]

6. Duplikate entfernen – _.uniq()

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

Beispiel

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

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

console.log(uniqueNumbers);

Ausgabe:

[1, 2, 3, 4, 5]

Zusammenfassung

Bisher haben wir einige der grundlegenden Funktionen von Underscore.js betrachtet:

  • _.each() zum Iterieren
  • _.map() zum Erzeugen neuer Arrays
  • _.find() und _.filter() für bedingte Abfragen
  • _.shuffle() zum Randomisieren von Elementen
  • _.uniq() zum Entfernen von Duplikaten

5. Erweiterte Nutzung

In diesem Abschnitt werden wir fortgeschrittenere Funktionen in Underscore.js untersuchen. Diese ermöglichen leistungsfähigere Datenmanipulation und -analyse.

1. Arrays sortieren – _.sortBy()

_.sortBy() sortiert ein Array 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. Daten gruppieren – _.groupBy()

_.groupBy() gruppiert Elemente in einem Array basierend auf einem 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. Daten zählen – _.countBy()

_.countBy() erleichtert das Zählen von Elementen basierend auf einer Bedingung.

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 fortgeschrittene Anwendungsfälle von Underscore.js behandelt:

  • _.sortBy() zum Sortieren von Arrays
  • _.groupBy() und _.countBy() zum Gruppieren und Zählen von Daten

6. Objektoperationen

In diesem Abschnitt behandeln wir nützliche Underscore.js‑Funktionen zur Arbeit mit Objekten. Diese Funktionen erleichtern das effiziente Verarbeiten von Schlüsseln, Werten und Objekt‑Eigenschaften.

1. Schlüssel und Werte abrufen

Schlüssel erhalten – _.keys()

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

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

Ausgabe:

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

Werte erhalten – _.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 objektbezogene Funktionen in Underscore.js vorgestellt:

  • .keys()** und **.values()` zum Abrufen von Schlüsseln und Werten
  • _.clone() zum Erstellen flacher Kopien

7. Funktionsoperationen

In diesem Abschnitt untersuchen wir, wie Unders.js Ihnen hilft, das Verhalten von Funktionen zu steuern und zu optimieren. Diese Hilfsmittel sind besonders nützlich für die Ausführungssteuerung und Leistungsoptimierung.

1. Funktionen binden – _.bind()

_.bind() bindet eine Funktion an ein bestimmtes Objekt und stellt sicher, dass this immer auf dieses Objekt verweist.

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

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

Beispiel

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

Ausgabe: (nach 2 Sek)

Displayed after 2 seconds

3. Einmalige Ausführung – _.once()

_.once() stellt sicher, dass eine Funktion nur beim ersten Aufruf ausgeführt.

Beispiel

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

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

4. Memoisierung – _.memoize()

_.memoize() speichert die Ergebnisse einer Funktion im Cache und überspringt die Neuberechnung für dieselben Eingaben.

Beispiel

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. Ausführungsbegrenzung – _.throttle()

_.throttle() stellt sicher, dass eine Funktion höchstens einmal innerhalb eines angegebenen Zeitintervalls ausgeführt wird.

Beispiel

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

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

Zusammenfassung

Dieser Abschnitt stellte funktionsbezogene Hilfsprogramme in Underscore.js vor:

  • _.bind() für das Fixieren von this
  • _.delay() für verzögerte Ausführung
  • _.once() für einmalige Initialisierung
  • _.memoize() für das Zwischenspeichern von Ergebnissen
  • _.throttle() für die Ratenbegrenzung der Ausführung

8. Hilfsfunktionen

In diesem Abschnitt behandeln wir einige der praktischen Hilfsfunktionen, die von Underscore.js bereitgestellt werden. Diese Funktionen können in einer Vielzahl von Situationen eingesetzt werden, z. B. beim Erzeugen zufälliger Werte, beim Prüfen von Datenzuständen oder beim Arbeiten mit Vorlagen.

1. Erzeugen zufälliger Zahlen – _.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. Erstellen von Vorlagen – _.template()

_.template() wird verwendet, um einfache Zeichenkettenvorlagen zu erstellen.

Beispiel

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

Ausgabe:

Hello, Alice!

Zusammenfassung

Hier sind die Hilfsfunktionen, die wir vorgestellt haben:

  • _.random() zum Erzeugen zufälliger Zahlen
  • _.isEmpty() zum Prüfen, ob Datenstrukturen leer sind
  • _.template() zum Erstellen einfacher Vorlagen

9. Fazit

In diesem Artikel haben wir Underscore.js von den Grundlagen bis zu fortgeschritteneren Anwendungsfällen untersucht. Diese Bibliothek ist äußerst effektiv, um Datenmanipulation zu vereinfachen und effizienten, wartbaren JavaScript‑Code zu schreiben.

Rückblick

  1. Grundlegende Nutzung – Kernfunktionen zum Arbeiten mit Arrays und Objekten erlernt.
  2. Erweiterte Nutzung – Klassifizierung, Sortierung und Aggregation von Daten behandelt.
  3. Funktionsoperationen – Optimierung durch Ausführungskontrolle und Memoisierung erklärt.
  4. Hilfsfunktionen – Randomisierung, Leere‑Prüfungen und Vorlagenerstellung vorgestellt.

Abschließende Gedanken

Underscore.js ist ein leistungsstarkes Werkzeug, das die JavaScript‑Entwicklung effizienter und leichter zu handhaben macht. Nutzen Sie diesen Artikel als Leitfaden, um es in Ihre Projekte zu integrieren. Üben Sie weiter, um Ihre Fähigkeiten weiter zu schärfen.

Häufig gestellte Fragen (FAQ)

Q1: Ist Underscore.js kostenlos nutzbar?

A: Ja. Underscore.js wird unter der MIT‑Lizenz bereitgestellt und ist sowohl für den privaten als auch für den kommerziellen Gebrauch kostenlos.

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

A: Underscore.js ist eine einfache, leichtgewichtige Hilfsbibliothek. Lodash basiert auf Underscore.js, erweitert jedoch die Funktionalität, bietet bessere Leistung und volle Modularität. Die Wahl hängt von den Projektanforderungen ab.

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

A: Obwohl ES6+ leistungsstarke Array‑ und Objekt‑Methoden enthält, bleibt Underscore.js nützlich für die plattformübergreifende Kompatibilität, eine prägnante Syntax und die Arbeit mit Legacy‑Code.

Q4: Für welche Projekttypen ist Underscore.js am besten geeignet?

A: Kleine bis mittelgroße Projekte oder Anwendungen, die Code‑Einfachheit priorisieren. Besonders nützlich, wenn leichte Hilfsprogramme für schnelle Datenoperationen gewünscht werden.

Q5: Wie installiere ich Underscore.js?

A: Sie können es auf mehrere Arten installieren:

  1. CDN‑Link:
    <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: Wo finde ich die offizielle Dokumentation?

A: Die offizielle Dokumentation ist hier verfügbar: Underscore.js Official Website

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

A: Ja, obwohl für größere Projekte häufig Lodash empfohlen wird, da es modularer ist und Leistungsoptimierungen bietet. Trotzdem funktioniert Underscore.js gut für kleine und mittelgroße Anforderungen.

Q8: Gibt es andere Möglichkeiten, die Ausführung von Funktionen zu steuern?

A: Ja. Modernes JavaScript unterstützt setTimeout(), setInterval(), Promise und async/await. Underscore.js stellt jedoch _.throttle() und _.debounce() für kompakte und effiziente Implementierungen bereit.

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

A:

  1. Achten Sie darauf, es nicht zu überbeanspruchen, wenn native ES6‑Funktionen ausreichen.
  2. Verwenden Sie stets die neueste Version, um Sicherheitsprobleme zu vermeiden.
  3. Für größere Projekte sollten Sie als Alternative Lodash in Betracht ziehen.

Q10: Wird _.template() als Template‑Engine empfohlen?

A: _.template() ist für einfache Vorlagen praktisch. Für anspruchsvollere Anforderungen sollten Sie dedizierte Bibliotheken wie Handlebars.js oder EJS in Betracht ziehen.

広告