Η ύπαρξη JavaScript στο χαρτοφυλάκιό σας αυξάνει τις πιθανότητες να αποκτήσετε ρόλο προγραμματιστή λογισμικού. Τούτου λεχθέντος, ας δούμε τις συχνές ερωτήσεις συνέντευξης JavaScript.
Η JavaScript είναι μια από τις πιο χρησιμοποιούμενες γλώσσες στην ανάπτυξη Ιστού. Χρησιμοποιείται για την ανάπτυξη σχεδόν οποιουδήποτε τύπου εφαρμογής τώρα.
Πριν προχωρήσουμε στις ερωτήσεις της συνέντευξης, ας δούμε τα πλεονεκτήματα της εκμάθησης JavaScript.
Η JavaScript είναι μια ελαφριά, ερμηνευμένη ή έγκαιρη μεταγλώττιση γλώσσα προγραμματισμού. Είναι μια από τις βασικές γλώσσες του παγκόσμιου ιστού. Γνωρίζετε τις άλλες δύο βασικές γλώσσες του www. Καλύτερα να τα ψάξεις αν δεν το κάνεις.
Η JavaScript δημιουργείται κυρίως για τον Ιστό. Αλλά δεν είναι μόνο για τον Ιστό τώρα. Με τη βοήθεια περιβαλλόντων όπως Node, Deno, κ.λπ., μπορούμε να το τρέξουμε σχεδόν σε οποιαδήποτε πλατφόρμα.
Ας δούμε μερικά πλεονεκτήματα του.
Πίνακας περιεχομένων
Πλεονεκτήματα της JavaScript
Ποιοι είναι οι τύποι δεδομένων στο JavaScript;
Οι τύποι δεδομένων χρησιμοποιούνται για την αποθήκευση διαφορετικών τύπων δεδομένων. Οι τύποι δεδομένων θα διαφέρουν από τη μια γλώσσα προγραμματισμού στην άλλη. Στο JavaScript, έχουμε 8 τύπους δεδομένων. Ας τα δούμε ένα προς ένα.
- Αριθμός
- Σειρά
- Boolean
- Απροσδιόριστος
- Μηδενικό
- BigInt
- Σύμβολο
- Αντικείμενο
Όλοι οι τύποι δεδομένων εκτός από το αντικείμενο ονομάζονται πρωτόγονες τιμές. Και είναι αμετάβλητα.
Ποιες είναι οι ενσωματωμένες μέθοδοι στο JavaScript;
Οι ενσωματωμένες μέθοδοι στο JavaScript είναι διαφορετικές για κάθε τύπο δεδομένων. Μπορούμε να έχουμε πρόσβαση σε αυτές τις ενσωματωμένες μεθόδους χρησιμοποιώντας τον αντίστοιχο τύπο δεδομένων. Ας δούμε μερικές ενσωματωμένες μεθόδους για διαφορετικούς τύπους δεδομένων και δομές δεδομένων.
- σε πεζά
- ξεκινάει με
- γράφημαΑτ
Υπάρχουν πολλές ενσωματωμένες μέθοδοι για κάθε τύπο δεδομένων. Μπορείτε να ελέγξετε τις αναφορές για όλες τις ενσωματωμένες μεθόδους διαφορετικών τύπων δεδομένων και δομών δεδομένων.
Πώς να δημιουργήσετε έναν πίνακα σε JavaScript;
Οι πίνακες είναι μία από τις βασικές δομές δεδομένων στο JavaScript. Οι πίνακες μπορούν να περιέχουν οποιονδήποτε τύπο δεδομένων καθώς η JavaScript είναι δυναμική. Ας δούμε πώς να δημιουργήσουμε πίνακες σε JavaScript.
Μπορούμε να δημιουργήσουμε έναν πίνακα χρησιμοποιώντας αγκύλες[]. Είναι απλό και γρήγορο να δημιουργείς αντικείμενα
// Empty array const arr = []; // Array with some random values const randomArr = [1, "One", true]; console.log(arr, randomArr);
Μπορούμε να δημιουργήσουμε έναν πίνακα χρησιμοποιώντας τον κατασκευαστή Array. Οι άνθρωποι σπάνια χρησιμοποιούν τον κατασκευαστή για να δημιουργήσουν πίνακες σε γενικά έργα.
// Empty array const arr = new Array(); // Array with some random values const randomArr = new Array(1, "One", true); console.log(arr, randomArr);
Οι πίνακες JavaScript είναι μεταβλητοί, δηλαδή μπορούμε να τους τροποποιήσουμε όπως θέλουμε μετά τη δημιουργία τους.
Πώς να δημιουργήσετε ένα αντικείμενο σε JavaScript;
Εκτός από τον πίνακα, το αντικείμενο είναι μια άλλη βασική δομή δεδομένων στο JavaScript. Τα αντικείμενα χρησιμοποιούν αποθήκευση των ζευγών κλειδιού-τιμής. Το κλειδί πρέπει να είναι μια αμετάβλητη τιμή, ενώ η τιμή μπορεί να είναι οτιδήποτε. Ας δούμε πώς να δημιουργήσουμε αντικείμενα σε JavaScript.
Μπορούμε να δημιουργήσουμε αντικείμενα χρησιμοποιώντας σγουρές αγκύλες {}. Είναι απλό και γρήγορο να δημιουργείς αντικείμενα.
// Empty object
const object = {};
// Object with some random values
const randomObject = { 1: 2, one: "Two", true: false };
console.log(object, randomObject);
Μπορούμε να δημιουργήσουμε αντικείμενα χρησιμοποιώντας το Object constructor. Οι άνθρωποι σπάνια το χρησιμοποιούν σε γενικά έργα.
// Empty object const object = new Object(); // Object with some random values const randomObject = new Object(); randomObject[1] = 2; randomObject["one"] = "Two"; randomObject[true] = false; console.log(object, randomObject);
Τα αντικείμενα JavaScript είναι μεταβλητά, δηλαδή, μπορούμε να τα τροποποιήσουμε μετά τη δημιουργία, όπως βλέπετε στο 2ο παράδειγμα.
Πώς διορθώνετε τον κώδικα JavaScript;
Ο κώδικας εντοπισμού σφαλμάτων δεν είναι απλός. Και είναι διαφορετικό από τη μια γλώσσα προγραμματισμού στην άλλη, από το ένα έργο στο άλλο, κ.λπ..? Ας δούμε τα κοινά πράγματα που χρησιμοποιούνται για τον εντοπισμό σφαλμάτων JavaScript.
1. Καταγραφή
Μπορούμε να χρησιμοποιήσουμε τις δηλώσεις console.log σε πολλά σημεία του κώδικά μας για να εντοπίσουμε το σφάλμα. Ο κώδικας θα σταματήσει να εκτελεί τις επόμενες γραμμές κώδικα όταν υπάρχει σφάλμα στην προηγούμενη γραμμή.
Η καταγραφή είναι μια από τις παλιές μεθόδους εντοπισμού σφαλμάτων, η οποία είναι λίγο πολύ αποτελεσματική για μικρά έργα. Είναι μια κοινή τεχνική εντοπισμού σφαλμάτων για οποιαδήποτε γλώσσα προγραμματισμού.
2. Εργαλεία προγραμματιστών
Η JavaScript χρησιμοποιείται κυρίως για την ανάπτυξη διαδικτυακών εφαρμογών. Έτσι, σχεδόν όλα τα προγράμματα περιήγησης διαθέτουν πλέον εργαλεία προγραμματιστή που βοηθούν στον εντοπισμό σφαλμάτων του κώδικα JavaScript.
Μία από τις πιο χρησιμοποιούμενες μεθόδους εντοπισμού σφαλμάτων είναι ο ορισμός σημείων διακοπής στα εργαλεία προγραμματιστή. Τα σημεία διακοπής σταματούν την εκτέλεση της JavaScript και δίνουν όλες τις πληροφορίες για την εκτέλεση αυτή τη στιγμή.
Μπορούμε να ορίσουμε πολλά σημεία διακοπής γύρω από το μέρος όπου λαμβάνουμε σφάλματα και να δούμε τι το προκαλεί. Είναι ο πιο αποτελεσματικός τρόπος εντοπισμού σφαλμάτων σε εφαρμογές web JavaScript.
3. IDE
Μπορούμε να χρησιμοποιήσουμε τα IDE για τον εντοπισμό σφαλμάτων JavaScript. Ο κώδικας VS υποστηρίζει τον εντοπισμό σφαλμάτων με σημεία διακοπής. Η δυνατότητα εντοπισμού σφαλμάτων ενδέχεται να διαφέρει ανάλογα με το IDE που χρησιμοποιείτε. Όμως, τα περισσότερα από τα IDE θα έχουν αυτό το χαρακτηριστικό.
Πώς να προσθέσετε κώδικα JavaScript σε ένα αρχείο HTML;
Μπορούμε να προσθέσουμε το αρχείο HTML JavaScript χρησιμοποιώντας την ετικέτα script. Μπορείτε να ελέγξετε το παρακάτω παράδειγμα.
<!DOCTYPE html>
<html lang="en">
<head>
<title>grtechpc.org</title>
</head>
<body>
<h1>grtechpc.org</h1>
<script>
// JavaScript code goes here
console.log("This is JavaScript code");
</script>
</body>
</html>
Τι είναι τα cookies;
Τα cookies είναι ζεύγη κλειδιών-τιμών που χρησιμοποιούνται για την αποθήκευση μικρών πληροφοριών. Οι πληροφορίες μπορεί να είναι οτιδήποτε. Μπορούμε να ορίσουμε τον χρόνο λήξης των cookies, τα οποία θα διαγραφούν μετά τη λήξη τους. Αυτά χρησιμοποιούνται ευρέως για την αποθήκευση των πληροφοριών των χρηστών.
Τα cookies δεν θα διαγραφούν ακόμα και αν ανανεώσουμε τη σελίδα μέχρι να τα διαγράψουμε ή να λήξουν. Μπορείτε να ελέγξετε τα cookie οποιασδήποτε εφαρμογής ιστού/ιστοσελίδας σε οποιοδήποτε πρόγραμμα περιήγησης ανοίγοντας τα εργαλεία προγραμματιστή.
Πώς να διαβάσετε ένα cookie;
Μπορούμε να διαβάσουμε το cookie σε JavaScript χρησιμοποιώντας το document.cookie. Θα επιστρέψει όλα τα cookies που δημιουργήσαμε.
console.log("All cookies", document.cookie);
Θα επιστρέψει μια κενή συμβολοσειρά εάν δεν υπάρχουν cookies.
Πώς να δημιουργήσετε και να διαγράψετε ένα cookie;
Μπορούμε να δημιουργήσουμε τα cookies ορίζοντας το ζεύγος κλειδιού-τιμής στο document.cookie. Ας δούμε ένα παράδειγμα.
document.cookie = "one=One;";
Στην παραπάνω σύνταξη, το ένα κλειδί cookie και το One είναι η τιμή του. Μπορούμε να προσθέσουμε περισσότερα χαρακτηριστικά στο cookie όπως τομέας, διαδρομή, λήγει κ.λπ.. καθένα από αυτά θα πρέπει να χωρίζεται με ένα ερωτηματικό (;). Όλα τα χαρακτηριστικά είναι προαιρετικά.
Ας δούμε ένα παράδειγμα με ιδιότητες.
document.cookie = "one=One;expires=Jan 31 2023;path=/;";
Στον παραπάνω κωδικό, έχουμε προσθέσει μια ημερομηνία λήξης και μια διαδρομή στο cookie. Εάν δεν παρέχεται η ημερομηνία λήξης, το cookie θα διαγραφεί μετά τη συνεδρία. Η προεπιλεγμένη διαδρομή θα είναι η διαδρομή αρχείου. Η μορφή ημερομηνίας λήξης θα πρέπει να είναι σε GMT.
Ας δούμε πώς να δημιουργήσετε πολλά cookies.
document.cookie = "one=One;expires=Jan 31 2023;path=/;"; document.cookie = "two=Two;expires=Jan 31 2023;path=/;"; document.cookie = "three=Three;expires=Jan 31 2023;path=/;";
Τα cookie δεν θα αντικατασταθούν εάν το κλειδί ή η διαδρομή είναι διαφορετική κατά τη ρύθμιση πολλών cookie. Εάν το κλειδί και η διαδρομή είναι ίδια, τότε θα αντικατασταθεί το προηγούμενο cookie. Δείτε το παρακάτω παράδειγμα, το οποίο θα αντικαταστήσει το προηγούμενο σύνολο cookie.
document.cookie = "one=One;expires=Jan 31 2023;path=/;"; document.cookie = "one=Two;path=/;";
Καταργήσαμε την ημερομηνία λήξης από το cookie και αλλάξαμε την τιμή.
Χρησιμοποιήστε την ημερομηνία λήξης μια μελλοντική ημερομηνία όταν δοκιμάζετε τον κωδικό για να λειτουργήσει σωστά. Εάν διατηρήσετε την ίδια ημερομηνία 31 Ιανουαρίου 2023 ακόμη και μετά την 31η Ιανουαρίου 2023, τα cookie δεν θα δημιουργηθούν.
Είδαμε πώς να δημιουργήσουμε και να ενημερώσουμε cookies. Ας δούμε πώς να διαγράψετε τα cookies.
Η διαγραφή των cookies είναι εύκολη. Απλώς αλλάξτε την ημερομηνία λήξης του cookie σε οποιαδήποτε προηγούμενη ημερομηνία. Ελέγξτε το παρακάτω παράδειγμα.
// Creating cookies document.cookie = "one=One;expires=Jan 31 2023;path=/;"; document.cookie = "two=Two;expires=Jan 31 2023;path=/;"; document.cookie = "three=Three;expires=Jan 31 2023;path=/;"; // Deleting the last cookie document.cookie = "three=Three;expires=Jan 1 2023;path=/;";
Δεν θα βρείτε το τελευταίο cookie στα cookies καθώς διαγράφεται στην τελευταία γραμμή του κώδικα. Αυτό είναι όλο για το σεμινάριο min cookies.
Ποια είναι τα διαφορετικά πλαίσια JavaScript;
Υπάρχουν πολλά πλαίσια JavaScript εκεί έξω. React, Vue, Angular κ.λπ., για ανάπτυξη διεπαφής χρήστη. Express, Koa, Nest, κ.λπ., για ανάπτυξη από την πλευρά του διακομιστή. NextJS, Gatsby, κ.λπ., για δημιουργία στατικών τοποθεσιών. React Native, Ionic, κ.λπ., για ανάπτυξη εφαρμογών για κινητά. Έχουμε αναφέρει μερικά από τα πλαίσια JavaScript εδώ. Μπορείτε να βρείτε περισσότερα πλαίσια που θα χρειαστούν πολύ χρόνο για να εξερευνήσετε. Εξερευνήστε όταν τα χρειάζεστε.
Κλείσιμο σε JavaScript
Το κλείσιμο είναι μια συνάρτηση που συνδυάζεται με το λεξικό της πεδίο και το μητρικό λεξικό περιβάλλον. Με το κλείσιμο, μπορούμε να έχουμε πρόσβαση στα δεδομένα εξωτερικού εύρους. Τα πώματα σχηματίζονται όταν δημιουργούνται οι συναρτήσεις.
function outer() {
const a = 1;
function inner() {
// We can access all the data from the outer function scope here
// The data will be available even if we execute this function outside the outer function
// as inners' closure formed while creating it
console.log("Accessing a inside inner", a);
}
return inner;
}
const innerFn = outer();
innerFn();
Τα κλεισίματα χρησιμοποιούνται ευρέως σε εφαρμογές JavaScript. Μπορεί να τα έχετε χρησιμοποιήσει πριν χωρίς να συνειδητοποιήσετε ότι είναι κλεισίματα. Υπάρχουν πολλά περισσότερα από αυτό για να μάθουμε για το κλείσιμο. Βεβαιωθείτε ότι έχετε μάθει πλήρως αυτήν την έννοια.
Ανύψωση σε JavaScript
Το Hoisting είναι μια διαδικασία στο JavaScript όπου η δήλωση μεταβλητών, συναρτήσεων και κλάσεων μετακινείται στην κορυφή του πεδίου εφαρμογής πριν από την εκτέλεση του κώδικα.
// Accessing `name` before declaring console.log(name); // Declaring and initializing the `name` var name = "grtechpc.org";
Εάν εκτελέσετε τον παραπάνω κώδικα, δεν θα δείτε κανένα σφάλμα. Αλλά στις περισσότερες γλώσσες, θα λάβετε το σφάλμα. Η έξοδος θα είναι απροσδιόριστο καθώς η ανύψωση μετακινεί μόνο τις δηλώσεις στην κορυφή και δεν θα την αρχικοποιήσει μέχρι τη γραμμή με αριθμό 3.
Αλλάξτε το var σε let ή const ως εξής και εκτελέστε ξανά τον κώδικα.
// Accessing `name` before declaring console.log(name); // Declaring and initializing the `name` const name = "grtechpc.org";
Τώρα, θα λάβετε το σφάλμα αναφοράς που λέει ότι δεν μπορούμε να έχουμε πρόσβαση στη μεταβλητή πριν την αρχικοποιήσουμε.
ReferenceError: Cannot access 'name' before initialization
Έτσι, εδώ το let και το const εισάγονται στο ES6, το οποίο δεν μπορεί να προσπελαστεί πριν αρχικοποιηθεί, όπως υποδηλώνει το σφάλμα. Αυτό συμβαίνει επειδή οι μεταβλητές που δηλώνονται με let ή const θα βρίσκονται στην προσωρινή νεκρή ζώνη (TDZ) μέχρι τη γραμμή που αρχικοποιείται. Δεν μπορούμε να έχουμε πρόσβαση στις μεταβλητές από το TDZ.
Currying σε JavaScript
Το Currying είναι μια τεχνική για τη μετατροπή συναρτήσεων με πολλές παραμέτρους σε λιγότερες παραμέτρους με πολλαπλές κλήσεις. Με αυτό, μπορούμε να μετατρέψουμε μια συνάρτηση με δυνατότητα κλήσης add(a, b, c, d) σε add(a)(b)(c)(d) callable. Ας δούμε ένα παράδειγμα για το πώς να το κάνουμε.
function getCurryCallback(callback) {
return function (a) {
return function (b) {
return function (c) {
return function (d) {
return callback(a, b, c, d);
};
};
};
};
}
function add(a, b, c, d) {
return a + b + c + d;
}
const curriedAdd = getCurryCallback(add);
// Calling the curriedAdd
console.log(curriedAdd(1)(2)(3)(4));
Μπορούμε να γενικεύσουμε τη συνάρτηση getCurryCallback που θα χρησιμοποιηθεί για διαφορετικές συναρτήσεις για να μετατραπεί σε currying callables. Μπορείτε να ανατρέξετε στις Πληροφορίες JavaScript για περισσότερες λεπτομέρειες σχετικά με αυτό.
Διαφορά μεταξύ εγγράφου και παραθύρου
Το παράθυρο είναι το κορυφαίο αντικείμενο στο πρόγραμμα περιήγησης. Περιέχει όλες τις πληροφορίες σχετικά με το παράθυρο του προγράμματος περιήγησης, όπως ιστορικό, τοποθεσία, πρόγραμμα πλοήγησης κ.λπ.. είναι παγκοσμίως διαθέσιμο σε JavaScript. Μπορούμε να το χρησιμοποιήσουμε απευθείας στον κώδικά μας χωρίς καμία εισαγωγή. Μπορούμε να έχουμε πρόσβαση στις ιδιότητες και τις μεθόδους του αντικειμένου παραθύρου χωρίς παράθυρο.
Το έγγραφο είναι το μέρος του αντικειμένου παραθύρου. Όλο το HTML που φορτώνεται στην ιστοσελίδα μετατρέπεται στο αντικείμενο εγγράφου. Το αντικείμενο εγγράφου αναφέρεται στο ειδικό στοιχείο HTMLDocument, το οποίο θα έχει διαφορετικές ιδιότητες και μεθόδους όπως όλα τα στοιχεία HTML.
Το παράθυρο που το αντικείμενο αντιπροσωπεύει το παράθυρο του προγράμματος περιήγησης και το έγγραφο αντιπροσωπεύει το έγγραφο HTML που έχει φορτωθεί σε αυτό το παράθυρο του προγράμματος περιήγησης.
Διαφορά μεταξύ πελάτη και διακομιστή
Η πλευρά πελάτη αναφέρεται στον τελικό χρήστη που χρησιμοποιεί την εφαρμογή. Η πλευρά του διακομιστή αναφέρεται στον διακομιστή ιστού όπου αναπτύσσεται η εφαρμογή.
Στην ορολογία του frontend, μπορούμε να πούμε πρόγραμμα περιήγησης στους υπολογιστές των χρηστών ως πελάτη και υπηρεσίες cloud ως πλευρά διακομιστή.
Διαφορά μεταξύ innerHTML και innerText
Τόσο το innerHTML όσο και το innerText είναι οι ιδιότητες των στοιχείων HTML. Μπορούμε να αλλάξουμε τα περιεχόμενα ενός στοιχείου HTML χρησιμοποιώντας αυτές τις ιδιότητες.
Μπορούμε να αντιστοιχίσουμε τη συμβολοσειρά HTML σε innerHTML μια ιδιότητα που αποδίδεται σαν κανονική HTML. Ελέγξτε το παρακάτω παράδειγμα.
const titleEl = document.getElementById("title");
titleEl.innerHTML = '<span style="color:orange;">grtechpc.org</span>';
Προσθέστε ένα στοιχείο με τον τίτλο αναγνωριστικού στο HTML σας και προσθέστε το παραπάνω σενάριο στο αρχείο JavaScript. Εκτελέστε τον κώδικα και δείτε την έξοδο. Θα grtechpc.org σε πορτοκαλί χρώμα. Και αν επιθεωρήσετε το στοιχείο, θα βρίσκεται μέσα στην ετικέτα span. Έτσι το innerHTML θα πάρει τη συμβολοσειρά HTML και θα την αποδώσει ως κανονική HTML.
Το innerText στην άλλη πλευρά θα πάρει μια κανονική συμβολοσειρά και θα την αποδώσει ως έχει. Δεν θα αποδώσει κανένα HTML σαν το innerHTML. Αλλάξτε το innerHTML σε innerText στον παραπάνω κώδικα και ελέγξτε την έξοδο.
const titleEl = document.getElementById("title");
titleEl.innerText="<span style="color:orange;">grtechpc.org</span>";
Τώρα, θα δείτε την ακριβή συμβολοσειρά που παρέχουμε στην ιστοσελίδα.
Διαφορά μεταξύ let και var
Οι λέξεις-κλειδιά let και var χρησιμοποιούνται για τη δημιουργία μεταβλητών στο JavaScript. Η λέξη-κλειδί let εισάγεται στο ES6.
Το let έχει εύρος μπλοκ και το var έχει εύρος συνάρτησης.
{
let a = 2;
console.log("Inside block", a);
}
console.log("Outside block", a);
Εκτελέστε τον παραπάνω κώδικα. Θα λάβετε ένα σφάλμα στην τελευταία γραμμή, καθώς δεν μπορούμε να έχουμε πρόσβαση σε ένα εκτός του μπλοκ επειδή έχει εύρος μπλοκ. Τώρα, αλλάξτε το σε var και εκτελέστε το ξανά.
{
var a = 2;
console.log("Inside block", a);
}
console.log("Outside block", a);
Δεν θα λάβετε κανένα σφάλμα, καθώς μπορούμε να έχουμε πρόσβαση στη μεταβλητή a και έξω από το μπλοκ. Τώρα, ας αντικαταστήσουμε το μπλοκ με μια συνάρτηση.
function sample() {
var a = 2;
console.log("Inside function", a);
}
sample();
console.log("Outside function", a);
Θα λάβετε ένα σφάλμα αναφοράς εάν εκτελέσετε τον παραπάνω κώδικα, καθώς δεν μπορούμε να προσπελάσουμε var a εκτός της συνάρτησης επειδή έχει εμβέλεια λειτουργίας.
Μπορούμε να δηλώσουμε εκ νέου τις μεταβλητές χρησιμοποιώντας τη λέξη-κλειδί var, αλλά δεν μπορούμε να δηλώσουμε ξανά τις μεταβλητές χρησιμοποιώντας τη λέξη-κλειδί let. Ας δούμε ένα παράδειγμα.
var a = "grtechpc.org"; var a = "Chandan"; console.log(a);
let a = "grtechpc.org"; let a = "Chandan"; console.log(a);
Το πρώτο κομμάτι κώδικα δεν θα προκαλέσει κανένα σφάλμα και η τιμή είναι a θα αλλάξει στην πιο πρόσφατη εκχωρημένη τιμή. Το 2ο κομμάτι κώδικα θα προκαλέσει ένα σφάλμα, καθώς δεν μπορούμε να δηλώσουμε εκ νέου μεταβλητές χρησιμοποιώντας let.
Διαφορά μεταξύ αποθήκευσης περιόδου λειτουργίας και τοπικού χώρου αποθήκευσης
Ο χώρος αποθήκευσης περιόδου λειτουργίας και ο τοπικός χώρος αποθήκευσης χρησιμοποιούνται για την αποθήκευση πληροφοριών στους υπολογιστές των χρηστών, στους οποίους είναι δυνατή η πρόσβαση χωρίς το διαδίκτυο. Μπορούμε να αποθηκεύσουμε τα ζεύγη κλειδιών-τιμών τόσο σε αποθήκευση περιόδου λειτουργίας όσο και σε τοπικό χώρο αποθήκευσης. Τόσο το κλειδί όσο και η τιμή θα μετατραπούν σε συμβολοσειρές εάν παρέχετε οποιονδήποτε άλλο τύπο δεδομένων ή δομή δεδομένων.
Ο αποθηκευτικός χώρος της περιόδου λειτουργίας θα εκκαθαριστεί μετά το τέλος της περιόδου λειτουργίας (όταν το πρόγραμμα περιήγησης είναι κλειστό). Ο χώρος αποθήκευσης τοποθεσίας δεν θα διαγραφεί μέχρι να τον διαγράψουμε.
Μπορούμε να αποκτήσουμε πρόσβαση, να ενημερώσουμε και να διαγράψουμε την αποθήκευση περιόδων σύνδεσης και την αποθήκευση τοποθεσίας με αντικείμενα sessionStorage και localStorage αντίστοιχα.
Τι είναι το NaN στο JavaScript;
Το NaN συντομεύεται ως Not-a-Number. Αντιπροσωπεύει ότι κάτι δεν είναι νόμιμος/έγκυρος αριθμός στο JavaScript. Υπάρχουν ορισμένες περιπτώσεις όπου θα λάβουμε NaN ως έξοδο όπως 0/0, απροσδιόριστο * 2, 1 + απροσδιόριστο, μηδενικό * απροσδιόριστο κ.λπ..,
Τι είναι το Lexical scoping;
Το λεξικό εύρος αναφέρεται στην πρόσβαση στις μεταβλητές από το πεδίο των γονέων του. Ας πούμε ότι έχουμε μια συνάρτηση με δύο εσωτερικές συναρτήσεις. Η πιο εσωτερική συνάρτηση μπορεί να έχει πρόσβαση στις μεταβλητές εύρους των δύο γονικών συναρτήσεων. Παρομοίως, η συνάρτηση 2ου επιπέδου μπορεί να έχει πρόσβαση στο εξώτατο εύρος λειτουργίας. Ας το δούμε σε ένα παράδειγμα.
function outermost() {
let a = 1;
console.log(a);
function middle() {
let b = 2;
// `a` are accessible here
console.log(a, b);
function innermost() {
let c = 3;
// both `a` and `b` are accessible here
console.log(a, b, c);
}
innermost();
}
middle();
}
outermost();
Η JavaScript χρησιμοποιεί μια αλυσίδα εμβέλειας για να βρει τη μεταβλητή όταν έχουμε πρόσβαση σε αυτήν κάπου στον κώδικα. Πρώτα, θα ελέγξει τη μεταβλητή στο τρέχον εύρος και, στη συνέχεια, το γονικό εύρος μέχρι το καθολικό εύρος.
Τι μεταβιβάζεται με τιμή και τι περνά με αναφορά;
Η τιμή pass by και pass by reference είναι δύο τρόποι για να μεταβιβαστούν τα ορίσματα σε μια συνάρτηση στο JavaScript.
Pass by value: δημιουργεί ένα αντίγραφο των αρχικών δεδομένων και το μεταβιβάζει στη συνάρτηση. Έτσι, όταν κάνουμε οποιεσδήποτε αλλαγές στη συνάρτηση, δεν θα επηρεαστούν τα αρχικά δεδομένα. Ελέγξτε το παρακάτω παράδειγμα.
function sample(a) {
// changing the value of `a`
a = 5;
console.log("Inside function", a);
}
let a = 3;
sample(a);
console.log("Outside function", a);
Θα δείτε ότι η αρχική τιμή του a δεν αλλάζει παρόλο που την αλλάξαμε μέσα στη συνάρτηση.
Pass by reference: μεταβιβάζει την αναφορά των δεδομένων στη συνάρτηση. Έτσι, όταν κάνουμε οποιεσδήποτε αλλαγές στη συνάρτηση, θα αλλάξει και τα αρχικά δεδομένα.
function sample(arr) {
// adding a new value to the array
arr.push(3);
console.log("Inside function", arr);
}
let arr = [1, 2];
sample(arr);
console.log("Outside function", arr);
Θα δείτε ότι η αρχική τιμή του arr αλλάζει όταν το αλλάξουμε μέσα στη συνάρτηση.
Σημείωση: όλοι οι πρωτόγονοι τύποι δεδομένων μεταβιβάζονται με τιμή και οι μη πρωτόγονοι μεταβιβάζονται με αναφορά.
Τι είναι η απομνημόνευση;
Η απομνημόνευση είναι μια τεχνική που αποθηκεύει τις υπολογισμένες τιμές σε κρυφές μνήμες και τις χρησιμοποιεί όταν τις χρειαζόμαστε ξανά χωρίς να τις υπολογίσουμε ξανά. Θα επιταχύνει την εκτέλεση του κώδικα εάν ο υπολογισμός είναι πολύ βαρύς. Υπάρχει μια ανταλλαγή αποθήκευσης που δεν είναι μεγάλο ζήτημα σε σύγκριση με τον χρόνο.
const memo = {};
function add(a, b) {
const key = `${a}-${b}`;
// checking whether we computed the value already or not
if (memo[key]) {
console.log("Not computing again");
return memo[key];
}
// adding the newly computed value to cache
// here cache is a simple global object
memo[key] = a + b;
return memo[key];
}
console.log(add(1, 2));
console.log(add(2, 3));
console.log(add(1, 2));
Είναι ένα απλό παράδειγμα που δείχνει την απομνημόνευση. Εδώ, η προσθήκη δύο αριθμών δεν είναι δύσκολος υπολογισμός. Είναι μόνο για το demo.
Ποια είναι η παράμετρος υπόλοιπο;
Η παράμετρος υπόλοιπο χρησιμοποιείται για τη συλλογή όλων των υπόλοιπων παραμέτρων σε μια συνάρτηση. Ας υποθέσουμε ότι έχουμε μια συνάρτηση που δέχεται τουλάχιστον 2 ορίσματα και μπορεί να δεχτεί οποιονδήποτε αριθμό παραμέτρων το μέγιστο. Καθώς δεν έχουμε τον μέγιστο αριθμό ορισμάτων, μπορούμε να συλλέξουμε τις 2 πρώτες παραμέτρους με κανονικές μεταβλητές και όλες τις άλλες με την παράμετρο υπόλοιπο χρησιμοποιώντας τον τελεστή rest.
function sample(a, b, ...rest) {
console.log("Rest parameter", rest);
}
sample(1, 2, 3, 4, 5);
Η παράμετρος υπόλοιπο θα είναι ένας πίνακας από τα τρία τελευταία ορίσματα στο παραπάνω παράδειγμα. Με αυτό, μπορούμε να έχουμε οποιονδήποτε αριθμό παραμέτρων για μια συνάρτηση.
Μία συνάρτηση μπορεί να έχει μόνο μία παράμετρο ηρεμίας. Και η παράμετρος υπόλοιπο θα πρέπει να είναι η τελευταία με τη σειρά των παραμέτρων.
Τι είναι η καταστροφή αντικειμένων;
Η αποδομή αντικειμένων χρησιμοποιείται για την πρόσβαση στις μεταβλητές από το αντικείμενο και για την ανάθεση τους σε μεταβλητές με τα ίδια ονόματα με τα κλειδιά αντικειμένων. Ας δούμε ένα παράδειγμα.
const object = { a: 1, b: 2, c: 3 };
// Object destructuring
const { a, b, c } = object;
// Now, a, b, c will be used as normal variables
console.log(a, b, c);
Μπορούμε να αλλάξουμε τις μεταβλητές των αποδομημένων μεταβλητών στην ίδια γραμμή ως εξής.
const object = { a: 1, b: 2, c: 3 };
// Changing the names of `a` and `b`
const { a: changedA, b: changedB, c } = object;
// Now, changedA, changedB, c will be used as normal variables
console.log(changedA, changedB, c);
Τι είναι η καταστροφή συστοιχιών;
Η αποδιάρθρωση πίνακα χρησιμοποιείται για την πρόσβαση στις μεταβλητές από τον πίνακα και την ανάθεση τους σε μεταβλητές. Ας δούμε ένα παράδειγμα.
const array = [1, 2, 3]; // Array destructuring // It's based on the index of the array const [a, b, c] = array; // Now, we can use a, b, c as normal variables console.log(a, b, c);
Τι είναι η καταγραφή συμβάντων και η δημιουργία φυσαλίδων συμβάντων;
Η καταγραφή συμβάντων και η δημιουργία φυσαλίδων συμβάντων είναι δύο τρόποι διάδοσης συμβάντων στο HTML DOM. Ας υποθέσουμε ότι υπάρχουν δύο στοιχεία HTML, το ένα μέσα στο άλλο. Και ένα γεγονός συμβαίνει στο εσωτερικό στοιχείο. Τώρα, η λειτουργία διάδοσης συμβάντων θα αποφασίσει τη σειρά εκτέλεσης αυτών των συμβάντων.
Φούσκα συμβάντος: εκτελεί το πρόγραμμα χειρισμού συμβάντων πρώτα στο στοιχείο, μετά στο στοιχείο του και, στη συνέχεια, φτάνει μέχρι το ανώτατο στοιχείο. Αυτή είναι η προεπιλεγμένη συμπεριφορά όλων των συμβάντων.
Καταγραφή συμβάντος: πρέπει να προσδιορίσουμε σε περίπτωση που χρειαστεί να χρησιμοποιήσουμε αυτόν τον τύπο διάδοσης συμβάντων. Μπορούμε να το καθορίσουμε κατά την προσθήκη του προγράμματος ακρόασης συμβάντος. Τα συμβάντα θα εκτελεστούν με την ακόλουθη σειρά εάν έχουμε ενεργοποιημένη την καταγραφή συμβάντος.
Μπορούμε να σταματήσουμε τη διάδοση συμβάντος καλώντας το event.stopPropogation μια μέθοδο στο πρόγραμμα χειρισμού συμβάντων.
Ποιες είναι οι υποσχέσεις στο JavaScript;
Το Promise the object χρησιμοποιείται για τις ασύγχρονες λειτουργίες που θα ολοκληρωθούν στο μέλλον με κατάσταση επιτυχίας ή αποτυχίας.
Μια υπόσχεση μπορεί να βρίσκεται σε μία από τις ακόλουθες καταστάσεις.
Ας δούμε δύο παραδείγματα περιπτώσεων επιτυχίας και αποτυχίας.
// Promise which will complete successfully
const successPromise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve({ message: "Completed successfully" });
}, 300);
});
successPromise
.then((data) => {
console.log(data);
})
.catch((error) => {
console.log(error);
});
// Promise which will complete with failure state
const failurePromise = new Promise((resolve, reject) => {
setTimeout(() => {
reject(new Error("Failing the promise for testing"));
}, 300);
});
failurePromise
.then((data) => {
console.log(data);
})
.catch((error) => {
console.log(error);
});
Μπορείτε να έχετε περισσότερα από ένα και στη συνέχεια να αλυσοδέσετε εάν απαιτείται. Τα δεδομένα που επιστράφηκαν προηγουμένως θα γίνουν δεκτά στην επόμενη επανάκληση.
Εξηγήστε τους διαφορετικούς τύπους εύρους στο JavaScript
Υπάρχουν δύο τύποι εύρους στο JavaScript. Η παγκόσμια εμβέλεια και η τοπική εμβέλεια.
Μπορεί να έχετε ακούσει επίσης για το εύρος λειτουργίας και το εύρος μπλοκ. Είναι τοπικά πεδία για var και let, αντίστοιχα.
Τι είναι οι λειτουργίες αυτο-επίκλησης;
Οι συναρτήσεις αυτο-επίκλησης είναι ανώνυμες συναρτήσεις που θα εκτελεστούν αμέσως μετά τη δημιουργία. Ας δούμε μερικά παραδείγματα.
// Without any parameters
(function sayHello() {
console.log("Hello, World!");
})();
// With parameters
(function add(a, b) {
console.log("Sum", a + b);
})(1, 2);
Μπορούμε ακόμη και να περάσουμε τα ορίσματα στις συναρτήσεις self-invoking, όπως είδατε στο παράδειγμα.
Τι είναι οι συναρτήσεις βέλους;
Η συνάρτηση βέλους είναι συντακτική ζάχαρη στην κανονική συνάρτηση με κάποιες αλλαγές. Συμπεριφέρονται σαν κανονικές λειτουργίες σε περιπτώσεις γενικής χρήσης. Οι λειτουργίες βέλους είναι χρήσιμες όταν πρέπει να έχουμε επανάκληση. Ας δούμε τη σύνταξή του.
// arrow functions will return by default if it doesn't have any brackets let add = (a, b) => a + b; console.log(add(1, 2));
Υπάρχουν κάποιες διαφορές μεταξύ των συναρτήσεων βέλους και των κανονικών συναρτήσεων.
- Οι συναρτήσεις βέλους δεν έχουν τη δική τους σύνδεση. Η λέξη-κλειδί αυτή μέσα στη συνάρτηση βέλους αναφέρεται στο γονικό της πεδίο αυτό.
- Οι συναρτήσεις βέλους δεν μπορούν να χρησιμοποιηθούν ως συναρτήσεις κατασκευής
Τι είναι οι επανακλήσεις;
Μια επιστροφή κλήσης είναι μια συνάρτηση που μεταβιβάζεται σε μια άλλη συνάρτηση που καλείται μέσα σε αυτήν τη συνάρτηση. Η χρήση επανάκλησης είναι συνηθισμένο πράγμα στο JavaScript. Ας δούμε ένα παράδειγμα.
function sample(a, b, callback) {
const result = a + b;
callback(result);
}
function finished(result) {
console.log("Finished with", result);
}
sample(1, 2, finished);
Η συνάρτηση που ολοκληρώθηκε μεταβιβάζεται ως επιστροφή κλήσης στο δείγμα. Η ολοκληρωμένη συνάρτηση καλείται με το αποτέλεσμα μετά την εκτέλεση κάποιας ενέργειας. Θα δείτε τη χρήση των επιστροφών κλήσης κυρίως σε ασύγχρονες λειτουργίες όπως υποσχέσεις, setTimeout κ.λπ..,
Ποιοι είναι οι διαφορετικοί τύποι σφαλμάτων;
Ας ελέγξουμε μερικά σφάλματα στο JavaScript.
ReferenceError: αυτό το σφάλμα θα παρουσιαστεί εάν η μεταβλητή στην οποία έχουμε πρόσβαση είναι διαθέσιμη.
TypeError: Η JavaScript θα εμφανίσει αυτό το σφάλμα εάν το σφάλμα δεν ταιριάζει με άλλους τύπους σφαλμάτων. Θα συμβεί επίσης όταν προσπαθούμε να εκτελέσουμε μια ενέργεια που δεν είναι συμβατή με τα δεδομένα.
SyntaxError: αυτό το σφάλμα θα παρουσιαστεί εάν η σύνταξη JavaScript δεν είναι σωστή.
Υπάρχουν και κάποιοι άλλοι τύποι σφαλμάτων. Ωστόσο, αυτοί είναι οι συνήθεις τύποι σφαλμάτων στο JavaScript.
Ποια είναι τα διαφορετικά πεδία των μεταβλητών στο JavaScript;
Υπάρχουν δύο πεδία μεταβλητών στο JavaScript. Οι μεταβλητές που δηλώνονται χρησιμοποιώντας τη λέξη-κλειδί var θα έχουν εύρος λειτουργίας και οι μεταβλητές που δηλώνονται με το let και το const θα έχουν το εύρος μπλοκ.
Ανατρέξτε στη 17η ερώτηση για περισσότερες λεπτομέρειες σχετικά με το εύρος αυτών των μεταβλητών.
Τι είναι οι χαρακτήρες διαφυγής στο JavaScript;
Η ανάστροφη κάθετο είναι ο χαρακτήρας διαφυγής στο JavaScript. Χρησιμοποιείται για την εκτύπωση ορισμένων ειδικών χαρακτήρων που δεν μπορούμε να εκτυπώσουμε γενικά. Ας υποθέσουμε ότι θέλουμε να εκτυπώσουμε την απόστροφο (‘) μέσα σε μια συμβολοσειρά, κάτι που δεν μπορούμε να κάνουμε κανονικά, καθώς η συμβολοσειρά θα τελειώνει στη δεύτερη απόστροφο. Σε αυτήν την περίπτωση, θα χρησιμοποιήσουμε τον χαρακτήρα διαφυγής για να αποφύγουμε το τέλος της συμβολοσειράς σε αυτό το σημείο.
const message="Hi, I"m grtechpc.org'; console.log(message);
Μπορούμε να επιτύχουμε την παραπάνω έξοδο χωρίς να χρησιμοποιήσουμε χαρακτήρα διαφυγής αντικαθιστώντας τις εξωτερικές μονές απόστροφες με διπλές απόστροφες. Αλλά είναι απλώς ένα παράδειγμα του τρόπου χρήσης ενός χαρακτήρα διαφυγής. Υπάρχουν άλλοι χαρακτήρες για τους οποίους χρειαζόμαστε οπωσδήποτε χαρακτήρα διαφυγής όπως n, t, κ.λπ.,
Τι είναι το BOM και το DOM;
Μοντέλο αντικειμένου προγράμματος περιήγησης (BOM): όλα τα προγράμματα περιήγησης έχουν BOM που αντιπροσωπεύει το τρέχον παράθυρο του προγράμματος περιήγησης. Περιέχει το ανώτατο αντικείμενο παραθύρου που χρησιμοποιείται για τον χειρισμό του παραθύρου του προγράμματος περιήγησης.
Μοντέλο αντικειμένου εγγράφου (DOM): τα προγράμματα περιήγησης δημιουργούν το DOM όταν το HTML φορτώνεται στη δομή δέντρου. Μπορούμε να χειριστούμε τα στοιχεία HTML χρησιμοποιώντας το DOM API.
Τι είναι ένα αντικείμενο οθόνης;
Το αντικείμενο οθόνης είναι μία από τις ιδιότητες του αντικειμένου καθολικού παραθύρου. Περιέχει διαφορετικές ιδιότητες της οθόνης στην οποία αποδίδεται το τρέχον παράθυρο του προγράμματος περιήγησης. Μερικές από τις ιδιότητες είναι το πλάτος, το ύψος, ο προσανατολισμός, το βάθος pixel, κ.λπ.,
συμπέρασμα
Μπορεί να υπάρχουν επακόλουθες ερωτήσεις για όλες τις παραπάνω ερωτήσεις. Επομένως, πρέπει να προετοιμάσετε τις έννοιες γύρω από όλες τις παραπάνω ερωτήσεις.
Μπορείτε επίσης να εξερευνήσετε μερικές συχνές ερωτήσεις και απαντήσεις συνέντευξης Java.
Καλή μάθηση 🙂