-
Notifications
You must be signed in to change notification settings - Fork 0
/
javascript-arrays.html
91 lines (75 loc) · 20.3 KB
/
javascript-arrays.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html><html lang="de-ch"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>JavaScript arrays - Finecloud</title><meta name="description" content="Array An array combines multiple values in a single variable Arrays are helpful if the number of values is huge or dynamic Each value of an array has a unique numerical index // Normal variables hold exactly one value const colorA = 'blue'; const colorB…"><meta name="generator" content="Publii Open-Source CMS for Static Site"><link rel="stylesheet" href="https://www.finecloud.ch/media/plugins/syntaxHighlighter/prism-black.css"><link rel="canonical" href="https://www.finecloud.ch/javascript-arrays.html"><link rel="alternate" type="application/atom+xml" href="https://www.finecloud.ch/feed.xml"><link rel="alternate" type="application/json" href="https://www.finecloud.ch/feed.json"><meta property="og:title" content="JavaScript arrays"><meta property="og:site_name" content="Finecloud"><meta property="og:description" content="Array An array combines multiple values in a single variable Arrays are helpful if the number of values is huge or dynamic Each value of an array has a unique numerical index // Normal variables hold exactly one value const colorA = 'blue'; const colorB…"><meta property="og:url" content="https://www.finecloud.ch/javascript-arrays.html"><meta property="og:type" content="article"><link rel="shortcut icon" href="https://www.finecloud.ch/media/website/finecloud.png" type="image/png"><link rel="stylesheet" href="https://www.finecloud.ch/assets/css/style.css?v=39da73365516a098a9b73b721fc970e2"><script type="application/ld+json">{"@context":"http://schema.org","@type":"Article","mainEntityOfPage":{"@type":"WebPage","@id":"https://www.finecloud.ch/javascript-arrays.html"},"headline":"JavaScript arrays","datePublished":"2023-01-17T19:48","dateModified":"2023-03-29T20:14","description":"Array An array combines multiple values in a single variable Arrays are helpful if the number of values is huge or dynamic Each value of an array has a unique numerical index // Normal variables hold exactly one value const colorA = 'blue'; const colorB…","author":{"@type":"Person","name":"Finecloud","url":"https://www.finecloud.ch/authors/finecloud/"},"publisher":{"@type":"Organization","name":"Finecloud"}}</script><meta name="google-site-verification" content="seFY9U12uiEq5U3_MyZiX6XWzk0AVFl9zITr2ZKsytY"></head><body><div class="site-container"><header class="top" id="js-header"><a class="logo" href="https://www.finecloud.ch/">Finecloud</a><nav class="navbar js-navbar"><button class="navbar__toggle js-toggle" aria-label="Menu" aria-haspopup="true" aria-expanded="false"><span class="navbar__toggle-box"><span class="navbar__toggle-inner">Menu</span></span></button><ul class="navbar__menu"><li><a href="https://www.finecloud.ch/" target="_self">Blog</a></li><li><a href="https://www.finecloud.ch/tags/" target="_self">Tags</a></li></ul></nav><div class="search"><div class="search__overlay js-search-overlay"><div class="search__overlay-inner"><form action="https://www.finecloud.ch/search.html" class="search__form"><input class="search__input js-search-input" type="search" name="q" placeholder="search..." aria-label="search..." autofocus="autofocus"></form><button class="search__close js-search-close" aria-label="Close">Close</button></div></div><button class="search__btn js-search-btn" aria-label="Search"><svg role="presentation" focusable="false"><use xlink:href="https://www.finecloud.ch/assets/svg/svg-map.svg#search"/></svg></button></div></header><main><article class="post"><div class="hero"><figure class="hero__image hero__image--overlay"><img src="https://www.finecloud.ch/media/website/download.jpg" srcset="https://www.finecloud.ch/media/website/responsive/download-xs.jpg 300w, https://www.finecloud.ch/media/website/responsive/download-sm.jpg 480w, https://www.finecloud.ch/media/website/responsive/download-md.jpg 768w, https://www.finecloud.ch/media/website/responsive/download-lg.jpg 1024w, https://www.finecloud.ch/media/website/responsive/download-xl.jpg 1360w, https://www.finecloud.ch/media/website/responsive/download-2xl.jpg 1600w" sizes="100vw" loading="eager" alt=""></figure><header class="hero__content"><div class="wrapper"><div class="post__meta"><time datetime="2023-01-17T19:48">Januar 17, 2023</time></div><h1>JavaScript arrays</h1></div></header></div><div class="wrapper post__entry"><div class="post__toc"><h3>Table of Contents</h3><ul><li><a href="#mcetoc_1gn0hhd5uff">Array</a></li><li><a href="#mcetoc_1gn0hhd5ufg">Creating an Array</a></li><li><a href="#mcetoc_1gn0hhd5ufh">Modifying an Array</a></li><li><a href="#mcetoc_1gn0icm1fj8">FIFO and LIFO</a></li><li><a href="#mcetoc_1gn0icm1fj9">Loop Through an Array</a></li><li><a href="#mcetoc_1gn0icm1fja">Arrays are Objects</a></li></ul></div><h2 id="mcetoc_1gn0hhd5uff">Array</h2><ul><li>An array combines multiple values in a single variable</li><li>Arrays are helpful if the number of values is huge or dynamic</li><li>Each value of an array has a unique numerical index</li></ul><pre class="hljs" style="color: #a9b7c6; background: #282b2e; display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-comment" style="color: grey;">// Normal variables hold exactly one value</span>
<span class="hljs-keyword" style="color: #cc7832;">const</span> colorA = <span class="hljs-string" style="color: #6a8759;">"blue"</span>;
<span class="hljs-keyword" style="color: #cc7832;">const</span> colorB = <span class="hljs-string" style="color: #6a8759;">"red"</span>;
<span class="hljs-keyword" style="color: #cc7832;">const</span> colorC = <span class="hljs-string" style="color: #6a8759;">"yellow"</span>;
<span class="hljs-comment" style="color: grey;">// An array variable can hold more than one value</span>
<span class="hljs-keyword" style="color: #cc7832;">const</span> colors = [<span class="hljs-string" style="color: #6a8759;">"blue"</span>, <span class="hljs-string" style="color: #6a8759;">"red"</span>, <span class="hljs-string" style="color: #6a8759;">"yellow"</span>];
<span class="hljs-comment" style="color: grey;">// Each value of the array can be accessed by a numerical index</span>
<span class="hljs-built_in">console</span>.log(colors[<span class="hljs-number" style="color: #6897bb;">0</span>]); <span class="hljs-comment" style="color: grey;">// >> blue</span>
<span class="hljs-built_in">console</span>.log(colors[<span class="hljs-number" style="color: #6897bb;">1</span>]); <span class="hljs-comment" style="color: grey;">// >> red</span>
<span class="hljs-built_in">console</span>.log(colors[<span class="hljs-number" style="color: #6897bb;">2</span>]); <span class="hljs-comment" style="color: grey;">// >> yellow</span>
</pre><h2 id="mcetoc_1gn0hhd5ufg">Creating an Array</h2><ul><li>An array can be created as a literal or by using the array constructor (not recommended)</li><li>The values of an array may have different types</li></ul><pre class="hljs" style="color: #a9b7c6; background: #282b2e; display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-comment" style="color: grey;">// Array literal (recommended)</span>
<span class="hljs-keyword" style="color: #cc7832;">const</span> a = [<span class="hljs-string" style="color: #6a8759;">"one"</span>, <span class="hljs-string" style="color: #6a8759;">"two"</span>, <span class="hljs-string" style="color: #6a8759;">"three"</span>, <span class="hljs-string" style="color: #6a8759;">"four"</span>];
<span class="hljs-comment" style="color: grey;">// Array constructor (not recommended)</span>
<span class="hljs-keyword" style="color: #cc7832;">const</span> b = <span class="hljs-keyword" style="color: #cc7832;">new</span> <span class="hljs-built_in">Array</span>(<span class="hljs-string" style="color: #6a8759;">"Apple"</span>, <span class="hljs-string" style="color: #6a8759;">"Mango"</span>, <span class="hljs-string" style="color: #6a8759;">"Kiwi"</span>);
<span class="hljs-keyword" style="color: #cc7832;">const</span> c = <span class="hljs-keyword" style="color: #cc7832;">new</span> <span class="hljs-built_in">Array</span>(<span class="hljs-number" style="color: #6897bb;">3</span>, <span class="hljs-number" style="color: #6897bb;">4</span>); <span class="hljs-comment" style="color: grey;">// creates [3, 4]</span>
<span class="hljs-keyword" style="color: #cc7832;">const</span> d = <span class="hljs-keyword" style="color: #cc7832;">new</span> <span class="hljs-built_in">Array</span>(<span class="hljs-number" style="color: #6897bb;">3</span>); <span class="hljs-comment" style="color: grey;">// creates [, , ] (three empty solots)</span>
<span class="hljs-comment" style="color: grey;">// Array with different types</span>
<span class="hljs-keyword" style="color: #cc7832;">const</span> e = [<span class="hljs-string" style="color: #6a8759;">"Apple"</span>, <span class="hljs-number" style="color: #6897bb;">5</span>, <span class="hljs-literal" style="color: #6897bb;">true</span>, <span class="hljs-number" style="color: #6897bb;">4.25</span>, <span class="hljs-literal" style="color: #6897bb;">null</span>];
</pre><h2 id="mcetoc_1gn0hhd5ufh">Modifying an Array</h2><ul><li>Elements can be modified and inserted using the index operator</li><li>In addition, there are many useful methods to work with arrays (see developer.mozilla.org)</li></ul><pre class="hljs" style="color: #a9b7c6; background: #282b2e; display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-keyword" style="color: #cc7832;">const</span> a = [<span class="hljs-number" style="color: #6897bb;">7</span>, <span class="hljs-number" style="color: #6897bb;">8</span>, <span class="hljs-number" style="color: #6897bb;">40</span>];
<span class="hljs-comment" style="color: grey;">// Change value</span>
a[<span class="hljs-number" style="color: #6897bb;">2</span>] = <span class="hljs-number" style="color: #6897bb;">45</span>; <span class="hljs-comment" style="color: grey;">// [7, 8, 45]</span>
<span class="hljs-comment" style="color: grey;">// Insert new values</span>
a[a.length] = <span class="hljs-number" style="color: #6897bb;">17</span>; <span class="hljs-comment" style="color: grey;">// [7, 8, 45, 17]</span>
a[<span class="hljs-number" style="color: #6897bb;">6</span>] = <span class="hljs-number" style="color: #6897bb;">23</span>; <span class="hljs-comment" style="color: grey;">// [7, 8, 45, 17, , , 23] (length: 7)</span>
<span class="hljs-built_in">console</span>.log(a[<span class="hljs-number" style="color: #6897bb;">5</span>]); <span class="hljs-comment" style="color: grey;">// >> undefined</span>
<span class="hljs-comment" style="color: grey;">// Remove some elements</span>
a.splice(<span class="hljs-number" style="color: #6897bb;">2</span>, <span class="hljs-number" style="color: #6897bb;">4</span>); <span class="hljs-comment" style="color: grey;">// [7, 8, 23]</span>
<span class="hljs-comment" style="color: grey;">// Use array as stack</span>
a.push(<span class="hljs-number" style="color: #6897bb;">12</span>); <span class="hljs-comment" style="color: grey;">// [7, 8, 23, 12]</span>
<span class="hljs-built_in">console</span>.log(a.pop()); <span class="hljs-comment" style="color: grey;">// >> 12 (a: [7, 8, 23])</span>
</pre><h2 id="mcetoc_1gn0icm1fj8">FIFO and LIFO</h2><p>No these are not Dogs. It's about two different concepts and the main difference between a Queue and a Stack:</p><ul><li>FIFO = first in first out -> that's a queue</li><li>LIFO = last in first out -> that's a stack</li></ul><p>In JavaScript we use <code>push</code> to put's it on top of stack and <code>pop</code> to pull an element from the top of a stack </p><h2 id="mcetoc_1gn0icm1fj9">Loop Through an Array</h2><p>There are different ways to iterate over the elements of an array:</p><pre class="hljs" style="color: #a9b7c6; background: #282b2e; display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-keyword" style="color: #cc7832;">const</span> colors = [<span class="hljs-string" style="color: #6a8759;">"blue"</span>, <span class="hljs-string" style="color: #6a8759;">"red"</span>, , <span class="hljs-string" style="color: #6a8759;">"black"</span>];
<span class="hljs-comment" style="color: grey;">// Using for loop</span>
<span class="hljs-keyword" style="color: #cc7832;">for</span> (<span class="hljs-keyword" style="color: #cc7832;">let</span> i = <span class="hljs-number" style="color: #6897bb;">0</span>; i < a.length; i++) { <span class="hljs-comment" style="color: grey;">// >> 0 -> blue</span>
<span class="hljs-built_in">console</span>.log(i+<span class="hljs-string" style="color: #6a8759;">" -> "</span>+a[i]); <span class="hljs-comment" style="color: grey;">// >> 1 -> red</span>
} <span class="hljs-comment" style="color: grey;">// >> 2 -> undefined</span>
<span class="hljs-comment" style="color: grey;">// >> 3 -> black</span>
<span class="hljs-comment" style="color: grey;">// Using for...of loop</span>
<span class="hljs-keyword" style="color: #cc7832;">for</span> (<span class="hljs-keyword" style="color: #cc7832;">let</span> color <span class="hljs-keyword" style="color: #cc7832;">of</span> colors) { <span class="hljs-comment" style="color: grey;">// >> blue</span>
<span class="hljs-built_in">console</span>.log(color); <span class="hljs-comment" style="color: grey;">// >> red</span>
} <span class="hljs-comment" style="color: grey;">// >> undefined</span>
<span class="hljs-comment" style="color: grey;">// >> black</span>
<span class="hljs-comment" style="color: grey;">// Using forEach method (empty slots are skipped)</span>
a.forEach(<span class="hljs-function"><span class="hljs-keyword" style="color: #cc7832;">function</span>(<span class="hljs-params">item, index</span>) </span>{ <span class="hljs-comment" style="color: grey;">// >> 0 -> blue</span>
<span class="hljs-built_in">console</span>.log(index+<span class="hljs-string" style="color: #6a8759;">" -> "</span>+item); <span class="hljs-comment" style="color: grey;">// >> 1 -> red</span>
}); <span class="hljs-comment" style="color: grey;">// >> 3 -> black</span>
</pre><h2 id="mcetoc_1gn0icm1fja">Arrays are Objects</h2><ul><li>Arrays in JavaScript are based on numerical indexes</li><li>Named indexes access properties of an object</li><li>Since arrays are objects, both types of indexes can be used but address different concepts</li></ul><pre class="hljs" style="color: #a9b7c6; background: #282b2e; display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-keyword" style="color: #cc7832;">const</span> colors = [<span class="hljs-string" style="color: #6a8759;">"blue"</span>, <span class="hljs-string" style="color: #6a8759;">"red"</span>, <span class="hljs-string" style="color: #6a8759;">"black"</span>];
<span class="hljs-built_in">console</span>.log(colors.length); <span class="hljs-comment" style="color: grey;">// >> 3</span>
<span class="hljs-comment" style="color: grey;">// Named indexes address object properties and not array values</span>
colors[<span class="hljs-string" style="color: #6a8759;">"favorite"</span>] = <span class="hljs-string" style="color: #6a8759;">"pink"</span>;
<span class="hljs-built_in">console</span>.log(colors.favorite); <span class="hljs-comment" style="color: grey;">// >> pink</span>
<span class="hljs-built_in">console</span>.log(colors.length); <span class="hljs-comment" style="color: grey;">// >> 3 (still!)</span>
colors.forEach(<span class="hljs-function"><span class="hljs-keyword" style="color: #cc7832;">function</span>(<span class="hljs-params">item, index</span>) </span>{ <span class="hljs-comment" style="color: grey;">// >> 0 -> blue</span>
<span class="hljs-built_in">console</span>.log(index+<span class="hljs-string" style="color: #6a8759;">" -> "</span>+item); <span class="hljs-comment" style="color: grey;">// >> 1 -> red</span>
}); <span class="hljs-comment" style="color: grey;">// >> 2 -> black</span>
<span class="hljs-keyword" style="color: #cc7832;">for</span> (<span class="hljs-keyword" style="color: #cc7832;">let</span> i <span class="hljs-keyword" style="color: #cc7832;">in</span> colors) { <span class="hljs-comment" style="color: grey;">// >> 0 -> blue</span>
<span class="hljs-built_in">console</span>.log(i+<span class="hljs-string" style="color: #6a8759;">" -> "</span>+colors[i]); <span class="hljs-comment" style="color: grey;">// >> 1 -> red</span>
} <span class="hljs-comment" style="color: grey;">// >> 2 -> black</span>
<span class="hljs-comment" style="color: grey;">// >> favorite -> pink</span>
</pre><p> </p><p> </p><p> </p><p> </p><p> </p></div><footer class="wrapper post__footer"><p class="post__last-updated">This article was updated on März 29, 2023</p><ul class="post__tag"><li><a href="https://www.finecloud.ch/tags/array/">array</a></li><li><a href="https://www.finecloud.ch/tags/javascript/">javascript</a></li><li><a href="https://www.finecloud.ch/tags/softwareentwicklung/">software development</a></li></ul><div class="post__share"></div></footer></article><nav class="post__nav"><div class="post__nav-inner"><div class="post__nav-prev"><svg width="1.041em" height="0.416em" aria-hidden="true"><use xlink:href="https://www.finecloud.ch/assets/svg/svg-map.svg#arrow-prev"/></svg> <a href="https://www.finecloud.ch/javascript-functions.html" class="post__nav-link" rel="prev"><span>Previous</span> JavaScript functions</a></div><div class="post__nav-next"><a href="https://www.finecloud.ch/difference-between-heap-and-stack.html" class="post__nav-link" rel="next"><span>Next</span> Difference between heap and stack </a><svg width="1.041em" height="0.416em" aria-hidden="true"><use xlink:href="https://www.finecloud.ch/assets/svg/svg-map.svg#arrow-next"/></svg></div></div></nav><div class="post__related related"><div class="wrapper"><h2 class="h5 related__title">You should also read:</h2><article class="related__item"><div class="feed__meta"><time datetime="2023-01-31T07:15" class="feed__date">Januar 31, 2023</time></div><h3 class="h1"><a href="https://www.finecloud.ch/javascript-advanced-features.html">JavaScript advanced features</a></h3></article><article class="related__item"><div class="feed__meta"><time datetime="2023-01-24T08:35" class="feed__date">Januar 24, 2023</time></div><h3 class="h1"><a href="https://www.finecloud.ch/javascript-and-the-browser.html">JavaScript and the browser</a></h3></article><article class="related__item"><div class="feed__meta"><time datetime="2023-01-17T20:13" class="feed__date">Januar 17, 2023</time></div><h3 class="h1"><a href="https://www.finecloud.ch/javascript-objects.html">JavaScript objects</a></h3></article></div></div></main><footer class="footer"><div class="footer__copyright"><p>Powered by Publii</p></div><button onclick="backToTopFunction()" id="backToTop" class="footer__bttop" aria-label="Back to top" title="Back to top"><svg><use xlink:href="https://www.finecloud.ch/assets/svg/svg-map.svg#toparrow"/></svg></button></footer></div><script>window.publiiThemeMenuConfig = {
mobileMenuMode: 'sidebar',
animationSpeed: 300,
submenuWidth: 'auto',
doubleClickTime: 500,
mobileMenuExpandableSubmenus: true,
relatedContainerForOverlayMenuSelector: '.top',
};</script><script defer="defer" src="https://www.finecloud.ch/assets/js/scripts.min.js?v=6ca8b60e6534a3888de1205e82df8528"></script><script>var images = document.querySelectorAll('img[loading]');
for (var i = 0; i < images.length; i++) {
if (images[i].complete) {
images[i].classList.add('is-loaded');
} else {
images[i].addEventListener('load', function () {
this.classList.add('is-loaded');
}, false);
}
}</script><script defer="defer" src="https://www.finecloud.ch/media/plugins/syntaxHighlighter/prism.js"></script></body></html>