Erkunden von Arrays und Objekten in JavaScript

Tag 6: Arrays und Objekte in JavaScript erkunden

Datum: 13. Dezember 2024

Willkommen am sechsten Tag Ihrer JavaScript-Reise! Heute beschäftigen wir uns mit zwei wesentlichen Datenstrukturen in JavaScript: Arrays und Objekte. Diese Strukturen bilden das Rückgrat der Datenmanipulation in der modernen Webentwicklung. Durch die Beherrschung von Arrays und Objekten erschließen Sie leistungsstarke Möglichkeiten zum effizienten Speichern, Zugreifen und Transformieren von Daten.

---

1. Was sind Arrays?

Ein Array ist eine Sammlung von Elementen (Elemente genannt), die an zusammenhängenden Speicherorten gespeichert sind. In JavaScript sind Arrays vielseitig und können gemischte Datentypen enthalten.

Arrays erstellen

// Empty array
let emptyArray = [];

// Array with initial elements
let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits); // Output: ["Apple", "Banana", "Cherry"]

// Mixed data types
let mixedArray = [42, "Hello", true];
console.log(mixedArray); // Output: [42, "Hello", true]

---

2. Manipulieren von Arrays

Elemente hinzufügen und entfernen

• Push: Elemente am Ende hinzufügen.
• pop: Das letzte Element entfernen.
• unshift: Elemente am Anfang hinzufügen.
• Umschalt: Entfernen Sie das erste Element.

Beispiel:

let numbers = [1, 2, 3];
numbers.push(4); // Adds 4 to the end
console.log(numbers); // Output: [1, 2, 3, 4]

numbers.pop(); // Removes the last element
console.log(numbers); // Output: [1, 2, 3]

numbers.unshift(0); // Adds 0 to the beginning
console.log(numbers); // Output: [0, 1, 2, 3]

numbers.shift(); // Removes the first element
console.log(numbers); // Output: [1, 2, 3]

---

3. Gängige Array-Methoden

map: Transformiert jedes Element in einem Array.

let nums = [1, 2, 3, 4];
let squares = nums.map(num => num * num);
console.log(squares); // Output: [1, 4, 9, 16]

Filter: Filtert Elemente basierend auf einer Bedingung.

let ages = [12, 18, 22, 16];
let adults = ages.filter(age => age >= 18);
console.log(adults); // Output: [18, 22]

reduce: Reduziert das Array auf einen einzelnen Wert.

let numbers = [1, 2, 3, 4];
let sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // Output: 10

---

4. Was sind Objekte?

Ein Objekt ist eine Sammlung von Eigenschaften, wobei jede Eigenschaft ein Schlüssel-Wert-Paar ist. Objekte eignen sich perfekt zur Darstellung realer Entitäten mit Attributen.

Objekte erstellen

let person = {
  name: "Arjun",
  age: 22,
  isStudent: true,
};
console.log(person.name); // Output: Arjun
console.log(person["age"]); // Output: 22

---

5. Objekte manipulieren

Eigenschaften hinzufügen und aktualisieren

let car = {
  brand: "Tesla",
};
car.model = "Model 3"; // Adding a new property
car.brand = "Ford";    // Updating a property
console.log(car); // Output: { brand: "Ford", model: "Model 3" }

Eigenschaften entfernen

delete car.model;
console.log(car); // Output: { brand: "Ford" }

---

6. Gemeinsame Objektmethoden

Über Objekte iterieren

• Object.keys: Gibt ein Array von Schlüsseln zurück.
• Object.values: Gibt ein Array von Werten zurück.
• Object.entries: Gibt ein Array von Schlüssel-Wert-Paaren zurück.

Beispiel:

// Empty array
let emptyArray = [];

// Array with initial elements
let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits); // Output: ["Apple", "Banana", "Cherry"]

// Mixed data types
let mixedArray = [42, "Hello", true];
console.log(mixedArray); // Output: [42, "Hello", true]

---

7. Arrays vs. Objekte

Funktion Arrays Objekte

Feature	Arrays	Objects
Storage	Ordered collection of items.	Unordered collection of key-value pairs.
Access	Index-based (arr[0]).	Key-based (obj.key).
Best Use Case	List of related items.	Grouping attributes of an entity.

Speicher Geordnete Sammlung von Elementen. Ungeordnete Sammlung von Schlüssel-Wert-Paaren.

---

Zugriff

Indexbasiert (arr[0]). Schlüsselbasiert (obj.key). Bester Anwendungsfall Liste verwandter Elemente. Attribute einer Entität gruppieren.

8. Beispiele aus der Praxis

let numbers = [1, 2, 3];
numbers.push(4); // Adds 4 to the end
console.log(numbers); // Output: [1, 2, 3, 4]

numbers.pop(); // Removes the last element
console.log(numbers); // Output: [1, 2, 3]

numbers.unshift(0); // Adds 0 to the beginning
console.log(numbers); // Output: [0, 1, 2, 3]

numbers.shift(); // Removes the first element
console.log(numbers); // Output: [1, 2, 3]

Beispiel 1: Aufgabenliste mit Arrays

let nums = [1, 2, 3, 4];
let squares = nums.map(num => num * num);
console.log(squares); // Output: [1, 4, 9, 16]

Beispiel 2: Darstellung einer Person mithilfe von Objekten

let ages = [12, 18, 22, 16];
let adults = ages.filter(age => age >= 18);
console.log(adults); // Output: [18, 22]

---

Beispiel 3: Kombinieren von Arrays und Objekten

• 9. Wichtige Erkenntnisse
• Arrays
: Für geordnete Sammlungen verwenden; Nutzen Sie Methoden wie Zuordnen, Filtern und Reduzieren für leistungsstarke Transformationen.
• Objekte
: Verwendung für strukturierte Daten mit Schlüssel-Wert-Paaren; Master-Methoden wie Object.keys und Object.values.

---

Kombinierte Leistung: Kombinieren Sie Arrays und Objekte, um komplexe Daten zu modellieren und zu bearbeiten.

Üben Sie für Tag 6
Erstellen Sie eine Reihe Ihrer Lieblingsfilme und fügen Sie Elemente dynamisch hinzu bzw. entfernen Sie sie.

---

Erstellen Sie ein Objekt zur Darstellung eines Buchs mit Eigenschaften wie Titel, Autor und Jahr. Fügen Sie eine Methode zum Protokollieren der Buchdetails hinzu.

Verwenden Sie Karte und Filter für ein Zahlenarray, um die Quadrate gerader Zahlen zu erhalten.

Nächste Schritte

Am

Tag 7 konzentrieren wir uns auf Ereignisse und das DOM – und bringen Interaktivität in Ihre Webanwendungen. Bis morgen!

Das obige ist der detaillierte Inhalt vonErkunden von Arrays und Objekten in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!