ptorrel/JS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Browse Source
This commit is contained in:
Philippe Torrel
2026-06-25 13:11:36 +02:00
parent db2ec6838a
commit 70794eab31
5 changed files with 299 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
01_grundlagen/unterricht/tag09/02_ar-reverse.html
View File

@@ -41,7 +41,6 @@
// Array Methode - ar.reverse() // Array Methode - ar.reverse()
const namesCopy = [...names]; const namesCopy = [...names];
const namesReversed = namesCopy.reverse(); const namesReversed = namesCopy.reverse();
console.log(namesReversed); // => ['Philippe', 'Kahleel', 'Adel', 'Andreas', 'Ersin'] console.log(namesReversed); // => ['Philippe', 'Kahleel', 'Adel', 'Andreas', 'Ersin']

91
01_grundlagen/unterricht/tag09/03_ar-to-sorted-to-reversed-to-spliced.html Normal file
View File

@@ -0,0 +1,91 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Array - Neue Methoden seit Juni 2023</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<main>
<div class="container py-5">
<h1>Array - Neue Methoden seit Juni 2023</h1>
<hr />
<h2>Array - ar.toSorted()</h2>
<p>
Die
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/toSorted">
toSorted()
</a>
Methode von Array Instanzen ist die kopierende Version der <code>sort()</code> Methode. Sie gibt ein neues
Array mit den Elementen in aufsteigender Reihenfolge zurück.
</p>
<hr />
<h2>Array - ar.toReversed()</h2>
<p>
Die
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/toReversed">
toReversed()
</a>
Methode von Array Instanzen ist das kopierende Gegenstück der <code>reverse()</code> Methode. Sie gibt ein
neues Array mit den Elementen in umgekehrter Reihenfolge zurück.
</p>
<h2>Array - ar.toSpliced()</h2>
<p>
Die
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/toSpliced">
toSpliced()
</a>
Methode von Array-Instanzen ist die kopierende Version der <code>splice()</code>-Methode. Sie gibt ein neues
Array zurück, bei dem einige Elemente entfernt und/oder an einem bestimmten Index ersetzt wurden.
</p>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
const customersOnline = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
const names = [
'Ersin', //
'Andreas',
'Adel',
'Kahleel',
'Philippe',
];
// Array Methode - ar.toSorted()
console.log(names.toSorted()); // => SIDE EFFECT FREE
console.log([...names].sort());
console.log(names);
// Array Methode - ar.toReversed()
console.log(names.toReversed()); // => SIDE EFFECT FREE
console.log([...names].reverse());
console.log(names);
// Array Methode - ar.toSpliced()
// [
// 'Ersin', //
// 'Andreas',
// 'Adel',
// 'Kahleel',
// 'Philippe',
// ];
console.log(names.toSpliced(2, 1, 'Tick')); // => Das Array mit seiner Veränderung wird zurückgegeben
console.log(names); // => SIDE EFFECT FREE
console.log(names.splice(2, 1, 'Tick')); //=> ['Adel'] <- rausgeschnitte Werte
console.log(names); // => ['Ersin', 'Andreas', 'Tick', 'Kahleel', 'Philippe']
</script>
</body>
</html>

60
01_grundlagen/unterricht/tag09/04_ar-sort-compare-fn.html Normal file
View File

@@ -0,0 +1,60 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Array - ar.sort(compareFn)</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<main>
<div class="container py-5">
<h1>Array - ar.sort(compareFn)</h1>
<img
src="https://upload.wikimedia.org/wikipedia/commons/c/c8/Bubble-sort-example-300px.gif"
alt="Bubble sort"
class="img-thumbnail" />
<hr />
<p>
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/sort">
ar.sort(compareFn)
</a>
- Die <strong>sort()</strong> Methode sortiert die Elemente eines Arrays <code>in-place</code> und gibt das
Array zurück. Standardmäßig werden alle Elemente in Strings umgewandelt und dann anhand ihrer UTF-16
Codepoints miteinander verglichen.
</p>
<div class="alert alert-warning">
Das angesprochene Array wird durch <code>in-place-mutation</code> ebenfalls sortiert.
</div>
<hr />
<h3>Rückgabewerte der Vergleichfunktion:</h3>
<ul class="list">
<li>Rückgabewert 0: Positionen bleiben stehen</li>
<li>Rückgabewert &lt; 0: Positionen bleiben stehen</li>
<li>Rückgabewert &gt; 0: Positionen vertauscht</li>
</ul>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
const lottoNumbers = [16, 10, 2, 12, 1, 33];
// Array Methode - ar.sort(compareFn)
console.log([...lottoNumbers].sort()); // => [16, 10, 2, 12, 1, 33]
const numericSorted = [...lottoNumbers].sort((a, b) => {
return a - b;
});
console.log(numericSorted); //=>  [1, 2, 10, 12, 16, 33]
outputEl.textContent = lottoNumbers.sort((a, b) => a - b).join(' - ');
</script>
</body>
</html>

76
01_grundlagen/unterricht/tag09/05_ar-sort-compare-fn-bsp-admin.html Normal file
View File

@@ -0,0 +1,76 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Array - ar.sort(compareFn)</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<main>
<div class="container py-5">
<h1>Array - ar.sort(compareFn)</h1>
<img
src="https://upload.wikimedia.org/wikipedia/commons/c/c8/Bubble-sort-example-300px.gif"
alt="Bubble sort"
class="img-thumbnail" />
<hr />
<p>
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/sort">
ar.sort(compareFn)
</a>
- Die <strong>sort()</strong> Methode sortiert die Elemente eines Arrays <code>in-place</code> und gibt das
Array zurück. Standardmäßig werden alle Elemente in Strings umgewandelt und dann anhand ihrer UTF-16
Codepoints miteinander verglichen.
</p>
<div class="alert alert-warning">
Das angesprochene Array wird durch <code>in-place-mutation</code> ebenfalls sortiert.
</div>
<hr />
<h3>Rückgabewerte der Vergleichfunktion:</h3>
<ul class="list">
<li>Rückgabewert 0: Positionen bleiben stehen</li>
<li>Rückgabewert &lt; 0: Positionen bleiben stehen</li>
<li>Rückgabewert &gt; 0: Positionen vertauscht</li>
</ul>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
const lottoNumbers = [16, 10, 2, 12, 1, 33];
const names = [
'Andreas (Admin)',
'Adel (Admin)',
'Kahleel',
'Philippe (Admin)',
'Zodiac',
'Ersin', //
];
// Array Methode - ar.sort(compareFn)
const isAdmin = (name) => name.endsWith('(Admin)');
const sortedNames = [...names].toSorted((a, b) => {
// Wenn beide Admins, dann lexikographische Sortierung
if (isAdmin(a) && isAdmin(b)) return a > b ? 1 : -1;
// Wenn kleinerer Index bereits Admin. Position bleibt bestehen
if (isAdmin(a)) return -1;
// Wenn größerer Index Admin. Position wird vertauscht (rückt vor)
if (isAdmin(b)) return 1;
// Wenn beide keine Admins, dann lexikographische Sortierung
return a > b ? 1 : -1;
});
console.log(sortedNames);
</script>
</body>
</html>

72
01_grundlagen/unterricht/tag09/06_ar-map.html Normal file
View File

@@ -0,0 +1,72 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Array - ar.map()</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<main>
<div class="container py-5">
<h1>Array - ar.map()</h1>
<p>
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/map">ar.map()</a>
- Die <strong>map()</strong> (engl. abbilden) Methode wendet auf jedes Element des Arrays die bereitgestellte
Funktion an und gibt das Ergebnis in einem neuen Array zurück. (<code>side-effect-free</code>)
</p>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
const lottoNumbers = [16, 10, 2, 12, 1, 33];
const names = [
'Ersin', //
'Andreas',
'Adel',
'Kahleel',
'Philippe',
];
// Array Methode - ar.map((currentValue [, index [, array] ]) => {})
const namesFirstLetter = names.map((name) => {
return `${name.charAt(0)}.`;
});
console.log(namesFirstLetter); // => ['E.', 'A.', 'A.', 'K.', 'P.']
console.log([1, 2, 3, 4].map((n) => n * n)); //=> [1, 4, 9, 16]
console.log(
[1, 2, 3, 4].map((n) => {
n * n;
}),
); // => [undefined, undefined, undefined, undefined]
console.log(
[1, 2].map((n) => {
2;
}),
); // => [undefined, undefined]
console.log(
[1, 2].map((n) => {
return 2;
}),
); // => [2, 2]
console.log([1, 2].map((n) => 2)); // => [2, 2]
// =====================
const createPassword = (str = '') => {
return str.split('').reverse().join('') + str.length;
};
</script>
</body>
</html>