modern-javascript-patterns
Moderne JavaScript-Patterns anwenden
Legacy-JavaScript-Codebasen sind schwer zu warten und zu optimieren. Diese Fähigkeit bietet umfassende Anleitung zu ES6+-Features, einschließlich Arrow-Funktionen, Destructuring, async/await, Promises, funktionaler Programmier-Patterns und moderner Klassen-Features, um sauberen, effizienten und wartbaren JavaScript-Code zu schreiben.
Die Skill-ZIP herunterladen
In Claude hochladen
Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen
Einschalten und loslegen
Teste es
Verwendung von "modern-javascript-patterns". How do I destructure nested objects in JavaScript?
Erwartetes Ergebnis:
Verschachteltes Objekt-Destructuring ermöglicht es dir, Werte aus tief verschachtelten Objekten zu extrahieren:
```javascript
const user = {
id: 1,
name: 'Alice',
address: {
city: 'Boston',
country: 'USA'
}
};
// Verschachteltes Destructuring
const {
name,
address: { city, country }
} = user;
console.log(city); // 'Boston'
console.log(country); // 'USA'
// Mit Standardwerten
const {
address: {
city = 'Unknown',
zipCode = '00000'
} = {}
} = user;
```
Verwendung von "modern-javascript-patterns". What's the difference between Promise.all and Promise.allSettled?
Erwartetes Ergebnis:
Promise.all scheitert schnell - wenn irgendein Promise verworfen wird, schlägt die gesamte Operation fehl. Promise.allSettled wartet auf alle Promises, unabhängig vom Ergebnis:
```javascript
// Promise.all - scheitert bei erster Ablehnung
const users = await Promise.all([
fetchUser(1),
fetchUser(2)
]); // Wirft einen Fehler, wenn einer fehlschlägt
// Promise.allSettled - wartet auf alle
const results = await Promise.allSettled([
fetchUser(1),
fetchUser(2)
]);
results.forEach(result => {
if (result.status === 'fulfilled') {
console.log('Erfolg:', result.value);
} else {
console.log('Fehlgeschlagen:', result.reason);
}
});
```
Sicherheitsaudit
SicherThis is a documentation skill containing educational content about JavaScript ES6+ patterns. All static analysis findings are false positives. The 'weak cryptographic algorithm' flags are triggered by JavaScript template literals and class private field syntax (#). The 'shell backtick execution' flags are false positives from JavaScript template literals in code examples. The 'dynamic import()' detections are legitimate ES6 module examples being documented. No malicious code patterns exist.
Qualitätsbewertung
Was du bauen kannst
Legacy-JavaScript-Codebasen refaktorieren
Migriere Callback-basierten Code zu Promises und async/await-Patterns. Ersetze traditionelle Funktionen durch Arrow-Funktionen, um 'this'-Binding-Probleme zu beheben. Wende Destructuring und Spread-Operatoren an, um Datenmanipulation zu vereinfachen.
Funktionale Programmierung in JavaScript lernen
Verstehe, wie du map, filter und reduce für Datentransformation verwendest. Lerne, reine Funktionen zu erstellen, die Seiteneffekte vermeiden. Wende Funktionskomposition und Piping für lesbare Datenverarbeitungs-Pipelines an.
Wartbaren JavaScript-Code schreiben
Wende moderne JavaScript-Patterns für saubereren, ausdrucksstärkeren Code an. Verwende proper Modulorganisation und ES6-Klassen-Features. Implementiere Performance-Optimierungen wie Debouncing, Throttling und Lazy-Evaluation.
Probiere diese Prompts
Wie verwende ich [feature] in modernem JavaScript? Kannst du mir Beispiele für [use case] zeigen?
Ich habe diesen Legacy-JavaScript-Code: [code snippet]. Wie kann ich ihn auf moderne ES6+-Patterns refaktorieren? Welche spezifischen Features sollte ich anwenden?
Ich muss [specific async task] implementieren. Sollte ich Promises, async/await oder eine Kombination verwenden? Zeig mir das Best-Practice-Pattern für [scenario] mit proper Fehlerbehandlung.
Ich habe ein Array von Objekten: [data structure]. Wie kann ich funktionale Programmierung verwenden, um diese Daten zu [transform/group/filter/aggregate]? Zeig mir Schritt für Schritt, wie ich Funktionen für diese Aufgabe komponiere.
Bewährte Verfahren
- Verwende standardmäßig const und nur let, wenn eine Neuzuweisung wirklich notwendig ist. Dies verhindert unbeabsichtigte Mutationen und macht die Codeabsicht klarer.
- Bevorzuge Arrow-Funktionen für Callbacks und Methoden, die lexikalisches 'this'-Binding benötigen. Verwende traditionelle Funktionen nur, wenn du dynamisches 'this' benötigst.
- Wende Destructuring und Spread-Operatoren für sauberere Datenmanipulation an. Vermeide direkten Property-Zugriff und Mutation, wenn möglich.
Vermeiden
- Vermeide es, bereits async Funktionen in neue Promises zu wrappen. Wenn eine Funktion bereits ein Promise zurückgibt, verwende sie direkt mit await.
- Mutiere keine Eingabedaten in Funktionen. Gib immer neue Objekte oder Arrays mit Spread-Operatoren zurück, um Unveränderlichkeit zu wahren.
- Vermeide Callback-Pyramiden und übermäßiges Promise-Chaining. Verwende async/await für bessere Lesbarkeit und Fehlerbehandlung.