Ενισχύστε την αποδοτικότητα της κωδικοποίησής σας με αυτά τα βασικά JavaScript Hacks.
Table of Contents
Η JavaScript είναι μια δυναμική και διαρκώς εξελισσόμενη γλώσσα και η γνώση των ιδιαιτεροτήτων της μπορεί να βελτιώσει σημαντικά την αποδοτικότητά σας στον προγραμματισμό. Είτε είστε αρχάριος είτε προχωρημένος προγραμματιστής, αυτές οι 50 πρακτικές συμβουλές θα βελτιώσουν τις δεξιότητές σας στη JavaScript και θα σας βοηθήσουν να γράψετε καθαρότερο και αποτελεσματικότερο κώδικα.
1.Αντιστροφή μιας συμβολοσειράς
Η αντιστροφή μιας συμβολοσειράς στη JavaScript μπορεί να επιτευχθεί με τη χρήση μιας γραμμής:
const reversedString = str.split('').reverse().join('');Αυτό σπάει τη συμβολοσειρά σε έναν πίνακα χαρακτήρων, την αντιστρέφει και την ενώνει ξανά.
2.Άθροισμα μιας σειράς
Υπολογίστε το άθροισμα όλων των στοιχείων ενός πίνακα χρησιμοποιώντας reduce():
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);3.Εύρεση των μέγιστων και ελάχιστων τιμών σε μια συστοιχία
Χρησιμοποιήστε τον τελεστή εξάπλωσης με τις Math.max() και Math.min() για να βρείτε τη μεγαλύτερη και τη μικρότερη τιμή:
const numbers = [3, 7, 1, 9];
const max = Math.max(...numbers);
const min = Math.min(...numbers);4.Αφαίρεση διπλοτύπων από μια συστοιχία
Δημιουργήστε έναν νέο πίνακα χωρίς αντίγραφα χρησιμοποιώντας το Set:
const uniqueArray = [...new Set([1, 2, 2, 3])];5.Επιπεδοποίηση μιας πολυδιάστατης συστοιχίας
Η μέθοδος flat() ισοπεδώνει εμφωλευμένους πίνακες:
const nestedArray = [1, [2, [3, 4]]];
const flatArray = nestedArray.flat(2);6.Αντιγραφή κειμένου στο Πρόχειρο
Μπορείτε να αντιγράψετε κείμενο στο πρόχειρο χρησιμοποιώντας το API Clipboard:
function copyText(text) {
navigator.clipboard.writeText(text);
}7.Έλεγχος αν μια τιμή είναι αριθμός
Για να ελέγξετε αν μια τιμή είναι έγκυρος αριθμός, χρησιμοποιήστε το συνδυασμό των typeof και !isNaN():
const isNumber = value => typeof value === 'number' && !isNaN(value);8.Δημιουργία ενός τυχαίου αριθμού σε ένα εύρος
Ακολουθεί μια συνάρτηση για τη δημιουργία ενός τυχαίου αριθμού μεταξύ δύο τιμών:
const getRandom = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;9.Μετατροπή μιας συμβολοσειράς σε αριθμό
Χρησιμοποιήστε τον τελεστή + για να μετατρέψετε γρήγορα μια συμβολοσειρά σε αριθμό:
const num = +"42"; // 42Εναλλακτικά, μπορείτε να χρησιμοποιήσετε την parseInt():
const number = parseInt("42", 10);10.Προεπιλεγμένες παράμετροι σε συναρτήσεις
Ορίστε προεπιλεγμένες τιμές παραμέτρων σε συναρτήσεις για την αποφυγή απροσδιόριστων τιμών:
function greet(name = 'Guest') {
console.log(`Hello, ${name}`);
}11.Μετατροπή αντικειμένου Arguments σε συστοιχία
Στις συναρτήσεις JavaScript, τα ορίσματα είναι ένα αντικείμενο που μοιάζει με πίνακα και μπορεί να μετατραπεί σε πραγματικό πίνακα:
function myFunc() {
const argsArray = Array.from(arguments);
}12.Αναπήδηση μιας συνάρτησης
Η αποσύνδεση εξασφαλίζει ότι μια συνάρτηση δεν καλείται επανειλημμένα σε γρήγορη διαδοχή. Ακολουθεί ένα παράδειγμα:
function debounce(func, delay) {
let timeout;
return function(...args) {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), delay);
};
}13.Μειώστε την ισχύ μιας συνάρτησης
Ο περιορισμός διασφαλίζει ότι μια συνάρτηση καλείται το πολύ μία φορά σε ένα καθορισμένο χρονικό διάστημα:
function throttle(func, limit) {
let lastFunc;
let lastRan;
return function(...args) {
if (!lastRan) {
func.apply(this, args);
lastRan = Date.now();
} else {
clearTimeout(lastFunc);
lastFunc = setTimeout(() => {
if (Date.now() - lastRan >= limit) {
func.apply(this, args);
lastRan = Date.now();
}
}, limit - (Date.now() - lastRan));
}
};
}14.Έλεγχος αν ένα αντικείμενο είναι άδειο
Ελέγξτε αν ένα αντικείμενο δεν έχει ιδιότητες χρησιμοποιώντας την Object.keys():
const isEmpty = obj => Object.keys(obj).length === 0;15.Αξιολόγηση βραχυκυκλώματος
Χρησιμοποιήστε βραχυκύκλωμα για να εκχωρήσετε τιμές υπό όρους:
const message = user.isLoggedIn && "Welcome back!";Εάν το user.isLoggedIn αληθεύει, το μήνυμα λαμβάνει την τιμή συμβολοσειράς.
16.Στενογραφία ιδιότητας αντικειμένου
Όταν τα ονόματα των ιδιοτήτων ταιριάζουν με τα ονόματα των μεταβλητών, μπορείτε να χρησιμοποιήσετε σύνταξη συντόμευσης:
const name = "John";
const age = 25;
const person = { name, age };17.Αποδόμηση συστοιχιών
Αποδομήστε πίνακες για να εκχωρήσετε τιμές σε μεταβλητές:
const [first, second] = [10, 20];18.Αποδόμηση αντικειμένων
Εξαγωγή ιδιοτήτων από αντικείμενα και ανάθεσή τους σε μεταβλητές:
const {name, age} = {name: "Jane", age: 30};19.Πρότυπο Literals
Χρησιμοποιήστε πρότυπα Literals για εύκολη παρεμβολή συμβολοσειρών:
const name = 'John';
const greeting = `Hello, ${name}!`;20.Μετατροπή NodeList σε Συστοιχία
Μπορείτε να μετατρέψετε μια NodeList σε πίνακα χρησιμοποιώντας την Array.from():
const nodeList = document.querySelectorAll('div');
const nodeArray = Array.from(nodeList);21.Έλεγχος αν η συστοιχία περιέχει ένα στοιχείο
Χρησιμοποιήστε την includes() για να ελέγξετε αν ένας πίνακας περιέχει μια τιμή:
const fruits = ['apple', 'banana', 'orange'];
console.log(fruits.includes('banana')); // true22.Λήψη μοναδικών τιμών από μια συστοιχία
Μπορείτε να βρείτε μοναδικές τιμές χρησιμοποιώντας το Set:
const uniqueValues = Array.from(new Set([1, 2, 2, 3, 3]));23.Εύρεση ιδιοτήτων αντικειμένου
Χρησιμοποιήστε τις Object.keys() και Object.values() για να ανακτήσετε τα κλειδιά και τις τιμές ενός αντικειμένου:
const obj = { name: 'Alice', age: 30 };
console.log(Object.keys(obj)); // ['name', 'age']
console.log(Object.values(obj)); // ['Alice', 30]24.Συγχώνευση αντικειμένων
Χρησιμοποιήστε τον τελεστή εξάπλωσης για να συγχωνεύσετε αντικείμενα:
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const mergedObj = { ...obj1, ...obj2 };25.Χαρτογράφηση μιας συστοιχίας
Χρησιμοποιήστε τη map() για να μετασχηματίσετε έναν πίνακα εφαρμόζοντας μια συνάρτηση σε κάθε στοιχείο:
const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2); // [2, 4, 6]
