25. Dezember 2021

| Timm Rose

JavaScript lernen: Fortgeschritten

25. Dezember 2021

| Timm Rose

JavaScript lernen: Fortgeschritten

1. Funktionen

Arrow function

const language = ['dänisch', 'spanisch', 'französisch'];
const question = language.map(function (lang) {
    return `Translate into ${lang}?`;
})
console.log(question);

Mit der map-Funktion wird eine Funktion für jedes Element des language-Arrays aufgerufen. Die anonyme Funktion soll dabei als Arrow function geschrieben werden.

1. Schritt: das Schlüsselwort function löschen und die Arrow function-Schreibweise (=>) vor die geschweifte Klammer schreiben

const language = ['dänisch', 'spanisch', 'französisch'];
const question = language.map((lang) => {
    return `Translate into ${lang}?`;
})
console.log(question);

2. Schritt: Klammern um das language Argument entfernen

const language = ['dänisch', 'spanisch', 'französisch'];
const question = language.map(lang => {
    return `Translate into ${lang}?`;
})
console.log(question);

3. Schritt: das Schlüsselwort return entfernen, sodass die gesamte Arrow function kompakt in eine Zeile passt

const language = ['dänisch', 'spanisch', 'französisch'];
const question = language.map(lang => `Translate into ${lang}?`);
console.log(question);

.map() Funktion

Beispiel 1:

Ein Array mit beliebigen Werten soll gemapt und die Werte mit 10 addiert werden

const values = [30, 50, 60, 80]
const result = values.map(value => value + 10);
console.log(result); // [40, 60, 70, 90]

Beispiel 2:

Neben dem oben gezeigten hier noch ein weiteres Beispiel mit der .map() Funktion:

const speaker = 'Tom Don';
const language = ['dänisch', 'spanisch', 'französisch'];
const list = language.map((lang, i) => ({Name: lang, Speaker: speaker, Count: i + 1}))
console.table(list);

Das language Array wird gemapt und als Objekt mit den Eigenschaftsnamen Name, Speaker, Count als Tabelle ausgegeben

Beispiel 3:

In einem weiteren Beispiel wird ein Array mit verschachtelten Objekten mit der Map-Funktion über Template Literals ausgegeben

const language = [
  {
    name: 'englisch',
    speaker: 1268
  },
  {
    name: 'mandarin',
    speaker: 1117
  },
  {
    name: 'spanisch',
    speaker: 538
  }
]

const ranking = `
  <table>
    ${language.map(lg => `<tr><td>${lg.name} sprechen ${lg.speaker} mio. Menschen</td></tr>`)}
  </table>`;

document.body.innerHTML = ranking;

.filter() Funktion

const values = [2, 7, 11, 19, 4, 14, 6];
const high = values.filter(value => value > 10);
console.log(high);

Mit der .filter() Funktion lassen sich zum Beispiel Wertebereiche ermitteln. Im oben gezeigten Beispiel werden die Werte aus dem values Array größer 10 ausgegeben

Immediately invoked function (IIFE)

Closures

Getter, Setter

2. Asynchrone Programmierung

3. Klassen

Prototypen

Konstruktoren

Digitale Rundschau Logo

© 2021 Digitale Rundschau | Impressum