This commit is contained in:
Philippe Torrel
@@ -41,7 +41,6 @@
|
||||
// Array Methode - ar.reverse()
|
||||
|
||||
const namesCopy = [...names];
|
||||
|
||||
const namesReversed = namesCopy.reverse();
|
||||
|
||||
console.log(namesReversed); // => ['Philippe', 'Kahleel', 'Adel', 'Andreas', 'Ersin']
|
||||
|
||||
@@ -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
60
01_grundlagen/unterricht/tag09/04_ar-sort-compare-fn.html
Normal 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 < 0: Positionen bleiben stehen</li>
|
||||
<li>Rückgabewert > 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>
|
||||
@@ -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 < 0: Positionen bleiben stehen</li>
|
||||
<li>Rückgabewert > 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
72
01_grundlagen/unterricht/tag09/06_ar-map.html
Normal 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>
|
||||
Reference in New Issue
Block a user