10 hacks Javascript για να γίνετε επαγγελματίας

Η Javascript είναι μια πολύ δημοφιλής και ευρέως χρησιμοποιούμενη γλώσσα προγραμματισμού που μπορεί να κάνει πολλά καταπληκτικά πράγματα!

Δείτε αυτές τις δυνατότητες/συμβουλές που θα σας βοηθήσουν να προγραμματίζετε σαν επαγγελματίας.

1. Προαιρετική Αλυσίδα (;)

Αυτός είναι ο ασφαλέστερος τρόπος πρόσβασης στις ιδιότητες ένθετων αντικειμένων, ακόμα κι αν δεν υπάρχει μια ενδιάμεση ιδιότητα.

employee.details?.id
employee.details?.address
employee.details?.phone

Εάν τα δεδομένα υπάρχουν στα στοιχεία του υπαλλήλου, θα επιστρέψει τα δεδομένα διαφορετικά θα επιστρέψουν απροσδιόριστα χωρίς κανένα σφάλμα.

2. Nullish Coalescing (??)

Το Nullish Coalescing είναι ένας λογικός τελεστής που θα επιστρέψει την τιμή της δεξιάς πλευράς εάν δεν υπάρχει η τιμή της αριστερής πλευράς.

// syntax: leftValue ?? rightValue

let firstVal = null;
let secondVal = "";
let thirdVal = 28;

firstVal ?? 'this is first'; // right side value will be displayed
secondVal ?? 'this is second'; // left side value will be displayed
thirdVal ?? 23; // left side value (28) will be displayed

3. Καταργήστε τα διπλότυπα από έναν πίνακα

Όλοι γνωρίζουμε ότι ένα αντικείμενο Set χρησιμοποιείται για την αποθήκευση μοναδικών τιμών. Μπορούμε να το χρησιμοποιήσουμε για να αφαιρέσουμε διπλότυπα από τον πίνακα

const arr = [9,9,8,8,7,7];

const newArr = [...new Set(array)]; // newArr will have [9,8,7]

4. Καταργήστε τις ψευδείς τιμές από έναν πίνακα

Μπορούμε να περάσουμε το «Boolean» στη μέθοδο φίλτρου πίνακα για να αφαιρέσουμε ψευδείς τιμές από έναν πίνακα

const arr = [5, 0, undefined, 3, 9, "", false, false];
const newArr = arr.filter(Boolean)); //[5,0,3,9]

5. Αλλαγή μεγέθους πίνακα

Το "Array.length" χρησιμοποιείται για να πάρει το μήκος ενός πίνακα. Μπορούμε να το χρησιμοποιήσουμε για να περικόψουμε τον πίνακα όπως δίνεται παρακάτω.

let array = ["Bangalore", "Chennai", "Mumbai", "Pune", "Delhi"]
array.length = 2
console.log(array) //["Bangalore", "Chennai"]

6. Ελέγξτε εάν η τρέχουσα καρτέλα βρίσκεται σε προβολή/εστίαση

Χρησιμοποιώντας την ιδιότητα document.hidden μπορούμε να ελέγξουμε εάν η τρέχουσα καρτέλα είναι σε προβολή ή εστίαση

const isInViewOrFocus = () => document.hidden;
isInViewOrFocus();
// returns true or false depending on if tab is in view / focus

7. Ελέγξτε εάν ένα στοιχείο εστιάζεται αυτήν τη στιγμή

Μπορούμε να χρησιμοποιήσουμε το document.activeElement για να το πετύχουμε αυτό

const isActiveElement = (el) => (el === document.activeElement);
isActiveElement(anyElement)
// will return true if in focus, false if not in focus

8. Ελέγξτε αν ο τρέχων χρήστης υποστηρίζει συμβάντα αφής

Το ontouchstart ή το DocumentTouch στο αντικείμενο του παραθύρου μας ενημερώνει εάν η τρέχουσα συσκευή υποστηρίζει συμβάντα αφής.

const isTouchSupported = () => {
  ('ontouchstart' in window || window.DocumentTouch && document instanceof window.DocumentTouch);
}
console.log(isTouchSupported());
// will return true if touch events are supported, false if not

9. Ελέγξτε εάν ο τρέχων χρήστης βρίσκεται σε συσκευή Apple

Μπορούμε να χρησιμοποιήσουμε το navigator.platform για να ελέγξουμε εάν ο τρέχων χρήστης βρίσκεται σε συσκευή Apple.

const isAppleDevice = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
console.log(isAppleDevice);
// will return true if user is on an Apple device

10. Πολλαπλή αντικατάσταση

Η μέθοδος replace() βοηθά στην αντικατάσταση της πρώτης εμφάνισης της λέξης σε μια συμβολοσειρά. Προσθέτοντας «/g»μπορούμε να αντικαταστήσουμε πολλές εμφανίσεις κάθε φορά.

let data = "JavaScript is JavaScript"
//Single
console.log(data.replace(/JavaScript/, "TypeScript")) // TypeScript is JavaScript
//Multiple 
console.log(data.replace(/JavaScript/g, "TypeScript")) // TypeScript is TypeScript

Ευχαριστώ για την ανάγνωση. Ελπίζουμε ότι αυτό το άρθρο σας βοήθησε να μάθετε νέα πράγματα. Καλή κωδικοποίηση!