{"id":364,"date":"2023-01-06T15:15:06","date_gmt":"2023-01-06T14:15:06","guid":{"rendered":"https:\/\/rising-bits.com\/?p=364"},"modified":"2023-01-26T16:20:39","modified_gmt":"2023-01-26T15:20:39","slug":"javascript-typescript-array-teil-1","status":"publish","type":"post","link":"https:\/\/rising-bits.com\/en\/javascript-typescript-array-teil-1\/","title":{"rendered":"JS\/TS Array &#8211; Teil 1"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Was ist ein Array?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Um es kurz zu sagen: ein Array ist eine Anordnung von einzelnen Elementen, die aus einem Index, beginnend bei 0 und einem Wert bestehen. Wie der Wert aussieht ist zum aktuellen Zeitpunkt erstmal irrelevant.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Mittels eines Arrays ist es m\u00f6glich mehrere Methoden anzuwenden, z.B. hinzuf\u00fcgen von Elementen am Anfang oder am Ende des Stapels, Sortierungen oder filtern.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In JavaScript\/TypeScript ist es \u00fcberaus einfach ein neues Array zu initialisieren:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"typescript\" class=\"language-typescript line-numbers\">const emptyArray = []\nconst nonEmptyArray = ['foo', '', 'bar', null, 0, undefined]<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Das Array, welches in der Variable nonEmptyArray initialisiert wird, sieht nun wie folgt aus:<\/p>\n\n\n\n<figure class=\"wp-block-table is-style-stripes\"><table class=\"has-fixed-layout\"><thead><tr><th>index<\/th><th>Wert<\/th><\/tr><\/thead><tbody><tr><td>0<\/td><td>foo<\/td><\/tr><tr><td>1<\/td><td><\/td><\/tr><tr><td>2<\/td><td>bar<\/td><\/tr><tr><td>3<\/td><td>null<\/td><\/tr><tr><td>4<\/td><td>0<\/td><\/tr><tr><td>5<\/td><td>undefined<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Damit man nun an die einzelnen Elemente in dem Array auslesen kann, muss man \u00fcber das Array iterieren.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wie so h\u00e4ufig gibt es auch daf\u00fcr wieder mehrere Wege um an das Ziel zu gelangen. Im folgenden stelle ich mehrere Variationen vor.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Variante 1: for-loop<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"typescript\" class=\"language-typescript line-numbers\">for (let i = 0; i &lt; nonEmptyArray.length; i++) {\n    console.log(nonEmptyArray[i])\n}\n\/\/ output: \n\/\/ foo\n\/\/ \n\/\/ bar\n\/\/ null\n\/\/ 0\n\/\/ undefined<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Zur Erkl\u00e4rung des o.g. Codes: verwendet wird eine <code>for-loop<\/code>, welche bei der Initialisierung in drei Abschnitte unterteilt ist. Der Index erh\u00e4lt die Variable <code>i<\/code> und startet bei 0, da auch jedes Array mit dem Index 0 initialisiert wird. Im zweiten Abschnitt wird bestimmt die Abbruchgrenze bestimmt. Im dritten Abschnitt wird definiert um welche Gr\u00f6\u00dfenordnung unser Index <code>i<\/code> erh\u00f6ht werden soll. In unserem Fall immer um 1.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"variant2\">Variante 2: for-each<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"typescript\" class=\"language-typescript line-numbers\">for (const i of nonEmptyArray) {\n    console.log(i)\n}\n\/\/ output: \n\/\/ foo\n\/\/ \n\/\/ bar\n\/\/ null\n\/\/ 0\n\/\/ undefined<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Nun zur Variante 2: man erkennt schon, dass der Code weniger geworden ist und somit ebenfalls auch weniger komplex. Wir m\u00fcssen uns nicht mehr selbst um einen Index k\u00fcmmern, da unsere Variable <code>i<\/code> aufgrund das Zauberwort <code>of<\/code> den tats\u00e4chlichen Wert enth\u00e4lt (<code>'foo'<\/code> etc&#8230;).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Variante 3: map<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"typescript\" class=\"language-typescript line-numbers\">nonEmptyArray.map(i =&gt; console.log(i))\n\/\/ output: \n\/\/ foo\n\/\/ \n\/\/ bar\n\/\/ null\n\/\/ 0\n\/\/ undefined<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Abschlie\u00dfend zur letzten Variante, die k\u00fcrzeste aller vorgestellten Code-Beispiele. Die Funktion <code>.map()<\/code> wird im JavaScript\/TypeScript bei einem Array von Hause aus mitgeliefert. Auch hier ist wie in der <a href=\"#variant2\" data-type=\"internal\" data-id=\"#variant2\">Variante 2<\/a> der eigentliche Wert in der Variable <code>i<\/code> bei jedem Durchlauf gespeichert.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Wissenswertes<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In JavaScript kann ein Array <strong>4.294.967.295 Elemente<\/strong> tragen. Das liegt daran, dass der verwendete Index auf 32 Bit basiert (2<sup>32<\/sup>-2). <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Das Leeren eines Arrays geht am schnellsten mit folgender Anweisung: <strong><code>nonEmptyArray.length = 0<\/code><\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Was ist ein Array? Um es kurz zu sagen: ein Array ist eine Anordnung von einzelnen Elementen, die aus einem [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":395,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[79],"tags":[77,78,75,76],"class_list":["post-364","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-arrays","tag-array","tag-for-each","tag-javascript","tag-typescript"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/mlmwwmq2k3up.i.optimole.com\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/i0.wp.com\/rising-bits.com\/wp-content\/uploads\/2023\/01\/arrays.jpg?fit=1922%2C1137&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/rising-bits.com\/en\/wp-json\/wp\/v2\/posts\/364","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rising-bits.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rising-bits.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rising-bits.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rising-bits.com\/en\/wp-json\/wp\/v2\/comments?post=364"}],"version-history":[{"count":17,"href":"https:\/\/rising-bits.com\/en\/wp-json\/wp\/v2\/posts\/364\/revisions"}],"predecessor-version":[{"id":537,"href":"https:\/\/rising-bits.com\/en\/wp-json\/wp\/v2\/posts\/364\/revisions\/537"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rising-bits.com\/en\/wp-json\/wp\/v2\/media\/395"}],"wp:attachment":[{"href":"https:\/\/rising-bits.com\/en\/wp-json\/wp\/v2\/media?parent=364"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rising-bits.com\/en\/wp-json\/wp\/v2\/categories?post=364"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rising-bits.com\/en\/wp-json\/wp\/v2\/tags?post=364"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}