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
Du kan använda operatorn typeof
för att hitta datatypen för en JavaScript-variabel.
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).
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
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>
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.
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.
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).
Egenskapen constructor
returnerar konstruktorn funktion för alla JavaScript-variabler.
"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"):
function isArray(myArray) {
return myArray.constructor.toString().indexOf("Array") > -1;
}
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</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"];
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:
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"):
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:
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>
I JavaScript har en variabel utan värde värdet undefined
. Typen är också odefinierad
.
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
.
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>
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.
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>
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
:
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
:
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>
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>
Operatorn instanceof
returnerar true
om ett objekt är en instans av det angivna objektet:
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>
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).
<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>