{ "cells": [ { "cell_type": "markdown", "id": "a8050b44-a23c-4dfa-b1fc-06c0f89a9814", "metadata": { "editable": false, "slideshow": { "slide_type": "" }, "tags": [] }, "source": [ "# Arrays\n", "Hat man eine Vielzahl an (gleichen) Daten, so fällt es schwer, für alle Daten einzelne Variablen anzulegen. Hierzu kann man ein sogenanntes \"Array\" benutzen.\n", "\n", "Ein Array ist ein Objekt, in dem mehrere Werte gespeichert werden können. Man kann es z.B. als \"Liste\" auffassen.\n", "\n", "## Achtung: Unterschiede JavaScript <> TypeScript <> andere Programmiersprachen\n", "### Unterschied 1: Typisierung\n", "\"Klassische\" Programmiersprachen wie Java, C++, C# lassen es nicht zu, dass man in einem Array unterschiedliche Daten speichert und verlangen, dass alle Elemente des Arrays vom gleichen Datentyp sind.\n", "\n", "Da JavaScript nicht streng typisiert ist, fällt diese Einschränkung weg. Nutzt man hingegen die Typisierung mittels TypeScript, so gibt es auch hier diese Einschränkung!\n", "\n", "**Wir werden deshalb vorrangig in einem Array die selben Datentypen speichern, also entweder nur Zahlen oder nur Texte oder nur...**\n", "\n", "### Unterschied 2: Erweiterbarkeit\n", "\"Klassische\" Programmiersprachen haben außerdem die Einschränkung, dass einmal angelegte Arrays weder vergrößert noch verkleinert werden können, also immer gleich viele Speicherplätze enthält. JavaScript/TypeScript/Python lassen dies zu. Wo hierbei die Vor- und Nachteile liegen werden wir im Rahmen des späteren Themas \"Abstrakte Datentypen\" uns näher anschauen" ] }, { "cell_type": "markdown", "id": "5c142d44-d44f-4d17-a370-a26c3729988a", "metadata": { "editable": false, "slideshow": { "slide_type": "" }, "tags": [] }, "source": [ "## Aufbau eines Arrays\n", "Ein Array kann auch als \"Schubladenschrank\" gesehen werden, bei dem in jeder Schublade eine Variable liegt:\n", "\n", "| Index | Wert |\n", "| :---: | :---: |\n", "| [0] | 5 |\n", "| [1] | 9 |\n", "| [2] | 14 |\n", "| [3] | -7 |\n", "| ... | ... |\n", "\n", "Zu beachten ist dabei dass die Zählung (der sogenannte \"Index\") der Schubladen/Felder/Einträge bei 0 beginnt." ] }, { "cell_type": "markdown", "id": "de4692c5-76fd-4559-84a8-5037c5ef8243", "metadata": { "editable": false, "slideshow": { "slide_type": "" }, "tags": [] }, "source": [ "# Arbeiten mit einem Array\n", "Ein Array wird wie eine normale Variable angelegt, jedoch kommen die Werte in eckige Klammern. Hier wird z.B. das Array mit dem Namen `arr` angelegt mit den 4 Einträgen `5,9,14,-7`:\n", "```\n", "let arr = [5,9,14,-7]\n", "```\n", "\n", "*Anmerkung: am Mac werden eckige Klammern mit der Tastenkombination **[option]+[5]** bzw. **[option]+[6]** eingegeben.*\n", "\n", "Wollen wir auf einen einzelnen Eintrag zugreifen, so können wir an den Namen in eckigen Klammern den Index anhängen:\n", "```\n", "console.log( arr[2] ) // gibt \"14\" auf der Konsole aus\n", "arr[1] = 0 // ändert den zweiten Eintrag (mit Index 1) auf den Wert \"0\"\n", "```\n", "\n", "Praktischer als in anderen Programmiersprachen ist, dass Arrays im Gesamten auf der Konsole ausgegeben werden können:\n", "```\n", "console.log( arr ) // gibt alle Inhalte des Arrays aus\n", "```\n", "\n", "Wie oben schon angemerkt, können wir bei JavaScript/TypeScript auch einfach Elemente an ein Array anhängen. Dazu verwenden wir den Befehl `push`:\n", "```\n", "arr.push(42) // fügt an das Array \"arr\" ein neues Element mit dem Wert \"42\" an\n", "```\n", "*(Vor dem Punkt steht natürlich der jeweilige Name unseres Arrays)*" ] }, { "cell_type": "code", "execution_count": 13, "id": "a06dacf8-084f-472a-9983-25403008c7ea", "metadata": { "editable": false, "slideshow": { "slide_type": "" }, "tags": [] }, "outputs": [ { "name": "stdout", "output_type": "stream", "text": [ "[ 5, 9, 14, -7 ]\n", "14\n", "[ 5, 0, 14, -7 ]\n", "[ 5, 0, 14, -7, 42 ]\n" ] } ], "source": [ "let arr = [5,9,14,-7]\n", "console.log( arr )\n", "console.log( arr[2] )\n", "arr[1] = 0\n", "console.log( arr )\n", "arr.push(42)\n", "console.log( arr )" ] }, { "cell_type": "markdown", "id": "4ac76977-797e-4ba4-ab32-dcb3d503a519", "metadata": { "slideshow": { "slide_type": "" }, "tags": [] }, "source": [ "## Rückgabe eines Arrays aus einer Funktion\n", "Natürlich können wir so auch ein Array aus einer Funktion zurückgeben:\n", "```\n", "function toArray(a, b) {\n", " return [a, b]\n", "}\n", "```\n", "Die Funktion übernimmt 2 Parameter und gibt diese als Array wieder zurück." ] }, { "cell_type": "code", "execution_count": 15, "id": "857fdf86-6321-4cb0-a0d7-c625e291239f", "metadata": { "editable": false, "slideshow": { "slide_type": "" }, "tags": [] }, "outputs": [ { "data": { "text/plain": [ "[ \u001b[33m6\u001b[39m, \u001b[33m17\u001b[39m ]" ] }, "execution_count": 15, "metadata": {}, "output_type": "execute_result" } ], "source": [ "function toArray(a, b) {\n", " return [a, b]\n", "}\n", "toArray(6, 17)" ] }, { "cell_type": "markdown", "id": "7daedfbf-a309-4307-954e-c1102662b643", "metadata": { "editable": false, "slideshow": { "slide_type": "" }, "tags": [] }, "source": [ "## Länge eines Arrays\n", "Mit `length` kann man auf die Länge eines Arrays zugreifen:\n", "```\n", "console.log( arr.length ) // schreibt die Länge des Arrays \"arr\" auf die Konsole\n", "```\n", "*(Vor dem Punkt steht natürlich auch hier wieder der jeweilige Name unseres Arrays)*" ] }, { "cell_type": "code", "execution_count": 17, "id": "7c9daad5-3c31-4716-8aa5-5ef080b28df8", "metadata": { "editable": false, "slideshow": { "slide_type": "" }, "tags": [] }, "outputs": [ { "name": "stdout", "output_type": "stream", "text": [ "[ 5, 0, 14, -7, 42 ]\n", "5\n" ] } ], "source": [ "console.log( arr )\n", "console.log( arr.length )" ] } ], "metadata": { "kernelspec": { "display_name": "Deno", "language": "typescript", "name": "deno" }, "language_info": { "codemirror_mode": "typescript", "file_extension": ".ts", "mimetype": "text/x.typescript", "name": "typescript", "nbconvert_exporter": "script", "pygments_lexer": "typescript", "version": "5.8.3" } }, "nbformat": 4, "nbformat_minor": 5 }