Τύποι δεδομένων JavaScript

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

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

Η JavaScript έχει 8 τύπους δεδομένων

1. Χορδή
2. Αριθμός
3. Bigint
4. Boolean
5. Απροσδιόριστο
6. Null
7. Σύμβολο
8. Αντικείμενο

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

Ο τύπος δεδομένων αντικειμένου μπορεί να περιέχει:

1. Ένα αντικείμενο
2. Ένας πίνακας
3. Ένα ραντεβού

Παραδείγματα

// Numbers:
let length = 16;
let weight = 7.5;

// Strings:
let color = "Yellow";
let lastName = "Johnson";

// Booleans
let x = true;
let y = false;

// Object:
const person = {firstName:"John", lastName:"Doe"};

// Array object:
const cars = ["Saab", "Volvo", "BMW"];

// Date object:
const date = new Date("2022-03-25");

Σημείωση

Μια μεταβλητή JavaScript μπορεί να κρατήσει οποιονδήποτε τύπο δεδομένων.

Η έννοια των τύπων δεδομένων

Στον προγραμματισμό, οι τύποι δεδομένων είναι μια σημαντική έννοια.

Για να μπορέσετε να λειτουργήσετε σε μεταβλητές, είναι σημαντικό να γνωρίζετε κάτι ο τύπος.

Χωρίς τύπους δεδομένων, ένας υπολογιστής δεν μπορεί να το λύσει με ασφάλεια:

let x = 16 + "Volvo";

Έχει νόημα να προσθέσουμε το "Volvo" στα δεκαέξι; Θα παράγει ένα σφάλμα ή θα έχει αποτέλεσμα;

Η JavaScript θα χειριστεί το παραπάνω παράδειγμα ως:

let x = "16" + "Volvo";

Σημείωση

Όταν προσθέτετε έναν αριθμό και μια συμβολοσειρά, η JavaScript θα αντιμετωπίζει τον αριθμό ως α σειρά.

Παράδειγμα

let x = 16 + "Volvo";

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<p>When adding a number and a string, JavaScript will treat the number as a string.</p>

<p id="demo"></p>

<script>
let x = 16 + "Volvo";
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Παράδειγμα

let x = "Volvo" + 16;

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<p>When adding a string and a number, JavaScript will treat the number as a string.</p>

<p id="demo"></p>

<script>
let x = "Volvo" + 16;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Η JavaScript αξιολογεί τις εκφράσεις από αριστερά προς τα δεξιά. Διαφορετικές ακολουθίες μπορούν παράγει διαφορετικά αποτελέσματα:

JavaScript:

let x = 16 + 4 + "Volvo";

Αποτέλεσμα:

20Volvo

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<p>JavaScript evaluates expressions from left to right. Different sequences can produce different results:</p>

<p id="demo"></p>

<script>
let x = 16 + 4 + "Volvo";
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

JavaScript:

let x = "Volvo" + 16 + 4;

Αποτέλεσμα:

Volvo164

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<p>JavaScript evaluates expressions from left to right. Different sequences can produce different results:</p>

<p id="demo"></p>

<script>
let x = "Volvo" + 16 + 4;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Στο πρώτο παράδειγμα, η JavaScript αντιμετωπίζει το 16 και το 4 ως αριθμούς, μέχρι να φτάσει στο "Volvo".

Στο δεύτερο παράδειγμα, εφόσον ο πρώτος τελεστής είναι συμβολοσειρά, όλοι οι τελεστές είναι αντιμετωπίζονται ως χορδές.

Οι τύποι JavaScript είναι δυναμικοί

Η JavaScript έχει δυναμικούς τύπους. Αυτό σημαίνει ότι μπορεί να χρησιμοποιηθεί η ίδια μεταβλητή να κρατήσω διαφορετικοί τύποι δεδομένων:

Παράδειγμα

let x;       // Now x is undefined
x = 5;       // Now x is a Number
x = "John";  // Now x is a String

Συμβολοσειρές JavaScript

Μια συμβολοσειρά (ή μια συμβολοσειρά κειμένου) είναι μια σειρά χαρακτήρων όπως ο "John Doe".

Οι συμβολοσειρές γράφονται με εισαγωγικά. Μπορείτε να χρησιμοποιήσετε μονά ή διπλά εισαγωγικά:

Παράδειγμα

// Using double quotes:
let carName1 = "Volvo XC60";

// Using single quotes:
let carName2 = 'Volvo XC60';

Μπορείτε να χρησιμοποιήσετε εισαγωγικά μέσα σε μια συμβολοσειρά, αρκεί να μην ταιριάζουν με τα εισαγωγικά γύρω από τη χορδή:

Παράδειγμα

// Single quote inside double quotes:
let answer1 = "It's alright";
 

// Single quotes inside double quotes:
let answer2 = "He is called 'Johnny'";

// Double quotes inside single quotes:
let answer3 = 'He is called "Johnny"';

Θα μάθετε περισσότερα για τις strings αργότερα σε αυτό το σεμινάριο.

Αριθμοί JavaScript

Όλοι οι αριθμοί JavaScript αποθηκεύονται ως δεκαδικοί αριθμοί (κινητή υποδιαστολή).

Οι αριθμοί μπορούν να γραφτούν με ή χωρίς δεκαδικά ψηφία:

Παράδειγμα

// With decimals:
let x1 = 34.00;

 
// Without decimals:
let x2 = 34;

Εκθετική σημειογραφία

Οι πολύ μεγάλοι ή πολύ μικροί αριθμοί μπορούν να γραφτούν με επιστημονικά (εκθετική) σημειογραφία:

Παράδειγμα

let y = 123e5;    // 12300000
let z = 123e-5;   // 0.00123

Σημείωση

Οι περισσότερες γλώσσες προγραμματισμού έχουν πολλούς τύπους αριθμών:

Ακέραιοι αριθμοί (ακέραιοι):
byte (8-bit), short (16-bit), int (32-bit), long (64-bit)

Πραγματικοί αριθμοί (κινητής υποδιαστολής):
float (32-bit), διπλό (64-bit).

Οι αριθμοί Javascript είναι πάντα ένας τύπος:
διπλό (64-bit κινητής υποδιαστολής).

Θα μάθετε περισσότερα για τους αριθμούς αργότερα σε αυτόν τον οδηγό.

JavaScript BigInt

Όλοι οι αριθμοί JavaScript αποθηκεύονται σε μορφή κινητής υποδιαστολής 64 bit.

Το JavaScript BigInt είναι ένας νέος τύπος δεδομένων (ES2020) που μπορεί να χρησιμοποιηθεί για την αποθήκευση ακέραιων τιμών που είναι πολύ μεγάλες για να αναπαρασταθούν από έναν κανονικό αριθμό JavaScript.

Παράδειγμα

let x = BigInt("123456789012345678901234567890");

Θα μάθετε περισσότερα για το BigInt αργότερα σε αυτόν τον οδηγό.

JavaScript Booleans

Τα Booleans μπορούν να έχουν μόνο δύο τιμές: true ή false.

Παράδειγμα

let x = 5;
let y = 5;
let z = 6;
(x == y)       
  // Returns true
(x == z)       // Returns 
  false

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Booleans</h2>

<p>Booleans can have two values: true or false:</p>

<p id="demo"></p>

<script>
let x = 5;
let y = 5;
let z = 6;

document.getElementById("demo").innerHTML =
(x == y) + "<br>" + (x == z);
</script>

</body>
</html>

Τα Booleans χρησιμοποιούνται συχνά σε δοκιμές υπό όρους.

Θα μάθετε περισσότερα για τα booleans αργότερα σε αυτό το σεμινάριο.

Πίνακες JavaScript

Οι πίνακες JavaScript γράφονται με αγκύλες.

Τα στοιχεία του πίνακα χωρίζονται με κόμμα.

Ο παρακάτω κώδικας δηλώνει (δημιουργεί) έναν πίνακα που ονομάζεται αυτοκίνητα, ο οποίος περιέχει τρία είδη (ονόματα αυτοκινήτων):

Παράδειγμα

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

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>Array indexes are zero-based, which means the first item is [0].</p>

<p id="demo"></p>

<script>
const cars = ["Saab","Volvo","BMW"];

document.getElementById("demo").innerHTML = cars[0];
</script>

</body>
</html>

Τα ευρετήρια του πίνακα βασίζονται σε μηδέν, που σημαίνει ότι το πρώτο στοιχείο είναι [0], το δεύτερο είναι [1], και ούτω καθεξής.

Θα μάθετε περισσότερα για τους πίνακες αργότερα σε αυτό το σεμινάριο.

Αντικείμενα JavaScript

Τα αντικείμενα JavaScript γράφονται με σγουρά άγκιστρα {}.

Αντικείμενο Οι ιδιότητες γράφονται ως ζεύγη name:value, διαχωρισμένα με κόμμα.

Παράδειγμα

const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p id="demo"></p>

<script>
const person = {
  firstName : "John",
  lastName  : "Doe",
  age     : 50,
  eyeColor  : "blue"
};

document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>

Το αντικείμενο (πρόσωπο) στο παραπάνω παράδειγμα έχει 4 ιδιότητες: firstName, Επώνυμο, ηλικία και Χρώμα ματιών.

Θα μάθετε περισσότερα για τα αντικείμενα αργότερα σε αυτό το σεμινάριο.

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

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

Ο τελεστής typeof επιστρέφει τον τύπο μιας μεταβλητής ή μιας έκφρασης:

Παράδειγμα

typeof ""             // Returns 
 "string"
typeof "John"         // Returns 
 "string"
typeof "John Doe"     // Returns 
 "string"

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

<!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 "" + "<br>" +
typeof "John" + "<br>" + 
typeof "John Doe";
</script>
</body>
</html>

Παράδειγμα

typeof 0              // Returns 
 "number"
  typeof 314            // Returns 
 "number"
  typeof 3.14           // Returns 
 "number"
  typeof (3)            // Returns 
 "number"
typeof (3 + 4)        // Returns 
 "number"

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

<!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 0 + "<br>" + 
typeof 314 + "<br>" +
typeof 3.14 + "<br>" +
typeof (3) + "<br>" +
typeof (3 + 4);
</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>