Όταν άρχισα να μαθαίνω JavaScript, το πρώτο πράγμα που έκανα ήταν να φτιάξω μια λίστα με κόλπα που με βοήθησαν να εξοικονομήσω χρόνο. Τα εντόπισα από άλλους προγραμματιστές, σε διαφορετικούς ιστότοπους και σε εγχειρίδια.
Σε αυτό το άρθρο, θα σας δείξω 12 υπέροχους τρόπους για να βελτιώσετε και να επιταχύνετε τον κώδικα JavaScript. Στις περισσότερες περιπτώσεις είναι καθολικές.
Υπενθύμιση: για όλους τους αναγνώστες του "Habr" - έκπτωση 10 ρούβλια κατά την εγγραφή σε οποιοδήποτε μάθημα Skillbox χρησιμοποιώντας τον κωδικό προσφοράς "Habr".
Το Skillbox προτείνει: Πρακτικό μάθημα .
Φιλτράρισμα μοναδικών τιμών
ΣΥΣΚΕΥΕΣ
Ο τύπος αντικειμένου Set εισήχθη στο ES6, μαζί με τον τελεστή..., spread, μπορούμε να τον χρησιμοποιήσουμε για να δημιουργήσουμε έναν νέο πίνακα που περιέχει μόνο μοναδικές τιμές.
const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]Σε μια κανονική κατάσταση, απαιτείται πολύ περισσότερος κώδικας για την εκτέλεση της ίδιας λειτουργίας.
Αυτή η τεχνική λειτουργεί για πίνακες που περιέχουν πρωτόγονους τύπους: απροσδιόριστο, μηδενικό, boolean, συμβολοσειρά και αριθμό. Εάν εργάζεστε με έναν πίνακα που περιέχει αντικείμενα, συναρτήσεις ή πρόσθετους πίνακες, θα χρειαστείτε διαφορετική προσέγγιση.
Μήκος πίνακα κρυφής μνήμης σε κύκλους
ΚΥΚΛΟΙ
Όταν μαθαίνετε για βρόχους, ακολουθείτε την τυπική διαδικασία:
for (let i = 0; i < array.length; i++){
console.log(i);
}Ωστόσο, με αυτήν τη σύνταξη, ο βρόχος for ελέγχει επανειλημμένα το μήκος του πίνακα σε κάθε επανάληψη.
Μερικές φορές αυτό μπορεί να είναι χρήσιμο, αλλά στις περισσότερες περιπτώσεις είναι πιο αποτελεσματικό να αποθηκεύετε προσωρινά το μήκος του πίνακα, κάτι που απαιτεί πρόσβαση σε αυτόν. Μπορούμε να το κάνουμε αυτό ορίζοντας μια μεταβλητή μήκους όπου ορίζουμε τη μεταβλητή i, ως εξής:
for (let i = 0, length = array.length; i < length; i++){
console.log(i);
}Κατ 'αρχήν, σχεδόν το ίδιο με το παραπάνω, αλλά αυξάνοντας το μέγεθος του βρόχου θα έχουμε σημαντική εξοικονόμηση χρόνου.
Αξιολόγηση βραχυκυκλώματος (βαθμολόγηση McCarthy)
ΣΥΝΘΗΚΟΙ ΧΕΙΡΙΣΤΕΣ
Ο τριαδικός τελεστής είναι ένας γρήγορος και αποτελεσματικός τρόπος για να γράψετε απλές (και μερικές φορές όχι τόσο απλές) προτάσεις υπό όρους:
x> 100; "περισσότερο από 100": "λιγότερο από 100";
x> 100; (x>200; "περισσότερο από 200": "μεταξύ 100-200"): "λιγότερο από 100";
Αλλά μερικές φορές ακόμη και ο τριαδικός χειριστής είναι πιο περίπλοκος από όσο απαιτείται. Μπορούμε να χρησιμοποιήσουμε "and" && και "or" αντί || Οι τελεστές Boolean αξιολογούν ορισμένες εκφράσεις με ακόμη πιο συνοπτικό τρόπο. Συχνά ονομάζεται "βραχυκύκλωμα" ή "βαθμολόγηση βραχυκυκλώματος".
Πώς λειτουργεί;
Ας υποθέσουμε ότι θέλουμε να επιστρέψουμε μόνο μία από τις δύο ή περισσότερες προϋποθέσεις.
Η χρήση του && θα επιστρέψει την πρώτη ψευδή τιμή. Εάν κάθε τελεστής αξιολογηθεί ως true, τότε θα επιστραφεί η τελευταία έκφραση που αξιολογήθηκε.
let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0Χρήση || θα επιστρέψει την πρώτη πραγματική τιμή. Εάν κάθε τελεστής αξιολογηθεί ως false, τότε θα επιστραφεί η τελευταία αξιολογηθείσα τιμή.
let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: null1 Παράδειγμα
Ας υποθέσουμε ότι θέλουμε να επιστρέψουμε το μήκος μιας μεταβλητής, αλλά δεν γνωρίζουμε τον τύπο της.
Σε αυτήν την περίπτωση, μπορείτε να χρησιμοποιήσετε το if/else για να ελέγξετε ότι το foo είναι ο σωστός τύπος, αλλά αυτή η μέθοδος μπορεί να είναι πολύ μεγάλη. Επομένως, είναι καλύτερο να πάρουμε το "βραχυκύκλωμα".
return (foo || []).length;Εάν η μεταβλητή foo έχει κατάλληλο μήκος, τότε αυτό θα επιστραφεί. Διαφορετικά θα πάρουμε 0.
2 Παράδειγμα
Είχατε προβλήματα με την πρόσβαση σε ένα ένθετο αντικείμενο; Μπορεί να μην γνωρίζετε εάν υπάρχει ένα αντικείμενο ή μία από τις υποιδιότητές του και αυτό μπορεί να οδηγήσει σε προβλήματα.
Για παράδειγμα, θέλαμε να αποκτήσουμε πρόσβαση στην ιδιότητα δεδομένων σε this.state, αλλά τα δεδομένα δεν ορίζονται μέχρι το πρόγραμμά μας να επιστρέψει ένα αίτημα ανάκτησης.
Ανάλογα με το πού το χρησιμοποιούμε, η κλήση του this.state.data μπορεί να εμποδίσει την εκκίνηση της εφαρμογής. Για να λύσουμε το πρόβλημα, θα μπορούσαμε να το τυλίξουμε σε μια έκφραση υπό όρους:
if (this.state.data) {
return this.state.data;
} else {
return 'Fetching Data';
}Μια καλύτερη επιλογή θα ήταν να χρησιμοποιήσετε τον τελεστή "ή".
return (this.state.data || 'Fetching Data');Δεν μπορούμε να αλλάξουμε τον παραπάνω κώδικα για να χρησιμοποιήσουμε το &&. Ο τελεστής "Ανάκτηση δεδομένων" && this.state.data θα επιστρέψει το this.state.data ανεξάρτητα από το αν είναι απροσδιόριστο ή όχι.
Προαιρετική αλυσίδα
Κάποιος θα μπορούσε να προτείνει τη χρήση προαιρετικής αλυσίδας όταν προσπαθείτε να επιστρέψετε μια ιδιότητα βαθιά σε μια δομή δέντρου. Λοιπόν, το σύμβολο του ερωτηματικού; μπορεί να χρησιμοποιηθεί για την ανάκτηση μιας ιδιότητας μόνο εάν δεν είναι μηδενική.
Για παράδειγμα, θα μπορούσαμε να αναδιαμορφώσουμε το παραπάνω παράδειγμα για να λάβουμε το this.state.data?..(). Δηλαδή, τα δεδομένα επιστρέφονται μόνο εάν η τιμή δεν είναι μηδενική.
Ή, εάν έχει σημασία αν ορίζεται η κατάσταση ή όχι, θα μπορούσαμε να επιστρέψουμε αυτό το.state?.data.
Μετατροπή σε Boolean
ΜΕΤΑΤΡΟΠΗ ΤΥΠΟΥ
Εκτός από τις κανονικές συναρτήσεις boolean true και false, η JavaScript αντιμετωπίζει επίσης όλες τις άλλες τιμές ως true ή false.
Μέχρι να σημειωθεί διαφορετικά, όλες οι τιμές στο JavaScript είναι αληθείς, εκτός από 0, "", null, undefined, NaN και, φυσικά, false. Τα τελευταία είναι ψεύτικα.
Μπορούμε εύκολα να κάνουμε εναλλαγή μεταξύ των δύο χρησιμοποιώντας τον τελεστή !, ο οποίος επίσης μετατρέπει τον τύπο σε boolean.
const isTrue = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"Μετατροπή σε συμβολοσειρά
ΜΕΤΑΤΡΟΠΗ ΤΥΠΟΥ
Μια γρήγορη μετατροπή από έναν ακέραιο σε μια συμβολοσειρά μπορεί να γίνει ως εξής.
const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"Μετατροπή σε ακέραιο
ΜΕΤΑΤΡΟΠΗ ΤΥΠΟΥ
Εκτελούμε τον αντίστροφο μετασχηματισμό έτσι.
let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"Αυτή η μέθοδος μπορεί επίσης να χρησιμοποιηθεί για τη μετατροπή του τύπου δεδομένων boole σε κανονικές αριθμητικές τιμές, όπως φαίνεται παρακάτω:
console.log(+true); // Return: 1
console.log(+false); // Return: 0Μπορεί να υπάρχουν περιπτώσεις όπου το + θα ερμηνεύεται ως τελεστής συνένωσης και όχι ως τελεστής πρόσθεσης. Για να αποφύγετε αυτό, θα πρέπει να χρησιμοποιήσετε tildes: ~~. Αυτός ο τελεστής είναι ισοδύναμος με -n-1. Για παράδειγμα, ~15 ισούται με -16.
Η χρήση δύο tildes στη σειρά αναιρεί την πράξη επειδή - (- - n - 1) - 1 = n + 1 - 1 = n. Με άλλα λόγια, το ~-16 είναι ίσο με 15.
const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"<Quick Powers
ΕΠΙΧΕΙΡΗΣΕΙΣ
Ξεκινώντας στο ES7, μπορείτε να χρησιμοποιήσετε τον τελεστή εκθέσεως ** ως συντομογραφία για τις δυνάμεις. Αυτό είναι πολύ πιο γρήγορο από τη χρήση του Math.pow(2, 3). Φαίνεται απλό, αλλά αυτό το σημείο περιλαμβάνεται στη λίστα των τεχνικών, αφού δεν αναφέρεται παντού.
console.log(2 ** 3); // Result: 8Δεν πρέπει να συγχέεται με το σύμβολο ^, το οποίο χρησιμοποιείται συνήθως για την εκτίμηση. Αλλά στη JavaScript αυτός είναι ο τελεστής XOR.
Πριν από το ES7, η συντόμευση ** μπορούσε να χρησιμοποιηθεί μόνο για τις δυνάμεις της βάσης 2 χρησιμοποιώντας τον τελεστή αριστερού μετατόπισης bitwise <<:
Math.pow(2, n);
2 << (n - 1);
2**n;Για παράδειγμα, 2 << 3 = 16 ισοδυναμεί με 2 ** 4 = 16.
Float σε ακέραιο
ΛΕΙΤΟΥΡΓΙΕΣ / ΜΕΤΑΤΡΟΠΗ ΤΥΠΟΥ
Εάν χρειάζεται να μετατρέψετε ένα float σε ακέραιο, μπορείτε να χρησιμοποιήσετε Math.floor(), Math.ceil() ή Math.round(). Αλλά υπάρχει ένας πιο γρήγορος τρόπος, για αυτό χρησιμοποιούμε |, δηλαδή τον τελεστή OR.
console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23Συμπεριφορά | εξαρτάται σε μεγάλο βαθμό από το αν έχετε να κάνετε με θετικούς ή αρνητικούς αριθμούς, επομένως αυτή η μέθοδος είναι κατάλληλη μόνο εάν είστε σίγουροι για αυτό που κάνετε.
n | Το 0 αφαιρεί τα πάντα μετά το δεκαδικό διαχωριστικό, περικόπτοντας το float σε έναν ακέραιο.
Μπορείτε να έχετε το ίδιο αποτέλεσμα στρογγυλοποίησης χρησιμοποιώντας ~~. Μετά την αναγκαστική μετατροπή σε ακέραιο, η τιμή παραμένει αμετάβλητη.
Αφαίρεση τελικών αριθμών
Ο τελεστής OR μπορεί να χρησιμοποιηθεί για την αφαίρεση οποιουδήποτε αριθμού ψηφίων από έναν αριθμό. Αυτό σημαίνει ότι δεν χρειάζεται να μετατρέψουμε τύπους όπως εδώ:
let str = "1553";
Number(str.substring(0, str.length - 1));Αντίθετα γράφουμε απλά:
console.log(1553 / 10 | 0) // Result: 155
console.log(1553 / 100 | 0) // Result: 15
console.log(1553 / 1000 | 0) // Result: 1Αυτόματη σύνδεση
ΤΑΞΕΙΣ
Οι συμβολισμοί βέλους ES6 μπορούν να χρησιμοποιηθούν σε μεθόδους κλάσης και η σύνδεση υπονοείται. Αυτό σημαίνει ότι μπορείτε να πείτε αντίο σε επαναλαμβανόμενες εκφράσεις όπως αυτή.myMethod = this.myMethod.bind(this)!
import React, { Component } from React;
export default class App extends Compononent {
constructor(props) {
super(props);
this.state = {};
}
myMethod = () => {
// This method is bound implicitly!
}
render() {
return (
<>
<div>
{this.myMethod()}
</div>
</>
)
}
};Περικοπή συστοιχίας
ΣΥΣΚΕΥΕΣ
Εάν χρειάζεται να αφαιρέσετε τιμές από έναν πίνακα, υπάρχουν πιο γρήγορες μέθοδοι από το splice().
Για παράδειγμα, εάν γνωρίζετε το μέγεθος του αρχικού πίνακα, μπορείτε να παρακάμψετε την ιδιότητα μήκους του ως εξής:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]Αλλά υπάρχει μια άλλη μέθοδος, και πιο γρήγορη. Εάν η ταχύτητα είναι αυτό που σας ενδιαφέρει, εδώ είναι οι επιλογές μας:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array = array.slice(0, 4);
console.log(array); // Result: [0, 1, 2, 3]Εκτύπωση της τελευταίας τιμής(ών) ενός πίνακα
ΣΥΣΚΕΥΕΣ
Αυτή η τεχνική απαιτεί τη χρήση της μεθόδου slice().
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(array.slice(-1)); // Result: [9]
console.log(array.slice(-2)); // Result: [8, 9]
console.log(array.slice(-3)); // Result: [7, 8, 9]Μορφοποίηση κώδικα JSON
JSON
Μπορεί να έχετε ήδη χρησιμοποιήσει το JSON.stringify. Γνωρίζατε ότι βοηθά στη διαμόρφωση του JSON σας;
Η μέθοδος stringify() λαμβάνει δύο προαιρετικές παραμέτρους: μια συνάρτηση αντικατάστασης, η οποία μπορεί να χρησιμοποιηθεί για το φιλτράρισμα του JSON που εμφανίζεται και μια τιμή διαστήματος.
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
// Result:
// '{
// "alpha": A,
// "beta": B
// }'Αυτό είναι όλο, ελπίζω ότι όλες αυτές οι τεχνικές ήταν χρήσιμες. Τι κόλπα γνωρίζετε; Γράψτε τα στα σχόλια.
Το Skillbox προτείνει:
- Πρακτικό μάθημα δύο ετών .
- Διαδικτυακό μάθημα .
- Πρακτικό μάθημα έτους .
Πηγή: www.habr.com