{"id":417,"date":"2023-01-13T09:00:00","date_gmt":"2023-01-13T08:00:00","guid":{"rendered":"https:\/\/rising-bits.com\/?p=417"},"modified":"2023-01-26T16:19:54","modified_gmt":"2023-01-26T15:19:54","slug":"js-ts-array-teil-2","status":"publish","type":"post","link":"https:\/\/rising-bits.com\/en\/js-ts-array-teil-2\/","title":{"rendered":"JS\/TS Array \u2013 Teil 2"},"content":{"rendered":"\n

In diesem Artikel besch\u00e4ftigen wir uns diesmal um die am h\u00e4ufig genutzten (meiner Meinung nach) Funktionen, die ein Array in JavaScript\/TypeScript anbietet.<\/p>\n\n\n\n

.filter()<\/h2>\n\n\n\n

Eine h\u00e4ufige Operation in einem Array ist es darin gesammelte Elemente zu filtern. Die Methode .filter()<\/code> erzeugt ein neues Array mit allen Elementen, die dem Suchkriterium entsprechen. Sofern kein Element dem Kriterium entspricht, erh\u00e4lt man ein leeres Array. Anbei ein paar einfache Beispiele:<\/p>\n\n\n\n

const arr = ['1', 2, undefined, -3, 'foo', null]\nconst filtered = arr.filter(element => element && element > 0)\n\/\/ filtered: ['1', 2]<\/code><\/pre>\n\n\n\n
Da in dem Array arr<\/code> null<\/code> und undefined<\/code> enthalten sind, muss man zuvor pr\u00fcfen, ob der Wert \u00fcberhaupt initialisiert wurde.<\/p>\n\n\n\n
Das Gleiche funktioniert auch, sofern in einem Array Objekte gespeichert sind:<\/p>\n\n\n\n
const arr = [\n        { a: 'foo', b: 'bar' },\n        { a: 'foobar', b: 'baz' },\n    ]\nconst filtered = arr.filter((element) => element.a === 'foobar')\n\/\/ filtered: [{ a: 'foobar', b: 'baz' }]<\/code><\/pre>\n\n\n\n
.find()<\/h2>\n\n\n\n
Eine weitere n\u00fctzliche Funktion von Arrays ist die Methode .find()<\/code>.<\/p>\n\n\n\n
Die Methode .find()<\/code> gibt das erste gefundene Element zur\u00fcck, welches das Suchkriterium entspricht. Sofern kein Element dem Kriterium zusagt, erh\u00e4lt man den Wert undefined<\/code>. Das ist auch der feine aber wichtige Unterschied zwischen der zuvor vorgestellten Methode .filter()<\/a>. Auch dazu ein paar Beispiele:<\/p>\n\n\n\n
const arr = ['1', 2, undefined, -3, 'foo', null, 2]\nconst found = arr.find(element => element === 2)\n\/\/ found: 2<\/code><\/pre>\n\n\n\n
Man erkennt, dass in dem Array zwei mal der Wert 2 hinterlegt ist. Es wird das Element von den beiden zur\u00fcckgegeben.<\/p>\n\n\n\n
Und nun ein Beispiel, in dem die Elemente dem Suchkriterium nicht entsprechen:<\/p>\n\n\n\n
const arr = ['1', 2, undefined, -3, 'foo', null, 2]\nconst notFound = arr.find(element => element === 5)\n\/\/ notFound: undefined<\/code><\/pre>\n\n\n\n
.shift()<\/h2>\n\n\n\n
Die Methode .shift()<\/code> entfernt das erste Element aus dem Array und gibt diesen Wert zur\u00fcck. Somit modifiziert es das urspr\u00fcngliche Array. Sofern das Array zuvor leer war, erh\u00e4lt man den Wert undefined<\/code>. <\/p>\n\n\n\n
Ebenfalls auch ein Beispiel:<\/p>\n\n\n\n
const arr = ['1', 2, undefined, -3, 'foo', null, 2]\nconst first = arr.shift(arr)\n\/\/ arr: [2, undefined, -3, 'foo', null, 2]\n\/\/ first: '1'<\/code><\/pre>\n\n\n\n
.pop()<\/h2>\n\n\n\n
Das Gegenteil von .shift()<\/a><\/code> ist die Methode .pop()<\/code>. Sie gibt das letzte Element zur\u00fcck und entfernt aus dem urspr\u00fcnglichen Array. Ebenfalls wie bei der Methode zuvor wird der Wert undefined<\/code> zur\u00fcckgegeben, falls kein Element im Array vorhanden ist.<\/p>\n\n\n\n
const arr = ['1', 2, undefined, -3, 'foo', null, 2]\nconst last = arr.pop(arr)\n\/\/ arr: ['1', 2, undefined, -3, 'foo', null]\n\/\/ last: 2<\/code><\/pre>\n\n\n\n
.push()<\/h2>\n\n\n\n
Um ein Array nach der Initialisierung zu erweitern bietet sich die Methode .push() an. Man hat die M\u00f6glichkeit mehrere Elemente der Funktion .push() zu \u00fcbergeben. Interessant ist, dass das Array mit dem Schl\u00fcsselwort const initialisiert wurde, im Nachhinein aber ver\u00e4ndert wird. Ich widme mich diesem Thema in einem eigenen Beitrag.<\/p>\n\n\n\n
const arr = ['1', 2, undefined, -3, 'foo', null, 2]\narr.push('bar', 'baz')\n\/\/ arr: ['1', 2, undefined, -3, 'foo', null, 'bar', 'baz']<\/code><\/pre>\n\n\n\n
.join()<\/h2>\n\n\n\n
Kommen wir nun schlussendlich zu der letzten Array-Funktion, welche ich t\u00e4glich als Software-Entwickler nutze. Die Funktion .join() wandelt alle Elemente eines Arrays zu einem String um und verbindet diese mit dem Trennzeichen.<\/p>\n\n\n\n
const arr = ['1', 2, undefined, -3, 'foo', null, 2]\nconst joined = arr.join(' + ')\n\/\/ joined: '1 + 2 + + -3 + foo + + 2'<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
In diesem Artikel besch\u00e4ftigen wir uns diesmal um die am h\u00e4ufig genutzten (meiner Meinung nach) Funktionen, die ein Array in […]<\/p>\n","protected":false},"author":1,"featured_media":423,"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":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[79],"tags":[77,75,76],"class_list":["post-417","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-arrays","tag-array","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\/filter-pop-e1673552067604.jpg?fit=729%2C500&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/rising-bits.com\/en\/wp-json\/wp\/v2\/posts\/417","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=417"}],"version-history":[{"count":6,"href":"https:\/\/rising-bits.com\/en\/wp-json\/wp\/v2\/posts\/417\/revisions"}],"predecessor-version":[{"id":536,"href":"https:\/\/rising-bits.com\/en\/wp-json\/wp\/v2\/posts\/417\/revisions\/536"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rising-bits.com\/en\/wp-json\/wp\/v2\/media\/423"}],"wp:attachment":[{"href":"https:\/\/rising-bits.com\/en\/wp-json\/wp\/v2\/media?parent=417"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rising-bits.com\/en\/wp-json\/wp\/v2\/categories?post=417"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rising-bits.com\/en\/wp-json\/wp\/v2\/tags?post=417"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}