JavaScript type

Indholdsfortegnelse

Vis indholdsfortegnelse

I JavaScript er der 5 forskellige datatyper, der kan indeholde værdier:

streng
nummer
boolesk
objekt
funktion

Der er 6 typer objekter:

Objekt
Dato
Array
String
Nummer
Boolesk

Og 2 datatyper, der ikke kan indeholde værdier:

null
udefineret

Typen af operatør

Du kan bruge operatoren typeof til at finde datatypen for en JavaScript-variabel.

Eksempel

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"

Prøv det selv →

<!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>

Bemærk venligst:

Datatypen for NaN er nummer
Datatypen for et array er objekt
Datatypen for en dato er objekt
Datatypen null er objekt
Datatypen for en udefineret variabel er udefineret *
Datatypen for en variabel, der ikke er blevet tildelt en værdi, er også udefineret *

Du kan ikke bruge typeof til at bestemme, om et JavaScript-objekt er en matrix (eller en dato).

Primitive data

En primitiv dataværdi er en enkelt simpel dataværdi uden yderligere egenskaber og metoder.

Operatoren typeof kan returnere en af disse primitive typer:

streng
nummer
boolesk
udefineret

Eksempel

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)

Prøv det selv →

<!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>

Komplekse data

Operatoren typeof kan returnere en af to komplekse typer:

funktion
objekt

Operatoren typeof returnerer "objekt" for objekter, arrays og null.

Operatoren typeof returnerer ikke "objekt" for funktioner.

Eksempel

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"

Prøv det selv →

<!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>

Operatoren typeof returnerer "objekt" for arrays, fordi arrays i JavaScript er objekter.

Datatypen af typen

typeofoperatoren er ikke en variabel. Det er en operatør. Operatører ( + - * / ) ikke har nogen datatype.

Men typeof-operatoren returnerer altid en streng (som indeholder typen af operanden).

Konstruktøren Ejendom

Egenskaben constructor returnerer konstruktøren funktion for alle JavaScript-variabler.

Eksempel

"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]}

Prøv det selv →

<!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>

Du kan tjekke konstruktøregenskaben for at finde ud af, om et objekt er et Array (indeholder ordet "Array"):

Eksempel

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

Prøv det selv →

<!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>

Eller endnu enklere, du kan kontrollere, om objektet er en Array-funktion:

Eksempel

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

Prøv det selv →

<!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>

Du kan tjekke konstruktøregenskaben for at finde ud af, om et objekt er en Dato (indeholder ordet "Dato"):

Eksempel

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

Prøv det selv →

<!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>

Eller endnu enklere, du kan kontrollere, om objektet er en datofunktion:

Eksempel

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

Prøv det selv →

<!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>

Udefineret

I JavaScript har en variabel uden en værdi værdien undefined. Typen er også udefineret.

Eksempel

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

Prøv det selv →

<!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>

Enhver variabel kan tømmes ved at sætte værdien til undefined. Typen vil også være udefineret.

Eksempel

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

Prøv det selv →

<!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>

Tomme værdier

En tom værdi har intet at gøre med undefined.

En tom streng har både en juridisk værdi og en type.

Eksempel

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

Prøv det selv →

<!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>

Nul

I JavaScript er null "intet". Det formodes at være noget, der ikke eksisterer.

Desværre er datatypen null i JavaScript et objekt.

Du kan betragte det som en fejl i JavaScript, at typeof null er et objekt. Det skal være null.

Du kan tømme et objekt ved at indstille det til null:

Eksempel

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

Prøv det selv →

<!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>

Du kan også tømme et objekt ved at indstille det til undefined:

Eksempel

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

Prøv det selv →

<!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>

Forskellen mellem Udefineret og Null

undefined og null har samme værdi, men forskellige i type:

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

Prøv det selv →

<!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>

Forekomsten af operatør

Operatoren instanceof returnerer true, hvis et objekt er en forekomst af det angivne objekt:

Eksempel

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

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

Prøv det selv →

<!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>

Den ugyldige operatør

Operatoren void evaluerer et udtryk og returnerer udefineret. Denne operator bruges ofte til at opnå det udefinerede primitiv værdi, ved hjælp af "void(0)" (nyttigt ved evaluering af et udtryk uden ved hjælp af returværdien).

Eksempel

<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>

Prøv det selv →

<!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>