📚
Lerndokumentationen
Web
Web
  • Willkommen
  • HTML
    • Was ist HTML?
    • Elemente
    • Attribute
    • Boilerplate
  • Textelemente
  • Links
  • Dokumentenstruktur
  • Medien
  • Tabellen
  • Formulare
  • CSS
    • Was ist CSS?
    • Syntax
  • Einheiten
  • Selektoren
  • Boxmodell
  • Hintergründe und Rahmen
  • Overflow
  • Bilder
  • Formulare
  • Textelemente
  • Layout
    • Flexbox
    • Grid
  • Responsive Design
  • JavaScript
    • Was ist JavaScript?
    • Einbindung in HTML
    • Grundlagen
      • Variablen und Werte
      • Datentypen
      • Operatoren und Ausdrücke
      • Kontrollstrukturen
      • Schleifen
    • Funktionen
      • Funktionsdeklarationen vs. Funktionsausdrücke
      • Arrow Functions
      • Standardparameter und Rest-Parameter
      • First-Class und Higher-Order-Funktionen
      • Closures
      • IIFE (Immediately Invoked Function Expressions)
    • Arrays
      • Erstellen und Modifizieren
      • Iteration über Arrays
      • Sortieren
      • Nützliche Methoden
    • Objekte und Datenstrukturen
      • Erstellen und Manipulieren
      • Destructuring
      • Sets und Maps
    • Strings
      • Template Literals
      • Methoden
    • Moderne JavaScript-Features
      • Optionale Verkettung
      • Nullish Coalescing Operator
      • Spread und Rest Operator
      • Kurzschlussausdrücke
    • Scope und Kontext
      • this Keyword
      • Call, Apply und Bind
      • Hoisting und Temporal Dead Zone (TDZ)
    • Objektorientierte Programmierung
      • Prototypes
      • Constructor Functions
      • ES6 Classes
      • Die create()-Methode
    • Asynchronous JavaScript
      • AJAX
      • Promises
    • Zahlen, Daten, Internationalisierung und Timer
      • Mathematische Operationen
      • Datum und Zeit
      • Internationalisierung
      • Timer
    • Modules
    • JavaScript im Browser (DOM und Events)
      • Das DOM
      • Elemente auswählen, erstellen und manipulieren
      • Styles, Attribute und Klassen
      • Events und Event Listener
      • Event Propagation
        • Event Delegation
      • DOM Traversing
    • JavaScript Engine und Performance
      • Execution Context und Call Stack
  • TypeScript
    • Was ist TypeScript?
  • Compiler und Runtimes
  • Konfiguration
  • Types
    • Primitive Typen und Typableitung
    • Arrays und Tupel
    • Objekte
    • Top- und Bottom-Types
    • Enums
    • Utility Types
      • Records
  • Typenkombination
    • Union Types
    • Discriminated Unions
    • Intersections
  • Funktionen
  • Klassen
    • Grundlagen
    • Feldinitialisierer
    • Schreibgeschützte Felder
    • Implementieren
    • Private und Geschützte Member
    • Getter und Setter
    • Statische Member
    • Abstrakte Klassen und Member
  • Modules
    • Importieren und Exportieren
    • Ambient Types
    • Namespaces
    • Globals
  • React
    • Was ist React?
    • JSX
    • Komponenten
      • Root-Komponente
      • Styling
      • Listen
      • Conditional Rendering
      • Fragments
    • Props
      • Destructuring
      • Children
    • Interaktivität
      • Event Handling
      • State
      • Formulare
    • State Management
      • State anheben
      • Derived State
    • Komposition und Reusability
      • Komponentenstrukturierung
      • Prop Drilling
      • Komposition
Bereitgestellt von GitBook
Auf dieser Seite
  • Objekte erstellen
  • Datenzugriff
  • Punktnotation
  • Klammernotation
  • Unterschied
  • Objekte manipulieren
  • Property hinzufügen
  • Property bearbeiten
  • Property löschen
  1. JavaScript
  2. Objekte und Datenstrukturen

Erstellen und Manipulieren

Objekte erstellen

const levin = {
  firstName: 'Levin',
  lastName: 'Bänninger',
  age: 17,
  job: 'Software Engineer',
  friends: ['Jonas', 'Marie', 'Peter'],
  work(hours) {
    console.log(`{this.firstName} is working for {hours} hours...`);
  }
};

Wir können in einem Objekt alle Datentypen benutzen

Datenzugriff

Es gibt zwei Möglichkeiten, auf Daten eines Objekts zuzugreifen:

  • Punktnotation

  • Klammernotation

Punktnotation

Die Syntax der Punktnotation sieht wie folgt aus:

objName.property;

Es ist ziemlich einfach. Beispiel mit unseren Personendaten:

const levin = {
  firstName: 'Levin',
  lastName: 'Bänninger',
  age: 17,
  job: 'Student',
  friends: ['Jonas', 'Marie', 'Peter'],
};



Klammernotation

Die Syntax für die Klammerschreibweise sieht wie folgt aus:

objName['expression'];

Wie du sehen kannst, ist das auch ziemlich einfach. Wieder das Beispiel mit unseren Personendaten:

;
;
;

Wenn wir versuchen, auf eine Eigenschaft zuzugreifen, die nicht existiert, erhalten wir undefined.

Unterschied

Der grosse Unterschied, zwischen den beiden ist, dass ich mit der Klammerschreibweise einen Ausdruck eintippen kann. Du könntest zum Beispiel Folgendes tun:

const nameKey = 'Name';

Das ist nicht möglich mit der Punktnotation.

Wann sollte ich was verwenden?

In der Regel solltest du immer die Punktschreibweise verwenden, weil sie viel einfacher zu lesen ist. Verwende die Klammerschreibweise nur, wenn du den Eigenschaftsnamen berechnen musst.

Objekte manipulieren

Property hinzufügen

levin.location = 'Switzerland';
levin['twitter'] = '@LevinBaenninger';

Property bearbeiten

levin.job = 'programmer';
levin['location'] = 'Zurich';

Property löschen

delete levin.location;
delete levin['twitter'];
VorherigeObjekte und DatenstrukturenNächsteDestructuring

Zuletzt aktualisiert vor 3 Monaten