JavaScript-typ


Innehållsförteckning

    Visa innehållsförteckning


I JavaScript finns det 5 olika datatyper som kan innehålla värden:

  • sträng

  • nummer

  • boolesk

  • objekt

  • funktion

Det finns 6 typer av objekt:

  • Objekt

  • Datum

  • Array

  • Sträng

  • Nummer

  • Boolesk

Och 2 datatyper som inte kan innehålla värden:

  • null

  • odefinierad


Typen av operatör

Du kan använda operatorn typeof för att hitta datatypen för en JavaScript-variabel.

Exempel

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"

Prova själv →

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

Observera:

  • Datatypen för NaN är nummer

  • Datatypen för en array är objekt

  • Datatypen för ett datum är objekt

  • Datatypen för null är objekt

  • Datatypen för en odefinierad variabel är odefinierad *

  • Datatypen för en variabel som inte har tilldelats ett värde är även odefinierad *

Du kan inte använda typeof för att avgöra om ett JavaScript-objekt är en array (eller ett datum).



Primitiva data

Ett primitivt datavärde är ett enda enkelt datavärde utan ytterligare egenskaper och metoder.

Operatorn typeof kan returnera en av dessa primitiva typer:

  • sträng

  • nummer

  • boolesk

  • odefinierad

Exempel

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)

Prova själv →

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



Komplexa data

Operatorn typeof kan returnera en av två komplexa typer:

  • funktion

  • objekt

Operatorn typeof returnerar "object" för objekt, arrayer och null.

Operatorn typeof returnerar inte "objekt" för funktioner.

Exempel

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"

Prova själv →

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


Operatorn typeof returnerar "objekt" för arrayer eftersom arrayer i JavaScript är objekt.


Datatypen av typen

Operatorn typeof är inte en variabel. Det är en operatör. Operatörer ( + - * / ) har ingen datatyp.

Men operatorn typeof returerar alltid en sträng (som innehåller typen av operanden).


Konstruktören Fastighet

Egenskapen constructor returnerar konstruktorn funktion för alla JavaScript-variabler.

Exempel

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

Prova själv →

<!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 kontrollera konstruktoregenskapen för att ta reda på om ett objekt är en Array (innehåller ordet "Array"):

Exempel

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

Prova själv →

<!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 ännu enklare, du kan kontrollera om objektet är en Array-funktion:

Exempel

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

Prova själv →

<!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 kontrollera constructor-egenskapen för att ta reda på om ett objekt är en Datum (innehåller ordet "Datum"):

Exempel

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

Prova själv →

<!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 ännu enklare, du kan kontrollera om objektet är en Datumfunktion:

Exempel

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

Prova själv →

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

Odefinierad

I JavaScript har en variabel utan värde värdet undefined. Typen är också odefinierad.

Exempel

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

Prova själv →

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

Vilken variabel som helst kan tömmas genom att sätta värdet på odefinierad. Typen kommer också att vara odefinierad.

Exempel

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

Prova själv →

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

Tomma värden

Ett tomt värde har inget att göra med odefinierad.

En tom sträng har både ett juridiskt värde och en typ.

Exempel

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

Prova själv →

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

I JavaScript är null "ingenting". Det ska vara något som inte finns.

Tyvärr, i JavaScript är datatypen null ett objekt.

Du kan betrakta det som en bugg i JavaScript att typeof null är ett objekt. Den ska vara null.

Du kan tömma ett objekt genom att ställa in det på null:

Exempel

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

Prova själv →

<!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 också tömma ett objekt genom att ställa in det på odefinierat:

Exempel

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

Prova själv →

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

Skillnaden mellan odefinierat och null

undefined och null är lika i värde men olika i typ:

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

Prova själv →

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

Operatörens instans

Operatorn instanceof returnerar true om ett objekt är en instans av det angivna objektet:

Exempel

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

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

Prova själv →

<!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 tomma operatören

Operatorn void utvärderar ett uttryck och returnerar odefinierad. Denna operatör används ofta för att erhålla det odefinierade primitivt värde, med "void(0)" (användbart när man utvärderar ett uttryck utan med returvärdet).

Exempel

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

Prova själv →

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