JavaScript - Datenstrukturen

JavaScript Datenstrukturen

---

Datenstrukturen

Eine Datenstruktur ist ein Objekt, das zur Speicherung und Organisation von Daten verwendet wird.

Datenstrukturen ermöglichen die einfache Verarbeitung mehrerer gleichartiger Werte.

---

Datenstrukturen (2)

Eine Datenstruktur ist eine Sammlung mehrerer logisch zusammengehöriger Werte.

Die einfachste Datenstruktur ist eine Liste von Werten.

Je nach Datenstruktur werden die enthaltenen Werte unterschiedlich strukturiert.

---

Datenstrukturen (3)

Manche Datenstrukturen erlauben das mehrfache Speichern gleicher Werte. Andere Datenstrukturen ordnen die Werte bereits beim Speichern in der Datenstruktur.

Jede Datenstruktur unterstützt dazu unterschiedliche Methoden und Konzepte.

---

Collections in JavaScript

Die JavaScript Sprachspezifikation definiert folgende Collections:

• Array
• Set
• Map
• Queue

---

Array

Ein Array ist eine Datenstruktur, die eine Menge von Werten unter einem einzelnen Namen verwaltet.

Jedem Arrayelement ist ein Index zugeordnet. Der Zugriff auf die Elemente eines Arrays wird über den Index gesteuert.

---

Array (2)

---

Array (3)

// Kennzeichnend fuer ein Array sind die
// eckigen Klammern. Die Klammern werden
// auch als Indexopertor bezeichnet.

// Arraydeklaration und Initialisierung
// leeres Array
let numbers = [];

// Arraydeklaration und Initialisierung
// Array mit Elementen
let values = [4, 2, 45, 23, 34];

---

Array (4)

Der Zugriff auf die Elemente eines Arrays wird über den Indexoperator gesteuert.

let numbers = [4,2,8,4,2,1,7,5];

// Ausgabe des ersten und letzten Elements.
console.log(numbers[0]) // erstes Element
console.log(numbers[7]) // letztes Elem.

// Ueberschreiben des 3ten Elements mit dem
// Wert 21
a[2] = 21;

// Erhoehen jedes Elements des Arrays um
// den Wert 2.
for(let i = 0; i < numbers.length; i++){
  numbers[i] += 2;
}

<>

---

Array (5)

// Geben Sie jedes Element des Arrays aus.
for(let i = 0; i < numbers.length; i++){
  console.log(numbers[i]);
}

// Berechnen Sie die Summe aller Elemente
// des Arrays und geben Sie diesen Wert aus
let sum=0;
for(let i = 0; i < numbers.length; i++){
  sum += numbers[i];
}
console.log(sum);

<>

---

Arrayfunktionen

Eine Arrayvariable in JavaScript ist ein Objekt, das auch Funktionen anbietet.

Eine Funktion kann auf einem Objekt angesprochen werden, indem nach dem Variablenname ein Punkt, gefolgt vom Namen der Funktion geschrieben wird. Eine Funktion wird aufgerufen indem nach dem Funktionsnamen runde Klammern geschrieben werden, die auch Parameter aufnehmen können.

---

Arrayfunktionen (2)

// Arraydeklaration und Initialisierung
let myArray = [1, 2, 3];

// Aufruf der Funktion push auf dem Objekt myArray
// mit dem Parameter 4
myArray.push(4);

---

Wichtige Arrayfunktionen

• push
  • Mit der push Funktion wird ein neues Element am Ende des Arrays hinzugefügt.
• pop
  • Mit der pop Funktion wird das letzte Element eines Arrays gelöscht. Das gelöschte Element wird als Rückgabewert zurückgegeben.
• shift
  • Mit der shift Funktion wird das erste Element eines Arrays entfernt. Das gelöschte Element wird als Rückgabewert zurückgegeben. Der Index der verbleibenden Elemente wird angepasst.
• unshift
  • Mit der unshift Funktion wird ein Element an erster Stelle eingefügt. Der Index der verbleibenden Elemente wird angepasst.

---

Arrayfunktionen Beispiel

let numbers = [4, 2, 8, 4, 2, 1, 7, 5];
let size = numbers.length; // Property

console.log(size); // 8

// use push() to add a new element at the end
numbers.push(21);
numbers.push(7);

size = numbers.length;
console.log(size); // 10

// use pop() to remove the last element from an array
let lastElement = numbers.pop();
size = numbers.length;
console.log(lastElement, "size:", size); // 7 size: 9

---

Arrayfunktionen Beispiel (2)

let numbers = [4, 2, 8, 4, 2, 1, 7, 5];
let size = numbers.length; // Property

console.log(size); // 8

// use shift() to remove the first element from an array
let firstElement = numbers.shift();

size = numbers.length;
console.log(firstElement, "size:", size); // 4 size: 7
console.log(numbers[0]); // 2

// use unshift to add a new element at the front
numbers.unshift(42);
size = numbers.length;
console.log(size); // 8

---

Fallbeispiel Arrays

// Kopieren Sie alle geraden Zahlen aus dem numbers Array
// in das even Array
let numbers = [3, 5, 2, 1, 8, 2, 1, 1, 4];
let even = [];

for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] % 2 == 0) {
    even.push(numbers[i]);
  }
}

<>

---

Map

Eine Map ist eine Datenstruktur, welche eine Liste von Schlüssel-Werte Paaren verwaltet. Der Schlüssel wird verwendet, um den gespeicherten Wert nachzuschlagen.

Eine Map kann z.B. mit einem Telefonbuch oder einer Kartei verglichen werden. Der Name einer Person dient dabei als Schlüssel, um die Telefonnummer - den Wert - zu finden.

---

Map Beispiel

// Deklaration und Initialisierung.
// Man verwendet geschwungene Klammern für eine Map.
let phoneBook = {};

phoneBook["norwin"] = "0680/1234567";
phoneBook["hugo"] = "0664/7654321";

// Zugriff auf die Werte einer Map
let phoneNr = phoneBook["norwin"];

// Prüfung ob ein Wert in einer Map gespeichert ist.
if (phoneBook["hugo"]) {
  phoneNr = phoneBook["hugo"];
}

// Auf alle Werte einer Map zugreifen
for (let key in phoneBook) {
  console.log(phoneBook[key]);
}

---

Strukturierte Datentypen

Strukturierte Datentypen fassen logisch zusammenhängende Variablen zu einem strukturellen Verband zusammen.

Strukturierte Datentypen bilden die Grundlage der modernen Programmierung.

---

JavaScript Objekte

Objekte in Javascript können dazu verwendet werden, um Daten in strukturierter Form zu erstellen. Struktur bedeutet, dass zusammenhängende Daten in demselben Objekt gespeichert werden und dass Objekte eine Datenhierarchie haben können.

---

JavaScript Objekte Beispiel

// Deklaration eines leeren Objekts.
let emptyObject = {};

// Deklaration und Initialisierung eines
// Objekts mit Schlüssel - Werte Paaren.
let airship = {
  x: 3,
  y: 4,
  code: "Pufferfish Ship",
  speed: 3,
  pullForce: 5
};

Das Objekt das in der Variable airship gespeichert wird, beinhaltet 5 Eigenschaften (Properties), die als Schlüssel - Wert Paare festgelegt sind.

---

JavaScript Objekte Beispiel (2)

Auf einzelne Eigenschaften eines Objekts kann man mit dem Punkt Operator zugreifen.

Das airship Objekt wird nun durch folgende Werte beschrieben.

airship.x; // Die x Koordinate des Schiffs
airship.code; // Der Herstellercode des Schiffs
airship.speed; // Die Geschwindigkeit des Schiffs
airship.pullForce; // Die Tragkraft des Schiffs

---

JavaScript Objekte Beispiel (3)

Die einzelnen Eigenschaften (Properties) eines Objekts können genauso gelesen und beschrieben werden, wie wir es von anderen Variablen bereits kennen.

let airship = {
  x: 3,
  y: 4,
  code: "Pufferfish Ship",
  speed: 3,
  pullForce: 5
};

// Eigenschaften eines Objekts lesen
console.log(
  "(", airship.x, ",", airship.y, ")"
);
console.log(airship.code);
console.log(airship.speed);

// Ausgabe:
// -> ( 3 , 4 )
// -> Pufferfish Ship
// -> 3

---

JavaScript Objekte Beispiel (4)

let airship = {
  x: 3,
  y: 4,
  code: "Pufferfish Ship",
  speed: 3,
  pullForce: 5
};

// Aendern der Datenfelder eines Objekts
// üeber den Punktoperator
airship.x = 10;
airship.y = 12;
airship.speed = 7;

console.log(
  "(", airship.x, ",", airship.y, ")"
);
console.log(airship.code);
console.log(airship.speed);

// Ausgabe:
// -> ( 10 , 12 )
// -> Pufferfish Ship
// -> 7

---

JavaScript Objekthierarchie

Die Eigenschaften eines Objekts können selbst Objekte oder Arrays sein.

let airship = {
  x: 3,
  y: 4,
  speed: 3,
  altitude: 7,
  hullPoints: 8,
  specification: {
    brand: "Pufferfish Ship",
    minSpeed: 2,
    maxSpeed: 7,
    initialHullPoints: 10,
    maxAltitude: 12
  },
  weapons: [
    {
      code: "Laser Cannon",
      fireArc: ["FRONT"],
      firePower: [0, 2, 1],
      damage: 2,
      keywords: ["EXTRA_DAMAGE"]
    },
    {
      code: "Dersal Turret",
      fireArc: ["ALL_ROUND", "UP"],
      firePower: [3, 2, 0],
      damage: 5,
      keywords: ["ARIAL_ATTACK"]
    }
  ]
};

// Zugriff:
console.log("current speed:", airship.speed);
console.log("min speed:", airship.specification.minsSpeed);

---

let airship = {
  x: 3,
  // ...
  weapons: [
    {
      code: "Laser Cannon",
      fireArc: ["FROMT"],
      firePower: [0, 2, 1],
      damage: 2,
      keywords: ["EXTRA_DAMAGE"]
    },
    {
      code: "Dorsal Turret",
      fireArc: ["ALL_ROUND", "UP"],
      firePower: [3, 2, 0],
      damage: 5,
      keywords: ["ARIAL_ATTACK"]
    }
  ]
};

// Geben Sie die Namen der Waffen eines Luftschiffs aus.

// Variante 1
for (let i = 0; i < airship.weapons.length; i++) {
  console.log(airship.weapons[i].code);
}

// Variante 2
for (let i = 0; i < airship.weapons.length; i++) {
  const weapon = airship.weapons[i];
  console.log(weapon.code);
}

// Variante 3
for (const weapon of airship.weapons) {
  console.log(weapon.code);
}

// Ausgabe:
// -> Laser Cannon
// -> Dorsal Turret

---

JavaScript Objekte - Verändern der Struktur

JavaScript Objekte sind was ihre Struktur betrifft, hochdynamische Datenverbunde.

Die Struktur von JavaScript Objekten kann zur Laufzeit eines Programms verändert werden.

---

// Deklaration eines leeren airship Objekts
let airship = {};

// Hinzufuegen von Datenfeldern nach der Deklaration.
airship.x = 4;
airship.y = 12;

let crew = [
  {
    name: "Paulo Chiodo",
    profession: "KITCHEN_SERVICE"
  }, {
    name: "Rafi Gaulo",
    profession: "GUNNER"
  }
];

airship.crew = crew;

// Pruefen ob ein Objekt eine bestimmte Eigenschaft hat
if (airship.crew != undefined) {
  // Die Eigenschaft crew existiert
}

//Variante 2
if (airship.crew) {
  // Die Eigenschaft crew existiert
}

---

Funktionen als Objekteigenschaften

Die Eigenschaften von Objekten können nicht nur Daten aufnehmen, sondern auch Funktionen.

Wird eine Funktion in einem Objekt als Eigenschaft angegeben kommt zuerst der Name der Funktion als Name für die Eigenschaft, gefolgt von einem Doppelpunkt. Danach erfolgt die Funktionsdefinition, wobei der Name hier entfällt.

let greeter = {
  sayHello: function(name) {
    console.log(`Hello ${name}`);
  }
};

greeter.sayHello("Hugo");

---

Schlüsselwort this

Um in Funktionen, die als Objekteigenschaften definiert wurden auf andere Eigenschaften desselben Objekts zugreifen zu können benötigen wir ein eigenes Schlüsselwort: this

Das Schlüsselwort this ist immer eine Referenz auf das Objekt in dem sich die Funktion befindet.

let obj = {
  count: 0,
  increment: function(nr) {
    this.count += nr;
  },
  incrementByOne: function() {
    this.increment(1);
  }
};