Τύπος JavaScript

Πίνακας περιεχομένων

    Εμφάνιση πίνακα περιεχομένων

Στο JavaScript υπάρχουν 5 διαφορετικοί τύποι δεδομένων που μπορούν να περιέχουν τιμές:

  • συμβολοσειρά

  • αριθμός

  • boolean

  • αντικείμενο

  • συνάρτηση

Υπάρχουν 6 είδη αντικειμένων:

  • Αντικείμενο

  • Ημερομηνία

  • Συστοιχία

  • Συμβολοσειρά

  • Αριθμός

  • Boolean

Και 2 τύποι δεδομένων που δεν μπορούν να περιέχουν τιμές:

  • null

  • απροσδιόριστο

Ο τύπος του χειριστή

Μπορείτε να χρησιμοποιήσετε τον τελεστή typeof για να βρείτε τον τύπο δεδομένων ενός Μεταβλητή JavaScript.

Παράδειγμα

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"

Δοκιμάστε το μόνοι σας →

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

Παρακαλούμε προσέξτε:

  • Ο τύπος δεδομένων του NaN είναι αριθμός

  • Ο τύπος δεδομένων ενός πίνακα είναι αντικείμενο

  • Ο τύπος δεδομένων μιας ημερομηνίας είναι αντικείμενο

  • Ο τύπος δεδομένων του null είναι αντικείμενο

  • Ο τύπος δεδομένων μιας απροσδιόριστης μεταβλητής είναι απροσδιόριστος *

  • Ο τύπος δεδομένων μιας μεταβλητής στην οποία δεν έχει εκχωρηθεί τιμή είναι επίσης απροσδιόριστο *

Δεν μπορείτε να χρησιμοποιήσετε τον τύπο για να προσδιορίσετε εάν ένα αντικείμενο JavaScript είναι πίνακας (ή ημερομηνία).

Πρωτόγονα Δεδομένα

Μια πρωτόγονη τιμή δεδομένων είναι μια απλή απλή τιμή δεδομένων χωρίς επιπλέον ιδιότητες και μεθόδους.

Ο τελεστής typeof μπορεί να επιστρέψει έναν από αυτούς τους πρωτόγονους τύπους:

  • συμβολοσειρά

  • αριθμός

  • boolean

  • απροσδιόριστο

Παράδειγμα

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)

Δοκιμάστε το μόνοι σας →

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

Σύνθετα δεδομένα

Ο τελεστής typeof μπορεί να επιστρέψει έναν από τους δύο σύνθετους τύπους:

  • συνάρτηση

  • αντικείμενο

Ο τελεστής typeof επιστρέφει "αντικείμενο" για αντικείμενα, πίνακες και null.

Ο τελεστής typeof δεν επιστρέφει "αντικείμενο" για συναρτήσεις.

Παράδειγμα

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"

Δοκιμάστε το μόνοι σας →

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

Ο τελεστής τύπος επιστρέφει "αντικείμενο" για πίνακες επειδή στο JavaScript οι πίνακες είναι αντικείμενα.

Ο τύπος δεδομένων του τύπου

Ο τελεστής τύποςδεν είναι μεταβλητή. Είναι χειριστής. Χειριστές ( + - * / ) δεν έχουν κανένα τύπο δεδομένων.

Ωστόσο, ο τελεστής typeof πάντα επιστρέφει μια συμβολοσειρά (που περιέχει τον τύπο του τελεστή).

Το ακίνητο του κατασκευαστή

Η ιδιότητα κατασκευαστής επιστρέφει τον κατασκευαστή λειτουργία για όλες τις μεταβλητές JavaScript.

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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

Μπορείτε να ελέγξετε την ιδιότητα του κατασκευαστή για να μάθετε εάν ένα αντικείμενο είναι Πίνακας (περιέχει τη λέξη "Array"):

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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

Ή ακόμα πιο απλό, μπορείτε να ελέγξετε αν το αντικείμενο είναι μια συνάρτηση πίνακα:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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

Μπορείτε να ελέγξετε την ιδιότητα του κατασκευαστή για να μάθετε εάν ένα αντικείμενο είναι a Ημερομηνία (περιέχει τη λέξη "Ημερομηνία"):

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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

Ή ακόμα πιο απλό, μπορείτε να ελέγξετε αν το αντικείμενο είναι συνάρτηση ημερομηνίας:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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

Απροσδιόριστος

Στο JavaScript, μια μεταβλητή χωρίς τιμή, έχει την τιμή undefined. Ο τύπος είναι επίσης απροσδιόριστος.

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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

Οποιαδήποτε μεταβλητή μπορεί να αδειάσει, ορίζοντας την τιμή σε undefined. Ο τύπος θα είναι επίσης απροσδιόριστος.

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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

Κενές Αξίες

Μια κενή τιμή δεν έχει καμία σχέση με το απροσδιόριστο.

Μια κενή συμβολοσειρά έχει και νομική αξία και τύπο.

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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

Μηδενικό

Στο JavaScript το null είναι "τίποτα". Υποτίθεται ότι είναι κάτι που δεν υπάρχει.

Δυστυχώς, στη JavaScript, ο τύπος δεδομένων null είναι ένα αντικείμενο.

Μπορείτε να θεωρήσετε σφάλμα στο JavaScript ότι το τύπος null είναι αντικείμενο. Θα πρέπει να είναι null.

Μπορείτε να αδειάσετε ένα αντικείμενο ορίζοντας το σε null:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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

Μπορείτε επίσης να αδειάσετε ένα αντικείμενο ορίζοντας το σε απροσδιόριστο:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

<!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 και Null

Το undefined και το null είναι ίσες σε αξία αλλά διαφορετικοί ως προς τον τύπο:

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

Δοκιμάστε το μόνοι σας →

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

Η περίπτωση του χειριστή

Ο τελεστής instanceof επιστρέφει true εάν ένα αντικείμενο είναι μια παρουσία του καθορισμένου αντικειμένου:

Παράδειγμα

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

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

Δοκιμάστε το μόνοι σας →

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

Ο χειριστής κενού

Ο τελεστής void αξιολογεί μια έκφραση και επιστρέφει απροσδιόριστο. Αυτός ο τελεστής χρησιμοποιείται συχνά για τη λήψη του απροσδιόριστου πρωταρχική τιμή, χρησιμοποιώντας "void(0)" (χρήσιμο κατά την αξιολόγηση μιας έκφρασης χωρίς χρησιμοποιώντας την τιμή επιστροφής).

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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