mirror of
https://github.com/TheTaz25/denis.ergin.git
synced 2025-07-07 21:28:50 +00:00
feat(slides): slides for advanced method syntaxes
This commit is contained in:
Denis Ergin
parent
90431c90db
commit
ba2778991b
6 changed files with 222 additions and 0 deletions
|
|
@ -0,0 +1,56 @@
|
||||||
|
<section>
|
||||||
|
<section>
|
||||||
|
<p>Soweit haben wir Objekte und deren Möglichkeiten "zum arbeiten" kennen gelernt.</p>
|
||||||
|
<p>JavaScript selbst bietet aber darüber hinaus ein paar Syntaktische Möglichkeiten um mit diesen zu arbeiten.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>Object & Array Destructure</h2>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<p>Wir können Inhalte aus Arrays oder Objekten "extrahieren", indem wir die entsprechende Syntax "Rückwärts" schreiben:</p>
|
||||||
|
<pre class="js"><code data-trim data-line-numbers is:raw>
|
||||||
|
// Objekt deklarieren und "destructuren"
|
||||||
|
const myObj = { value: 5, type: 'number' };
|
||||||
|
// Werte sind nicht ans Objekt gebunden
|
||||||
|
const { value, type } = myObj;
|
||||||
|
|
||||||
|
// 5, 'number';
|
||||||
|
console.log(value, type);
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
<pre class="js"><code data-trim data-line-numbers is:raw>
|
||||||
|
// Array deklarieren und "destructuren"
|
||||||
|
const arr = [5, 6, 7, 8];
|
||||||
|
// Wir "überspringen" Werte durch leerlassen
|
||||||
|
const [five, six,, eight] = arr;
|
||||||
|
|
||||||
|
// 5, 6, 8
|
||||||
|
console.log(five, six, eight);
|
||||||
|
</code></pre>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<p>Ein Objekt-Destructure wird oft in Funktionsparametern verwendet</p>
|
||||||
|
<pre class="js"><code data-trim data-line-numbers is:raw>
|
||||||
|
const obj = { name: 'Kevin', age: 23 };
|
||||||
|
|
||||||
|
function greet({ name }) {
|
||||||
|
console.log(`Hallo ${name}!`);
|
||||||
|
}
|
||||||
|
</code></pre>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<p>Die Bibliothek React verwendet ein Array-Destructure um State-Variablen mit einem Nutzer-gewählten Namen zu generieren.</p>
|
||||||
|
<pre class="js"><code data-trim data-line-numbers is:raw>
|
||||||
|
const arr = [5, 6, 7, 8];
|
||||||
|
|
||||||
|
const [nennMichWieDuWillst] = arr;
|
||||||
|
|
||||||
|
// 5
|
||||||
|
console.log(nennMichWieDuWillst);
|
||||||
|
</code></pre>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
---
|
||||||
|
import Title from "./title.astro";
|
||||||
|
import Destructure from "./destructure.astro";
|
||||||
|
import SpreadOperator from "./spread-operator.astro";
|
||||||
|
import RestParameter from "./rest-parameter.astro";
|
||||||
|
---
|
||||||
|
|
||||||
|
<div class="slides">
|
||||||
|
<Title />
|
||||||
|
<Destructure />
|
||||||
|
<SpreadOperator />
|
||||||
|
<RestParameter />
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,58 @@
|
||||||
|
<section>
|
||||||
|
<section>
|
||||||
|
<h2>Rest-Parameter</h2>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<p>Ähnlich zum Spread-Operator besteht der Rest-Parameter aus drei Punkten vor einem Variablen-Namen.</p>
|
||||||
|
<p>Diese sind aber in den Parametern einer Funktion zu finden.</p>
|
||||||
|
<pre class="js"><code data-trim data-line-numbers is:raw>
|
||||||
|
function doSomething(paramA, paramB, ...paramRest) {
|
||||||
|
//
|
||||||
|
}
|
||||||
|
</code></pre>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<p>Mit dieser Syntax sind wir in der Lage, "so viele Parameter wie wir wollen" in einer Funktion entgegen zu nehmen.</p>
|
||||||
|
<p>Wir verwenden diese Syntax aber mit Vorsicht. Wir können schnell den Überblick verlieren, was wir hier entgegen nehmen wollen.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<p>Ein positives Beispiel ist <code>console.log()</code></p>
|
||||||
|
<p>Wir können beliebig viele Parameter mitgeben und alle werden nacheinander ausgeloggt</p>
|
||||||
|
<pre class="js"><code data-trim data-line-numbers is:raw>
|
||||||
|
console.log('a', 5, true, {}, [], false, null, undefined);
|
||||||
|
</code></pre>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<p>Unsere eigene Logging Funktion könnte so aussehen:</p>
|
||||||
|
<pre class="js"><code data-trim data-line-numbers is:raw>
|
||||||
|
const log = (...toLog) => {
|
||||||
|
toLog.forEach((item) => console.log(item));
|
||||||
|
};
|
||||||
|
|
||||||
|
log('a', 5, true, {}, [], false, null, undefined);
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
<p>Wir erkennen: Ein als Rest-Parameter übergebener Wert wird ein Array sein, die Parameter werden in korrekter Reihenfolge in dieses Array gegeben.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<p>Es sind auch folgende Möglichkeiten gegeben:</p>
|
||||||
|
<pre class="js"><code data-trim data-line-numbers is:raw>
|
||||||
|
const log = (level, ...toLog, options) => {
|
||||||
|
// ...
|
||||||
|
};
|
||||||
|
|
||||||
|
// level = 'WARN',
|
||||||
|
// toLog = ['Hallo', 'Welt']
|
||||||
|
// options = { colors: true }
|
||||||
|
console.log('WARN', 'Hallo', 'Welt', { colors: true });
|
||||||
|
</code></pre>
|
||||||
|
<p>Wir können davor oder danach weitere Variablen definieren, JS packt die Werte korrekt zusammen, im obigen Beispiel landet der letzte Parameter in der Variable "options".</p>
|
||||||
|
<p>Es kann aber nur ein Rest-Parameter je Funktion Angegeben werden.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
@ -0,0 +1,83 @@
|
||||||
|
<section>
|
||||||
|
<section>
|
||||||
|
<h2>Der Spread-Operator</h2>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<p>Mithilfe des Spread-Operators können wir Iterierbare Variablen (Strings, Arrays, Objekte) "expandieren" (Ich nenne es gerne "auspacken").</p>
|
||||||
|
<p>Der Spread-Operator besteht aus drei Punkten ( <code>...</code> ) die vor der zu iterierenden Variable angeführt werden.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<p>Use-Cases</p>
|
||||||
|
<ul>
|
||||||
|
<li>String in ein Char-Array überführen</li>
|
||||||
|
<li>Iterierbare Elemente zusammenführen (concat)</li>
|
||||||
|
<li>Shallow-Cloning</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h3>Beispiel Strings</h3>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<p>Seltener Use-Case, zeigt aber dafür umso einfacher was hier genau passiert</p>
|
||||||
|
<pre class="js"><code data-trim data-line-numbers is:raw>
|
||||||
|
const text = "Hallo Welt!";
|
||||||
|
|
||||||
|
// H a l l o W e l t !
|
||||||
|
console.log(...text);
|
||||||
|
</code></pre>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h3>Concat-ähnliches Verhalten</h3>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<p>Indem wir 2 oder mehrere Arrays in ein neues "Spreaden", erhalten wir alle Elemente innerhalb eines Arrays.</p>
|
||||||
|
<pre class="js"><code data-trim data-line-numbers is:raw>
|
||||||
|
const arr1 = ['H', 'a', 'l', 'l', 'o'];
|
||||||
|
const arr2 = ['W', 'e', 'l', 't', '!'];
|
||||||
|
|
||||||
|
// Wir können auch zusätzliche Inhalte dazu setzten
|
||||||
|
// (in diesem Fall ein Space zwischen den beiden Wörtern)
|
||||||
|
const joined = [...arr1, ' ', ...arr2];
|
||||||
|
|
||||||
|
console.log(joined);
|
||||||
|
</code></pre>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h3>Shallow Cloning</h3>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<p>Der Spread Operator sorgt Effektiv dafür, dass die Inhalte eines Arrays kopiert werden.</p>
|
||||||
|
<pre class="js"><code data-trim data-line-numbers is:raw>
|
||||||
|
const arr = [1,2,3];
|
||||||
|
const copyByReference = arr;
|
||||||
|
|
||||||
|
// true
|
||||||
|
console.log(arr === copyByReference);
|
||||||
|
|
||||||
|
// false
|
||||||
|
console.log(arr === [...arr]);
|
||||||
|
</code></pre>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<p>Wichtig hierbei ist zu beachten, dass es sich hierbei um einen <strong>shallow-clone</strong> handelt.</p>
|
||||||
|
<p>Die Inhalte selber werden "as is" kopiert, Objekte werden also nicht neu generiert sondern hier werden wieder nur Speicheradressen kopiert:</p>
|
||||||
|
<pre class="js"><code data-trim data-line-numbers is:raw>
|
||||||
|
const obj = { value: 5 };
|
||||||
|
const arr = [obj];
|
||||||
|
|
||||||
|
const shallowClone = [...arr];
|
||||||
|
|
||||||
|
// true
|
||||||
|
console.log(shallowClone[0] === obj);
|
||||||
|
</code></pre>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
<section>
|
||||||
|
<h1>Erweiterte Methodiken auf Objekten</h1>
|
||||||
|
</section>
|
||||||
9
src/pages/slides/javascript/04-advanced-methodics.astro
Normal file
9
src/pages/slides/javascript/04-advanced-methodics.astro
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
---
|
||||||
|
import Reveal from "../../../layouts/Reveal.astro";
|
||||||
|
import Slides from '../../../components/slides/javascript/04-advanced-objects/index.astro'
|
||||||
|
---
|
||||||
|
<!-- Array Destructure, Rest and Spread -->
|
||||||
|
|
||||||
|
<Reveal title="Advanced Object Manipulation">
|
||||||
|
<Slides />
|
||||||
|
</Reveal>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue