Let und Const: Eine neue Art, Variablen zu deklarieren
Vor ES6 wurde zum Deklarieren von Variablen nur das Schlüsselwort var verwendet, das eine Reihe von Problemen aufwies. Modernes JavaScript bietet let und const mit Blocksichtbarkeit.
// var - Funktionssichtbereich
function oldWay() {
if (true) {
var x = 10;
}
console.log(x); // 10 - Variable verfügbar
}
// let - Blocksichtbarkeit
function newWay() {
if (true) {
let y = 10;
}
// console.log(y); // ReferenceError
}
// const - für unveränderliche Verweise
const API_URL = 'https://api.example.com';
const user = { name: 'Alexey' };
user.name = 'Ivan'; // In Betrieb - Objekt änderbar
// user = {}; // TypeError - kann nicht neu zugewiesen werdenVerwenden Sie const standardmäßig für alle Variablen, die keine Neuzuweisung erfordern. Dies macht den Code vorhersehbarer und schützt vor versehentlichen Änderungen.
Pfeilfunktionen: Kürze und this
Pfeilfunktionen bieten eine kompaktere Syntax und lösen das Problem mit dem Kontext this.
// Klassische Funktion
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(function(n) {
return n * 2;
});
// Weichenfunktion
const doubledArrow = numbers.map(n => n * 2);
// Mehrere Parameter
const sum = (a, b) => a + b;
// Funktionskörper mit mehreren Ausdrücken
const processUser = user => {
const name = user.name.toUpperCase();
return `Hi ${name}!`;
};Ein wichtiges Merkmal von Pfeilfunktionen: Sie erstellen keinen eigenen Kontext this, sondern erben ihn aus dem Umfeld.
class Timer {
constructor() {
this.seconds = 0;
}
// Mit der üblichen Funktion wäre .bind(this) erforderlich
start() {
setInterval(() => {
this.seconds++; // this verweist auf die Timer-Instanz
console.log(this.seconds);
}, 1000);
}
}Destructuring: Extrahieren von Daten aus Objekten und Arrays
Die Destrukturierung ermöglicht es, Werte aus Arrays und Objekten auf elegante Weise in einzelne Variablen zu extrahieren.
// Destrukturierung von Objekten
const user = {
name: 'Alexey',
age: 30,
email: 'alexey@example.com'
};
const { name, age } = user;
console.log(name); // Alexey
// Umbenennung von Variablen
const { name: userName, age: userAge } = user;
// Standardwerte
const { role = 'user' } = user;
// Dekonstruktion von Arrays
const colors = ['red', 'green', 'blue'];
const [primary, secondary] = colors;
// Elemente überspringen
const [first, , third] = colors;
// Rest-Operator
const [head, ...tail] = colors;
console.log(tail); // ['green', 'blue']Destructuring ist besonders nützlich in Funktionsparametern.
function displayUser({ name, age, email = 'not specified' }) {
console.log(`${name}, ${age} years old, email: ${email}`);
}
displayUser(user);Spread- und Rest-Operatoren: Arbeiten mit Sammlungen
Der Spread-Operator und der Rest-Operator verwenden die gleiche Syntax ..., führen jedoch entgegengesetzte Operationen aus.
// Spread - klappt ein Array oder Objekt auf
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]
// Kopieren eines Arrays
const original = [1, 2, 3];
const copy = [...original];
// Spread für Objekte
const defaults = { theme: 'dark', language: 'ru' };
const userSettings = { language: 'en', fontSize: 14 };
const settings = { ...defaults, ...userSettings };
// { theme: 'dark', language: 'en', fontSize: 14 }
// Rest - sammelt die verbleibenden Elemente
function sum(...numbers) {
return numbers.reduce((total, n) => total + n, 0);
}
sum(1, 2, 3, 4); // 10Vorlagenzeilen: bequeme Interpolation
Vorlagenliterale verwenden umgekehrte Anführungszeichen und ermöglichen das Einbetten von Ausdrücken in eine Zeichenfolge.
const name = 'Alexey';
const age = 30;
// Die alte Methode
const greeting = 'Hi, ' + name + '! To you ' + age + ' years.';
// Vorlagenzeilen
const modernGreeting = `Hi ${name}! You are ${age} years old.`;
// Mehrzeilige Zeilen
const html = `
<div class="card">
<h2>${name}</h2>
<p>Age: ${age}</p>
</div>
`;
// Ausdrücke in Vorlagen
const price = 100;
const message = `Discounted price: ${price * 0.9} rub.`;Promises und async/await: Asynchronität ohne Schmerzen
Promises haben die Arbeit mit asynchronem Code erheblich vereinfacht, und async/await haben ihn synchron gemacht.
// Promis
function fetchUser(id) {
return fetch(`/api/users/${id}`)
.then(response => response.json())
.then(data => data.user)
.catch(error => console.error('Error:', error));
}
// Async/await - besser lesbarer Code
async function fetchUserAsync(id) {
try {
const response = await fetch(`/api/users/${id}`);
const data = await response.json();
return data.user;
} catch (error) {
console.error('Error:', error);
}
}
// Parallelisierung
async function fetchMultipleUsers(ids) {
const promises = ids.map(id => fetchUserAsync(id));
const users = await Promise.all(promises);
return users;
}Module: Code-Organisation
ES6-Module ermöglichen es, den Code in logische Teile aufzuteilen und Abhängigkeiten zu verwalten.
// math.js - Export
export const PI = 3.14159;
export function sum(a, b) {
return a + b;
}
export class Calculator {
multiply(a, b) {
return a * b;
}
}
// main.js - Import
import { PI, sum, Calculator } from './math.js';
// Import des gesamten Moduls
import * as MathUtils from './math.js';
// Standard-Export
// user.js
export default class User {
constructor(name) {
this.name = name;
}
}
// Importieren des Standard-Exports
import User from './user.js';
Klassen: objektorientierte Programmierung
ES6 hat syntaktischen Zucker für die Arbeit mit Prototypen in Form von Klassen hinzugefügt.
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a sound`);
}
}
class Dog extends Animal {
constructor(name, breed) {
super(name); // Aufruf des übergeordneten Designers
this.breed = breed;
}
speak() {
console.log(`${this.name} is barking`);
}
// Statische Methode
static info() {
return 'Dogs - pets';
}
}
const dog = new Dog('Bobik', 'Labrador');
dog.speak(); // Bobik belltArray-Methoden: map, filter, reduce und andere
Moderne Array-Methoden machen die Arbeit mit Daten deklarativer.
const users = [
{ name: 'Alexey', age: 30, active: true },
{ name: 'Maria', age: 25, active: false },
{ name: 'Ivan', age: 35, active: true }
];
// Karte - Elementtransformation
const names = users.map(user => user.name);
// filter - Filterung
const activeUsers = users.filter(user => user.active);
// reduzieren - Aggregation
const totalAge = users.reduce((sum, user) => sum + user.age, 0);
// find - Suche nach dem ersten Element
const alex = users.find(user => user.name === 'Alexey');
// einige - Überprüfen Sie die Bedingung für mindestens ein Element
const hasActive = users.some(user => user.active);
// every - Bedingung für alle Elemente prüfen
const allActive = users.every(user => user.active);
// Methodenketten
const result = users
.filter(user => user.active)
.map(user => user.name)
.sort();Optionale Verkettung und Nullish Coalescing
Diese Operatoren erleichtern die Arbeit mit potenziell unsicheren Werten.
const user = {
name: 'Alexey',
address: {
city: 'Moscow'
}
};
// Optionale Verkettung (?.) - sicherer Zugriff
const street = user.address?.street; // undefiniert, ohne Fehler
const zip = user.address?.zip?.code; // undefined
// Mit Methoden
const result = user.getData?.(); // undefiniert, wenn keine Methode vorhanden ist
// Nullish coalescing (??) - Standardwert
const port = process.env.PORT ?? 3000;
// Unterschied zu ||
const count = 0;
console.log(count || 10); // 10 (0 gilt als falsy)
console.log(count ?? 10); // 0 (funktioniert nur mit null/undefiniert)Befund
Modernes JavaScript bietet viele Tools zum Schreiben von sauberem und effizientem Code. Die Funktionen von ES6 und neueren Versionen fügen nicht nur neue Syntax hinzu, sondern verändern auch den Ansatz der JavaScript-Programmierung, wodurch sie ausdrucksstärker und zuverlässiger wird.
Beginnen Sie damit, diese Funktionen schrittweise in Ihren Projekten anzuwenden. Mit der Zeit werden viele von ihnen zu einem natürlichen Bestandteil Ihres Programmierstils. Modernes JavaScript eröffnet neue Horizonte für Entwickler und macht den Prozess der Anwendungserstellung produktiver und angenehmer.
Kodik - eine Bildungsplattform für angehende Entwickler. Wir erstellen leicht verständliche Kurse und Artikel zu Python, JavaScript, HTML, CSS und anderen modernen Technologien.
Schließen Sie sich an unsere Gemeinschaft!
Abonnieren Sie unseren Telegram-Kanal Kodik, wo wir veröffentlichen:
Neue Artikel und Tutorials zum Thema Programmierung
Nützliche Tipps für Entwickler
Komplexe Themen in einfacher Sprache
Aktuelle Nachrichten aus der IT-Welt
Entwickeln Sie sich zusammen mit Kodik! 🚀