JavaScript-Typ

Inhaltsverzeichnis

Inhaltsverzeichnis anzeigen

In JavaScript gibt es 5 verschiedene Datentypen, die Werte enthalten können:

Zeichenfolge
Nummer
boolean
Objekt
Funktion

Es gibt 6 Arten von Objekten:

Objekt
Datum
Array
String
Nummer
Boolean

Und 2 Datentypen, die keine Werte enthalten können:

null
undefiniert

Der Typ des Operators

Sie können den Operator typeof verwenden, um den Datentyp von a zu ermitteln JavaScript-Variable.

Beispiel

typeof "John"                 
// Returns "string" 
typeof 3.14                   
// Returns "number"
typeof NaN                    
// Returns "number"
typeof false                 
// Returns "boolean"
typeof [1,2,3,4]              // Returns 
 "object"
typeof {name:'John', age:34} 
// Returns "object"
typeof new Date()             
// Returns "object"
typeof function () {}         // Returns 
 "function"
typeof myCar                  
// Returns "undefined" *
typeof null                   
// Returns "object"

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>
<h2>The typeof Operator</h2>

<p>The typeof operator returns the type of a variable, object, function or expression:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"'John' is " + typeof "John" + "<br>" +
"3.14 is " + typeof 3.14 + "<br>" +
"NaN is " + typeof NaN + "<br>" +
"false is " + typeof false + "<br>" +
"[1, 2, 3, 4] is " + typeof [1, 2, 3, 4] + "<br>" +
"{name:'John', age:34} is " + typeof {name:'John', age:34} + "<br>" +
"new Date() is " + typeof new Date() + "<br>" +
"function () {} is " + typeof function () {} + "<br>" +
"myCar is " + typeof myCar + "<br>" +
"null is " + typeof null;
</script>

</body>
</html>

Bitte beachten Sie:

Der Datentyp von NaN ist Zahl
Der Datentyp eines Arrays ist Objekt
Der Datentyp eines Datums ist Objekt
Der Datentyp von Null ist Objekt
Der Datentyp einer undefinierten Variablen ist undefiniert *
Der Datentyp einer Variablen, der kein Wert zugewiesen wurde, ist auch undefiniert *

Sie können typeof nicht verwenden, um festzustellen, ob ein JavaScript-Objekt ein Array (oder ein Datum) ist.

Primitive Daten

Ein primitiver Datenwert ist ein einzelner einfacher Datenwert ohne zusätzliche Eigenschaften und Methoden.

Der Operator typeof kann einen dieser primitiven Typen zurückgeben:

Zeichenfolge
Nummer
boolean
undefiniert

Beispiel

typeof "John"              // Returns 
 "string" 
typeof 3.14                // Returns 
 "number"
typeof true                // Returns 
 "boolean"
typeof false               // Returns 
 "boolean"
typeof x                   
  // Returns "undefined" (if x has no value)

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>
<h2>The typeof Operator</h2>
<p>The typeof operator returns the type of a variable or an expression.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
typeof "john" + "<br>" + 
typeof 3.14 + "<br>" +
typeof true + "<br>" +
typeof false + "<br>" +
typeof x;
</script>

</body>
</html>

Komplexe Daten

Der Operator typeof kann einen von zwei komplexen Typen zurückgeben:

Funktion
Objekt

Der Operator typeof gibt „object“ für Objekte, Arrays und null zurück.

Der Operator typeof gibt für Funktionen kein „Objekt“ zurück.

Beispiel

typeof {name:'John', age:34} // Returns "object"
typeof [1,2,3,4]            
// Returns "object" (not "array", see note below)
typeof null                  // Returns 
  "object"
typeof function myFunc(){}   // Returns "function"

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>
<h2>The typeof Operator</h2>
<p>The typeof operator returns object for both objects, arrays, and null.</p>
<p>The typeof operator does not return object for functions.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
typeof {name:'john', age:34} + "<br>" +
typeof [1,2,3,4] + "<br>" +
typeof null + "<br>" +
typeof function myFunc(){};
</script>

</body>
</html>

Der typeof-Operator gibt „object“ für Arrays zurück, da Arrays in JavaScript Objekte sind.

Der Datentyp von typeof

Der typeofOperator ist keine Variable. Es ist ein Operator. Operatoren ( + - * / ) haben keinen Datentyp.

Der typeof-Operator gibt jedoch immer eine Zeichenfolge zurück (enthält der Typ des Operanden).

Die Konstruktoreigenschaft

Die Eigenschaft constructor gibt den Konstruktor zurück Funktion für alle JavaScript-Variablen.

Beispiel

"John".constructor                
// Returns function String()  {[native code]}
(3.14).constructor                
// Returns function Number()  {[native code]}
false.constructor                 // Returns 
  function Boolean() {[native code]}
[1,2,3,4].constructor            
// Returns function Array()   {[native code]}
{name:'John',age:34}.constructor 
// Returns function Object()  {[native code]}
 new Date().constructor           
// Returns function Date()    {[native code]}
function () {}.constructor        // Returns 
  function Function(){[native code]}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Properties</h1>
<h2>The constructor Property</h2>

<p>The constructor property returns the constructor function for a variable or an 
object.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
  "john".constructor + "<br>" +
  (3.14).constructor + "<br>" +
  false.constructor + "<br>" +
  [1,2,3,4].constructor + "<br>" +
  {name:'john', age:34}.constructor + "<br>" +
  new Date().constructor + "<br>" +
  function () {}.constructor;
</script>

</body>
</html>

Sie können die Konstruktoreigenschaft überprüfen, um herauszufinden, ob ein Objekt ein Array ist (enthält das Wort „Array“):

Beispiel

function isArray(myArray) {
    return myArray.constructor.toString().indexOf("Array") > -1;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p>This &quot;home made&quot; isArray() function returns true when used on an array:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple"];
document.getElementById("demo").innerHTML = isArray(fruits);

function isArray(myArray) {
  return myArray.constructor.toString().indexOf("Array") > -1;
}
</script>

</body>
</html>

Oder noch einfacher: Sie können prüfen, ob das Objekt eine Array-Funktion ist:

Beispiel

function isArray(myArray) {
    return myArray.constructor 
  === Array;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Array Object</h1>
<p>This "home made" isArray() function returns true when used on an array:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = isArray(fruits);

function isArray(myArray) {
  return myArray.constructor === Array;
}
</script>

</body>
</html>

Sie können die Eigenschaft „Konstruktor“ überprüfen, um herauszufinden, ob es sich bei einem Objekt um ein Objekt handelt Datum (enthält das Wort „Datum“):

Beispiel

function isDate(myDate) {
    return myDate.constructor.toString().indexOf("Date") > -1;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Date Object</h2>
<p>This "home made" isDate() function returns true when used on an date:</p>

<p id="demo"></p>

<script>
const myDate = new Date();
document.getElementById("demo").innerHTML = isDate(myDate);

function isDate(myDate) {
  return myDate.constructor.toString().indexOf("Date") > -1;
}
</script>

</body>
</html>

Oder noch einfacher: Sie können prüfen, ob das Objekt eine Datumsfunktion ist:

Beispiel

function isDate(myDate) {
    return myDate.constructor === Date;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Date Object</h2>
<p>This "home made" isDate() function returns true when used on an date:</p>

<p id="demo"></p>

<script>
const myDate = new Date();
document.getElementById("demo").innerHTML = isDate(myDate);

function isDate(myDate) {
  return myDate.constructor === Date;
}
</script>

</body>
</html>

Nicht definiert

In JavaScript hat eine Variable ohne Wert den Wert undefiniert. Der Typ ist auch undefiniert.

Beispiel

let car;    // Value is undefined, 
    type is undefined

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>
<h2>The typeof Operator</h2>
<p>The value (and the data type) of a variable with no value is <b>undefined</b>.</p>

<p id="demo"></p>

<script>
let car;
document.getElementById("demo").innerHTML =
car + "<br>" + typeof car;
</script>

</body>
</html>

Jede Variable kann geleert werden, indem der Wert auf undefiniert gesetzt wird. Der Typ ist außerdem undefiniert.

Beispiel

   car = undefined;    // Value is undefined, 
    type is undefined

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>
<h2>The typeof Operator</h2>
<p>Variables can be emptied if you set the value to <b>undefined</b>.</p>

<p id="demo"></p>

<script>
let car = "Volvo";
car = undefined;

document.getElementById("demo").innerHTML = car + "<br>" + typeof car;
</script>

</body>
</html>

Leere Werte

Ein leerer Wert hat nichts mit undefiniert zu tun.

Eine leere Zeichenfolge hat sowohl einen zulässigen Wert als auch einen Typ.

Beispiel

let car = "";    // 
    The value is 
    "", the typeof is "string"

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<p>An empty string has both a legal value and a type:</p>

<p id="demo"></p>

<script>
let car = "";
document.getElementById("demo").innerHTML =
"The value is: " +
car + "<br>" +
"The type is: " + typeof car;
</script>

</body>
</html>

Null

In JavaScript ist null „nichts“. Es soll etwas sein, das nicht existiert.

Leider ist in JavaScript der Datentyp null ein Objekt.

Sie können es als Fehler in JavaScript betrachten, dass typeof null ein Objekt ist. Es sollte null sein.

Sie können ein Objekt leeren, indem Sie es auf null setzen:

Beispiel

let person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
person = null;    // 
  Now value is null, 
    but type is still an object

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<p>Objects can be emptied by setting the value to <b>null</b>.</p>

<p id="demo"></p>

<script>
let person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
person = null;
document.getElementById("demo").innerHTML = typeof person;
</script>

</body>
</html>

Sie können ein Objekt auch leeren, indem Sie es auf undefiniert setzen:

Beispiel

let person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
person = undefined;   // 
  Now both value and type is undefined

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Objects</h1>
<h2>The undefined Data Type</h2>

<p>Objects can be emptied by setting the value to <b>undefined</b>.</p>

<p id="demo"></p>

<script>
let person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
person = undefined;
document.getElementById("demo").innerHTML = person;
</script>

</body>
</html>

Unterschied zwischen Undefiniert und Null

undefiniert und null haben den gleichen Wert, unterscheiden sich jedoch im Typ:

typeof undefined           
    // undefined
typeof null                
    // object
null === undefined         
    // false
null == undefined          
    // true

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>
<h2>The typeof Operator</h2>
<p>Undefined and null are equal in value but different in type:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
typeof undefined + "<br>" +
typeof null + "<br><br>" +
(null === undefined) + "<br>" +
(null == undefined);
</script>

</body>
</html>

Die Instanz des Operators

Der Operator instanceof gibt true zurück, wenn ein Objekt eine Instanz des angegebenen Objekts ist:

Beispiel

const cars = ["Saab", "Volvo", "BMW"];

(cars instanceof Array);
(cars instanceof Object);
(cars instanceof String);
(cars instanceof Number);

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>
<h2>The instanceof Operator</h2>

<p>The instanceof operator returns true if an object is an instance of a specified object:</p>

<p id="demo"></p>

<script> 
const cars = ["Saab", "Volvo", "BMW"];

document.getElementById("demo").innerHTML =
(cars instanceof Array) + "<br>" + 
(cars instanceof Object) + "<br>" +
(cars instanceof String) + "<br>" +
(cars instanceof Number);
</script>

</body>
</html>

Der void-Operator

Der void-Operator wertet einen Ausdruck aus und gibt ihn zurück undefiniert. Dieser Operator wird häufig verwendet, um das Undefinierte zu erhalten primitiver Wert, unter Verwendung von „void(0)“ (nützlich bei der Auswertung eines Ausdrucks ohne unter Verwendung des Rückgabewerts).

Beispiel

<a href="javascript:void(0);">
  Useless link
</a>
 
<a href="javascript:void(document.body.style.backgroundColor='red');">
  Click me to change the background color of body to red
</a>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>
<h2>The void Operator</h2>

<p>
<a href="javascript:void(0);">Useless link</a>
</p>

<p>
<a href="javascript:void(document.body.style.backgroundColor='red');">
Click me to change the background color of body to red.</a>
</p>

</body>
</html>