1 of 12

Web-Entwicklung, VU

JavaScript Fundamentals 3�Data Structures: Objects and Arrays

Christopher Pollin�https://chpollin.github.io

2 of 12

Data Structures: Objects and Arrays

https://eloquentjavascript.net/04_data.html

3 of 12

Datenstrukturen

In der Informatik ist eine Datenstruktur ein Objekt zur Speicherung und Organisation von Daten.��Struktur, weil die Daten in einer bestimmten Art und Weise angeordnet und verknüpft werden, um den Zugriff auf sie und ihre Verwaltung effizient zu ermöglichen.

Datenstrukturen sind nicht nur durch die enthaltenen Daten charakterisiert, sondern vor allem durch die Operationen auf diesen Daten, die Zugriff und Verwaltung ermöglichen und realisieren.

[https://de.wikipedia.org/wiki/Datenstruktur]

​

​

4 of 12

Stack (Stapelspeicher, Kellerspeicher)

​

“Last in, first out”�“Zuletzt eingelagerte Erdäpfel werden zuerst gegessen”

​

Push: gib etwas hinauf

Pop: nimm etwas herunter

5 of 12

Array (Feld, Liste)

Liste

​

  • A[1..n] benachbarte Elemente stehen im Speicher nebeneinander.�
  • Zugriff auf i-tes Element leicht: �A[i] in O(1) Zeit.�
  • Opertoren: getElement

6 of 12

Array in JavaScript

var fruits = "", text = "", fLen = 0;�fruits = [];�fruits = ["Banana", "Orange", "Apple", "Mango"]; // Array wird deklariert��fLen = fruits.length; // Method .length�console.log("Die Länge des Arrays ist: "+ fLen);�for (var count = 0; count < fLen; count++) { // bis fLen� console.log("An der Stelle " + count + " finden � wir " + fruits[count] + "\n");} // fruits[count]

console.log("Das gesamte Array: "+ fruits);�console.log(fruits); // [ "Banana", "Orange", "Apple", "Mango" ]�console.log(fruits[3]); // fruits[3] = Mango�console.log(typeof fruits); // Object

​

7 of 12

Add / Remove in Arrays

var fruits = "", text = "", fLen = 0;�fruits = ["Banana", "Orange", "Apple", "Mango"];

for (var count = 0; count < fruits.length; count++) {� console.log(count + " : " + fruits[count] + "\n");�}�console.log("\n");��fruits.pop(); // pop() … entfernt den letzten Valie (“Mango”)�fruits.push('Kiwi'); // push() … fügt “Kiwi” am Ende hinzu��for (var count = 0; count < fruits.length; count++) {� console.log(count + " : " + fruits[count] + "\n");�}

​

8 of 12

Methoden

var person = {� firstName: "John",� lastName : "Doe",� id : 5566,� fullName : function() {� return this.firstName + " " + � this.lastName;� }�};�console.log(person.fullName());

​

var person … ist ein Object

​

​

fullName … ist eine Methode;� eine Funktion, die zum Object � person gehört.

​

​

this. … In einer Funktion zeigt � this auf den "Besitzer" � der Funktion: das Object � person�

9 of 12

Build-In Methods

console.log(person.firstName.toUpperCase());’�// JOHN

console.log(person.firstName.slice(1));�// schneidet ab dem n-ten Zeichen ab → ohn

console.log(person.firstName.indexOf('h'));�// gibt den Index von h zurück → 2�// John�// 0123

​

10 of 12

Übung: Array

Nimm das FizzBuzz-Beispiel und speichere, statt es auszugeben, die “FIZZ” und “BUZZ” in ein Array.�Geh dann durch das Array und lösche alle “BUZZ” und mach alle “FIZZ” zu “Fizz” mit der Methode toLowerCase(), indem du sie an der gleichen Stellen wieder abspeicherst.

https://www.w3schools.com/jsref/jsref_splice.asp

array.splice(count, 1);��https://www.w3schools.com/jsref/jsref_tolowercase.asp

​

​

​

11 of 12

var count = 1;

var fizzbuzz = [];

​

for(count; count <=100; count++)

{

if((count % 3 == 0) && (count % 5 == 0)){

fizzbuzz.push('FIZZBUZZ');

}

else if(count % 3 == 0){

fizzbuzz.push('FIZZ');

}

else if ((count % 5 == 0) && !(count % 3 == 0)){

fizzbuzz.push('BUZZ');

}

}

var length = fizzbuzz.length;

for(count = 0; count <= length ; count++)

{

if(fizzbuzz[count] == "BUZZ")

{

fizzbuzz.splice(count, 1);

fizzbuzz.pop();

}

if(fizzbuzz[count] == "FIZZ")

{

fizzbuzz[count] = fizzbuzz[count].toLowerCase();

}

}console.log(fizzbuzz);

​

12 of 12

Übung: Reverse Array

​

​

​

function reverseArray(array) {

let output = [];

for (let i = array.length - 1; i >= 0; i--) {

output.push(array[i]);

}

return output;

}

​

function reverseArrayInPlace(array) {

for (let i = 0; i < Math.floor(array.length / 2); i++) {

let old = array[i];

array[i] = array[array.length - 1 - i];

array[array.length - 1 - i] = old;

}

return array;

}

​

console.log(reverseArray(["A", "B", "C"]));

// → ["C", "B", "A"];

let arrayValue = [1, 2, 3, 4, 5];

reverseArrayInPlace(arrayValue);

console.log(arrayValue);

// → [5, 4, 3, 2, 1]

​