add this, arrow functions, generators and array helpers

Sascha Schulz

2023-06-20 1c6b3cc59a56eb28441bf4317e4728c0da5ed64b

 index.html

@@ -2125,6 +2125,267 @@
                     </code>
                  </pre>
               </section>
               <section>
                  <h3>this</h3>
                  <pre>
                     <code class="js" data-trim data-line-numbers>
                        class MyClass {
                           constructor(a) {
                              this.a = a;
                           }
								
                           getA() {
                              return this.a;
                           }
                        }
								
                        const x = new MyClass(5);
                        const y = new MyClass(10);
								
                        console.log(x.getA());
                        console.log(y.getA());
                     </code>
                  </pre>
                  <pre>
                     <code class="bash" data-trim data-line-numbers>
                        5
                        10
                     </code>
                  </pre>
               </section>
               <section>
                  <pre>
                     <code class="js" data-trim data-line-numbers>
                        global.a = 5;

                        function foo() {
                           this.a += 10;
                        }
								
                        foo();
								
                        console.log(a);
                     </code>
                  </pre>
                  <pre>
                     <code class="bash" data-trim data-line-numbers>
                        15
                     </code>
                  </pre>
               </section>
               <section>
                  <pre>
                     <code class="js" data-trim data-line-numbers>
                        class MyClass {
                           /* ... */
                           setA() {
                              function f() {
                                 this.a += 100;
                              }
                              f();
                           }
                        }
								
                        const x = new MyClass(5);
								
                        x.setA();
								
                        console.log(x.getA());
                     </code>
                  </pre>
                  <pre>
                     <code class="bash" data-trim data-line-numbers>
                        TypeError: Cannot read property 'a' of undefined
                     </code>
                  </pre>
               </section>
               <section>
                  <pre>
                     <code class="js" data-trim data-line-numbers>
                        class MyClass {
                           /* ... */
                           setA() {
                              const me = this;
                              function f() {
                                 me.a += 100;
                              }
                              f();
                           }
                        }
								
                        const x = new MyClass(5);
								
                        x.setA();
								
                        console.log(x.getA());
                     </code>
                  </pre>
                  <pre>
                     <code class="bash" data-trim data-line-numbers>
                        105
                     </code>
                  </pre>
               </section>
               <section>
                  <h3>Arrow-Funktionen</h3>
                  <ul>
                     <li>Kompakte Schreibweise einer normalen Funktion</li>
                     <li>Bei Einzeilern ist das <code>return</code> nicht notwendig</li>
                     <li>this-Pointer des aktuellen Kontextes wird beibehalten</li>
                  </ul>
                  <pre>
                     <code class="js" data-trim data-line-numbers>
                        // Einzeiler
                        const f1 = _ => 1;
                        const f2 = () => 1;
                        const f3 = (x) => x * x;
                        const f4 = (x, y) => x + y;
								
                        // Mehrzeiler
                        const f5 = (x, y) => {
                           return x * y;
                        };
                     </code>
                  </pre>
               </section>
               <section>
                  <pre>
                     <code class="js" data-trim data-line-numbers>
                        class MyClass {
                           /* ... */
                           setA() {
                              const f = () => {
                                 this.a += 100;
                              }
                              f();
                           }
                        }
								
                        const x = new MyClass(5);
								
                        x.setA();
								
                        console.log(x.getA());
                     </code>
                  </pre>
                  <pre>
                     <code class="bash" data-trim data-line-numbers>
                        105
                     </code>
                  </pre>
               </section>
               <section>
                  <h3>Generator-Funktionen</h3>
                  <pre>
                     <code class="js" data-trim data-line-numbers>
                        function* generator() {
                           let i = 0;
								
                           while(true) {
                              yield i;
                              i++;
                           }
                        }
								
                        const g = generator();
								
                        console.log(g.next().value);
                        console.log(g.next().value);
                        console.log(g.next().value);
                     </code>
                  </pre>
                  <pre>
                     <code class="bash" data-trim data-line-numbers>
                        1
                        2
                        3
                     </code>
                  </pre>
               </section>
               <section>
                  <h3>Generator-Funktionen</h3>
                  <pre>
                     <code class="js" data-trim data-line-numbers>
                        function* generator() {
                           yield 1;
                           yield 2;
                           yield 3;
                        }
								
                        const g = generator();
								
                        for (const i of g) {
                           console.log(i);
                        }
                     </code>
                  </pre>
                  <pre>
                     <code class="bash" data-trim data-line-numbers>
                        1
                        2
                        3
                     </code>
                  </pre>
               </section>
               <section>
                  <h3>Nützliche Array-Funktionen</h3>
               </section>
               <section>
                  Aufgabe: Schreibe ein Programm, das den Gesamtumsatz aus dem ersten Halbjahr berechnet
                  <pre>
                     <code class="js" data-trim data-line-numbers>
                        const revenues = [
                           {month: 0, revenue: 1000},
                           {month: 1, revenue: 2000},
                           {month: 2, revenue: 3000},
                           {month: 3, revenue: 4000},
                           {month: 4, revenue: 5000},
                           {month: 5, revenue: 6000},
                           {month: 6, revenue: 6000},
                           {month: 7, revenue: 5000},
                           {month: 8, revenue: 4000},
                           {month: 9, revenue: 3000},
                           {month: 10, revenue: 2000},
                           {month: 11, revenue: 1000}
                        ];
								
                        let totalRevenue = 0;
								
                        /* ... */
								
                        console.log(totalRevenue);
                     </code>
                  </pre>
               </section>
               <section>
                  Lösung
                  <pre>
                     <code class="js" data-trim data-line-numbers>
                        totalRevenue = revenues
                           .filter((revenue) => revenue.month < 6)
                           .map((revenue) => revenue.amount)
                           .reduce((sum, amount) => sum + amount, 0);
                     </code>
                  </pre>
                  <pre>
                     <code class="bash" data-trim data-line-numbers>
                        21000
                     </code>
                  </pre>
               </section>
               <section>
                  <pre>
                     <code class="js" data-trim data-line-numbers>
                        const a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
								
                        a.filter((e) => e > 2); // Filterung
                        a.map((e) => e * 2); // Umformung
                        a.reduce((p, e) => p + e, 0); // Zusammenrechnung / Reduzierung
                        a.some((e) => e > 5); // true wenn min. ein Element die Bedingung erfüllt
                        a.every((e) => e > 5); // true wenn alle Elemente die Bedingung erfüllen
                     </code>
                  </pre>
               </section>
            </section>
         </div>
      </div>