JavaScript típusú

Tartalomjegyzék

    Tartalomjegyzék megjelenítése

A JavaScriptben 5 különböző adattípus tartalmazhat értékeket:

  • karakterlánc

  • szám

  • boolean

  • objektum

  • függvény

6 típusú objektum létezik:

  • Objektum

  • Dátum

  • Tömb

  • Karakterlánc

  • Szám

  • Logiai

És 2 adattípus, amely nem tartalmazhat értékeket:

  • null

  • meghatározatlan

Az operátor típusa

A typeof operátor segítségével megkeresheti a adattípust JavaScript változó.

Példa

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óbálja ki Ön is →

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

Kérjük, vegye figyelembe:

  • A NaN adattípusa szám

  • Egy tömb adattípusa objektum

  • A dátum adattípusa objektum

  • A null adattípusa objektum

  • Egy nem definiált változó adattípusa undefined *

  • Az értékhez nem rendelt változó adattípusa a szintén undefined *

A typeof segítségével nem állapíthatja meg, hogy egy JavaScript-objektum tömb-e (vagy dátum).

Primitív adatok

A primitív adatérték egyetlen egyszerű adatérték, további nélkül tulajdonságait és módszereit.

A typeof operátor a következő primitív típusok egyikét adhatja vissza:

  • karakterlánc

  • szám

  • boolean

  • meghatározatlan

Példa

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óbálja ki Ön is →

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

Összetett adatok

A typeof operátor két összetett típus egyikét adhatja vissza:

  • függvény

  • objektum

A typeof operátor "object"-et ad vissza objektumok, tömbök és nulla értékek esetén.

A typeof operátor nem ad vissza "objektumot" a függvényekhez.

Példa

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óbálja ki Ön is →

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

A typeof operátor a "object" értéket adja vissza a tömböknél, mivel a JavaScriptben a tömbök objektumok.

A típus adattípusa

A típusoperátor nem változó. Ez egy operátor. Operátorok ( + - * / ) nem rendelkeznek adattípussal.

De a typeof operátor mindig egy karakterláncot ad vissza (amelyet tartalmaz az operandus típusa).

A kivitelező ingatlan

A constructor tulajdonság visszaadja a konstruktort függvény minden JavaScript-változóhoz.

Példa

"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óbálja ki Ön is →

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

Ellenőrizheti a konstruktor tulajdonságot, hogy megtudja, egy objektum egy tömb (a "tömb" szót tartalmazza):

Példa

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

Próbálja ki Ön is →

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

Vagy még egyszerűbben ellenőrizheti, hogy az objektum egy Tömbfüggvény-e:

Példa

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

Próbálja ki Ön is →

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

Ellenőrizheti a konstruktor tulajdonságot, hogy megtudja, egy objektum a Dátum (a "Dátum" szót tartalmazza):

Példa

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

Próbálja ki Ön is →

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

Vagy még egyszerűbben ellenőrizheti, hogy az objektum dátum függvény-e:

Példa

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

Próbálja ki Ön is →

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

Határozatlan

A JavaScriptben az érték nélküli változó értéke undefined. A típus szintén undefined.

Példa

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

Próbálja ki Ön is →

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

Bármely változó kiüríthető, ha az értéket undefined-ra állítja. A típus szintén undefined lesz.

Példa

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

Próbálja ki Ön is →

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

Üres értékek

Az üres értéknek semmi köze az undefined-hoz.

Az üres karakterláncnak jogi értéke és típusa is van.

Példa

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

Próbálja ki Ön is →

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

Nulla

JavaScriptben a null a "semmi". Állítólag valami nem létezik.

Sajnos a JavaScriptben a null adattípus egy objektum.

A JavaScript hibájának tekintheti, hogy a typeof null egy objektum. null-nak kell lennie.

Kiüríthet egy objektumot, ha null értékre állítja:

Példa

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

Próbálja ki Ön is →

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

Az objektumokat úgy is kiürítheti, hogy undefined értékre állítja:

Példa

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

Próbálja ki Ön is →

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

Különbség a Undefined és a Null között

A undefined és a null értéke azonos, de típusa eltérő:

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

Próbálja ki Ön is →

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

Az operátor példánya

Az instance of operátor a true értéket adja vissza, ha egy objektum a megadott objektum példánya:

Példa

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

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

Próbálja ki Ön is →

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

Az üres kezelő

A void operátor kiértékeli a kifejezést, és visszatér undefined. Ezt az operátort gyakran használják az undefined lekérésére primitív érték, a "void(0)" használatával (hasznos egy kifejezés kiértékelésekor visszatérési érték használatával).

Példa

<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óbálja ki Ön is →

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