JS-Tutorial

JS-HAUS JS-Einführung JS Wohin JS-Ausgabe JS-Anweisungen JS-Syntax JS-Kommentare JS-Variablen JS Let JS Konst JS-Operatoren JS-Arithmetik JS-Aufgabe JS-Datentypen JS-Funktionen JS-Objekte JS-Ereignisse JS-Strings JS-String-Methoden Suche nach JS-Strings JS-String-Vorlagen JS-Nummern JS-Zahlenmethoden JS-Arrays JS-Array-Methoden JS-Array-Sortierung JS-Array-Iteration JS-Array-Konstante JS-Daten JS-Datumsformate JS Date Get-Methoden JS-Datumssatzmethoden JS Math JS Zufällig JS Boolesche Werte JS-Vergleiche JS-Bedingungen JS-Schalter JS-Schleife für JS-Schleife für In JS-Schleife für Of JS-Schleife While JS Pause JS-Iterables JS-Sets JS-Karten JS Typeof JS-Typkonvertierung JS Bitweise JS RegExp JS-Fehler JS-Bereich JS Heben Strenger JS-Modus JS dieses Schlüsselwort JS-Pfeilfunktion JS-Klassen JS JSON JS-Debugging JS-Styleguide JS Best Practices JS-Fehler JS-Leistung JS Reservierte Wörter

JS-Versionen

JS-Versionen JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Edge JS-Geschichte

JS-Objekte

Objektdefinitionen Objekteigenschaften Objektmethoden Objektanzeige Objektzugriffsmethoden Objektkonstruktoren Objekt-Prototypen Objekt-Iterables Objektsätze Objektkarten Objektreferenz

JS-Funktionen

Funktionsdefinitionen Funktionsparameter Funktionsaufruf Funktionsaufruf Funktion anwenden Funktionsschließungen

JS-Klassen

Klasse Einführung Klassenvererbung Klasse statisch

JS asynchron

JS-Rückrufe JS asynchron JS verspricht JS Async/Warten

JS-HTML-DOM

DOM-Einführung DOM-Methoden DOM-Dokument DOM-Elemente DOM-HTML DOM-Formulare DOM-CSS DOM-Animationen DOM-Ereignisse DOM-Ereignis-Listener DOM-Navigation DOM-Knoten DOM-Sammlungen DOM-Knotenlisten

Stückliste des JS-Browsers

JS-Fenster JS-Bildschirm JS-Standort JS-Geschichte JS-Navigator JS-Popup-Warnung JS-Timing JS-Cookies

JS-Web-APIs

Web-API-Einführung Web Forms-API Webprotokoll-API Webspeicher-API Web Worker-API Web-Fetch-API Web-Geolocation-API

JS AJAX

AJAX-Einführung AJAX-XMLHttp AJAX-Anfrage AJAX-Antwort AJAX-XML-Datei AJAX-PHP AJAX ASP AJAX-Datenbank AJAX-Anwendungen AJAX-Beispiele

JS JSON

JSON-Einführung JSON-Syntax JSON vs. XML JSON-Datentypen JSON-Parsing JSON-Stringify JSON-Objekte JSON-Arrays JSON-Server JSON-PHP JSON-HTML JSON JSONP

JS vs. jQuery

jQuery-Selektoren jQuery-HTML jQuery-CSS jQuery-DOM

JS-Grafik

JS-Grafik JS-Leinwand JS Plotly JS Chart.js JS Google-Diagramm JS D3.js

JS-Beispiele

JS-Beispiele JS-HTML-DOM JS-HTML-Eingabe JS-HTML-Objekte JS-HTML-Ereignisse JS-Browser JS-Editor JS-Übungen JS-Quiz JS-Zertifikat

JS-Referenzen

JavaScript-Objekte HTML-DOM-Objekte


JavaScript -Objekteigenschaften


Eigenschaften sind der wichtigste Teil eines jeden JavaScript-Objekts.


JavaScript-Eigenschaften

Eigenschaften sind die einem JavaScript-Objekt zugeordneten Werte.

Ein JavaScript-Objekt ist eine Sammlung ungeordneter Eigenschaften.

Eigenschaften können normalerweise geändert, hinzugefügt und gelöscht werden, einige sind jedoch schreibgeschützt.


Zugriff auf JavaScript-Eigenschaften

Die Syntax für den Zugriff auf die Eigenschaft eines Objekts lautet:

objectName.property      // person.age

oder

objectName["property"]   // person["age"]

oder

objectName[expression]   // x = "age"; person[x]

Der Ausdruck muss zu einem Eigenschaftsnamen ausgewertet werden.

Beispiel 1

person.firstname + " is " + person.age + " years old.";

Beispiel 2

person["firstname"] + " is " + person["age"] + " years old.";


JavaScript für ... in Schleife

Die JavaScript for...in-Anweisung durchläuft die Eigenschaften eines Objekts.

Syntax

for (let variable in object) {
  // code to be executed
}

Der Codeblock innerhalb der for...inSchleife wird einmal für jede Eigenschaft ausgeführt.

Die Eigenschaften eines Objekts durchlaufen:

Beispiel

const person = {
  fname:" John",
  lname:" Doe",
  age: 25
};

for (let x in person) {
  txt += person[x];
}

Neue Eigenschaften hinzufügen

Sie können einem vorhandenen Objekt neue Eigenschaften hinzufügen, indem Sie ihm einfach einen Wert zuweisen.

Angenommen, das Personenobjekt existiert bereits - Sie können ihm dann neue Eigenschaften zuweisen:

Beispiel

person.nationality = "English";

Eigenschaften löschen

Das deleteSchlüsselwort löscht eine Eigenschaft von einem Objekt:

Beispiel

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

delete person.age;

oder Person["Alter"] löschen;

Beispiel

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

delete person["age"];

Das deleteSchlüsselwort löscht sowohl den Wert der Eigenschaft als auch die Eigenschaft selbst.

Nach dem Löschen kann die Eigenschaft nicht verwendet werden, bevor sie wieder hinzugefügt wird.

Der deleteOperator ist für die Verwendung mit Objekteigenschaften konzipiert. Es hat keine Auswirkungen auf Variablen oder Funktionen.

Der deleteOperator sollte nicht für vordefinierte JavaScript-Objekteigenschaften verwendet werden. Es kann Ihre Anwendung zum Absturz bringen.


Verschachtelte Objekte

Werte in einem Objekt können ein anderes Objekt sein:

Beispiel

myObj = {
  name:"John",
  age:30,
  cars: {
    car1:"Ford",
    car2:"BMW",
    car3:"Fiat"
  }
}

Sie können auf verschachtelte Objekte mit der Punktnotation oder der Klammernotation zugreifen:

Beispiel

myObj.cars.car2;

oder:

Beispiel

myObj.cars["car2"];

oder:

Beispiel

myObj["cars"]["car2"];

oder:

Beispiel

let p1 = "cars";
let p2 = "car2";
myObj[p1][p2];

Verschachtelte Arrays und Objekte

Werte in Objekten können Arrays sein und Werte in Arrays können Objekte sein:

Beispiel

const myObj = {
  name: "John",
  age: 30,
  cars: [
    {name:"Ford", models:["Fiesta", "Focus", "Mustang"]},
    {name:"BMW", models:["320", "X3", "X5"]},
    {name:"Fiat", models:["500", "Panda"]}
  ]
}

Um auf Arrays innerhalb von Arrays zuzugreifen, verwenden Sie eine for-in-Schleife für jedes Array:

Beispiel

for (let i in myObj.cars) {
  x += "<h1>" + myObj.cars[i].name + "</h1>";
  for (let j in myObj.cars[i].models) {
    x += myObj.cars[i].models[j];
  }
}

Eigenschaftsattribute

Alle Eigenschaften haben einen Namen. Darüber hinaus haben sie auch einen Wert.

Der Wert ist eines der Attribute der Eigenschaft.

Andere Attribute sind: aufzählbar, konfigurierbar und beschreibbar.

Diese Attribute definieren, wie auf die Eigenschaft zugegriffen werden kann (ist sie lesbar?, ist sie beschreibbar?)

In JavaScript können alle Attribute gelesen werden, aber nur das value-Attribut kann geändert werden (und nur, wenn die Eigenschaft schreibbar ist).

( ECMAScript 5 verfügt über Methoden zum Abrufen und Festlegen aller Eigenschaftsattribute.)


Prototyp-Eigenschaften

JavaScript-Objekte erben die Eigenschaften ihres Prototyps.

Das deleteSchlüsselwort löscht keine geerbten Eigenschaften, aber wenn Sie eine Prototypeigenschaft löschen, wirkt sich dies auf alle vom Prototyp geerbten Objekte aus.