Typ JavaScriptu

Obsah

Zobrazit obsah

V JavaScriptu existuje 5 různých datových typů, které mohou obsahovat hodnoty:

řetězec
číslo
logická hodnota
objekt
funkce

Existuje 6 typů objektů:

Objekt
Datum
Pole
Řetězec
Číslo
Booleovský

A 2 datové typy, které nemohou obsahovat hodnoty:

null
nedefinováno

Typ Operátora

K vyhledání datového typu a. můžete použít operátor typeof JavaScript proměnná.

Příklad

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"

Zkuste to sami →

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

Dodržujte prosím:

Datovým typem NaN je číslo
Datový typ pole je objekt
Datový typ data je objekt
Datový typ null je objekt
Datový typ nedefinované proměnné je undefined *
Datový typ proměnné, které nebyla přiřazena hodnota, je také nedefinováno *

Nemůžete použít typeof k určení, zda je objekt JavaScriptu pole (nebo datum).

Primitivní data

Primitivní datová hodnota je jediná jednoduchá datová hodnota bez dalších vlastnosti a metody.

Operátor typeof může vrátit jeden z těchto primitivních typů:

řetězec
číslo
logická hodnota
nedefinováno

Příklad

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)

Zkuste to sami →

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

Komplexní data

Operátor typeof může vrátit jeden ze dvou komplexních typů:

funkce
objekt

Operátor typeof vrací "object" pro objekty, pole a null.

Operátor typeof nevrací pro funkce "objekt".

Příklad

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"

Zkuste to sami →

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

Operátor typeof vrací "object" pro pole, protože v JavaScriptu jsou pole objekty.

Datový typ typu

Operátor typeof není proměnná. Je to operátor. Operátoři ( + - * / ) nemají žádný datový typ.

Operátor typeof však vždy vrací řetězec (obsahující typ operandu).

Vlastnost konstruktoru

Vlastnost constructor vrací konstruktor funkce pro všechny proměnné JavaScriptu.

Příklad

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

Zkuste to sami →

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

Můžete zkontrolovat vlastnost konstruktor a zjistit, zda je objekt Array (obsahuje slovo "Array"):

Příklad

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

Zkuste to sami →

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

Nebo ještě jednodušeji můžete zkontrolovat, zda je objekt funkcí pole:

Příklad

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

Zkuste to sami →

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

Můžete zkontrolovat vlastnost konstruktoru a zjistit, zda je objekt a Datum (obsahuje slovo "Datum"):

Příklad

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

Zkuste to sami →

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

Nebo ještě jednodušeji můžete zkontrolovat, zda je objekt funkcí data:

Příklad

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

Zkuste to sami →

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

Nedefinováno

V JavaScriptu má proměnná bez hodnoty hodnotu undefined. Typ je také undefined.

Příklad

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

Zkuste to sami →

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

Libovolnou proměnnou lze vyprázdnit nastavením hodnoty na undefined. Typ bude také undefined.

Příklad

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

Zkuste to sami →

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

Prázdné hodnoty

Prázdná hodnota nemá nic společného s undefined.

Prázdný řetězec má právní hodnotu i typ.

Příklad

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

Zkuste to sami →

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

Nula

V JavaScriptu je null "nic". Má to být něco, co neexistuje.

Bohužel v JavaScriptu je datovým typem null objekt.

To, že typeof null je objekt, můžete považovat za chybu v JavaScriptu. Mělo by být null.

Objekt můžete vyprázdnit nastavením na null:

Příklad

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

Zkuste to sami →

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

Objekt můžete také vyprázdnit nastavením na undefined:

Příklad

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

Zkuste to sami →

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

Rozdíl mezi Undefined a Null

undefined a null mají stejnou hodnotu, ale liší se v typu:

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

Zkuste to sami →

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

Instance operátora

Operátor instanceof vrátí true, pokud je objekt instancí zadaného objektu:

Příklad

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

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

Zkuste to sami →

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

Prázdný operátor

Operátor void vyhodnotí výraz a vrátí nedefinováno. Tento operátor se často používá k získání nedefinovaného primitivní hodnotu pomocí "void(0)" (užitečné při vyhodnocování výrazu bez pomocí návratové hodnoty).

Příklad

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

Zkuste to sami →

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