Αυτές οι μέθοδοι JavaScript θα ενισχύσουν τις δεξιότητές σας σε λίγα λεπτά

Οι περισσότερες από τις εφαρμογές που δημιουργούμε σήμερα απαιτούν κάποιο είδος τροποποίησης συλλογής δεδομένων. Η επεξεργασία στοιχείων σε μια συλλογή είναι μια κοινή λειτουργία που πιθανότατα θα αντιμετωπίσετε. Ξεχάστε τον συμβατικό τρόπο να κάνετε for-looplike (let i=0; i < value.length; i++).

Η γρήγορη ενημέρωση, η χρήση constτου for-loopθα σας δώσει σφάλμα. Λόγος γιατί είναι επειδή δηλώνει εκ νέου την τιμή κατά τη διάρκεια κάθε εκτέλεσης, επομένως iτροποποιείται από i++. Έτσι, κάθε φορά που σκέφτεστε να χρησιμοποιήσετε constή να letαναρωτηθείτε - Θα δηλωθεί ξανά αυτή η τιμή; Εάν η απάντηση είναι ναι , προχωρήστε letκαι αν όχι , προχωρήστε const. Περισσότερες πληροφορίες.

Ας υποθέσουμε ότι θέλετε να εμφανίσετε μια λίστα προϊόντων και να κατηγοριοποιήσετε, να φιλτράρετε, να αναζητήσετε, να τροποποιήσετε ή να ενημερώσετε μια συλλογή. Ή ίσως θέλετε να πραγματοποιήσετε γρήγορους υπολογισμούς όπως άθροισμα, πολλαπλασιασμός και ούτω καθεξής. Ποιος είναι ο βέλτιστος τρόπος για να επιτευχθεί αυτό;

Ίσως δεν σας αρέσουν οι λειτουργίες βέλους , δεν θέλετε να αφιερώσετε πολύ χρόνο για να μάθετε κάτι καινούργιο ή απλά δεν σας ενδιαφέρουν. Μην ανησυχείτε, δεν είστε μόνοι. Θα σας δείξω πώς γίνεται σε ES5 (λειτουργική επιβράδυνση) και ES6 (λειτουργίες βέλους).

Να γνωρίζετε: Οι λειτουργίες βέλους και οι δηλώσεις / εκφράσεις λειτουργίας δεν είναι ισοδύναμες και δεν μπορούν να αντικατασταθούν τυφλά. Λάβετε υπόψη ότι η thisλέξη-κλειδί λειτουργεί διαφορετικά μεταξύ των δύο.

Οι μέθοδοι που θα εξετάσουμε:

  1. Διαχειριστής Spread
  2. για… του επαναληπτικού
  3. περιλαμβάνει ()
  4. μερικοί()
  5. κάθε()
  6. φίλτρο()
  7. χάρτης()
  8. περιορίζω()
Αν θέλετε να γίνετε καλύτερος προγραμματιστής ιστού, να ξεκινήσετε τη δική σας επιχείρηση, να διδάξετε άλλους ή να βελτιώσετε τις δεξιότητές σας για ανάπτυξη, θα δημοσιεύω εβδομαδιαίες συμβουλές και κόλπα για τις τελευταίες γλώσσες ανάπτυξης ιστού.

1. Διαχειριστής spread

Ο Διαχειριστής Spread επεκτείνει έναν πίνακα στα στοιχεία του. Μπορεί επίσης να χρησιμοποιηθεί για κυριολεκτικά αντικείμενα.

Γιατί να το χρησιμοποιήσω;

  • Είναι ένας απλός και γρήγορος τρόπος εμφάνισης των στοιχείων ενός πίνακα
  • Λειτουργεί για συστοιχίες και κυριολεκτικά αντικείμενα
  • Είναι ένας γρήγορος και διαισθητικός τρόπος για να περάσετε επιχειρήματα
  • Απαιτεί μόνο τρεις τελείες…

Παράδειγμα:

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

2. για… του επαναληπτικού

Η for...ofδήλωση βγαίνει / επαναλαμβάνεται μέσω της συλλογής και σας δίνει τη δυνατότητα να τροποποιήσετε συγκεκριμένα στοιχεία. Αντικαθιστά τον συμβατικό τρόπο να κάνει ένα for-loop.

Γιατί να το χρησιμοποιήσω;

  • Είναι ένας απλός τρόπος προσθήκης ή ενημέρωσης ενός αντικειμένου
  • Για να εκτελέσετε υπολογισμούς (άθροισμα, πολλαπλασιασμός κ.λπ.)
  • Όταν χρησιμοποιείτε δηλώσεις υπό όρους (εάν, ενώ, αλλάζετε και ούτω καθεξής)
  • Οδηγεί σε καθαρό και αναγνώσιμο κώδικα

Παράδειγμα:

Ας υποθέσουμε ότι έχετε μια εργαλειοθήκη και θέλετε να εμφανίσετε όλα τα εργαλεία μέσα σε αυτήν. Ο for...ofεπαναληπτικός το καθιστά εύκολο.

3. Περιλαμβάνει () τη μέθοδο

Η includes()μέθοδος χρησιμοποιείται για να ελέγξει εάν υπάρχει μια συγκεκριμένη συμβολοσειρά σε μια συλλογή και επιστρέφει trueή false. Λάβετε υπόψη ότι είναι πεζά: αν το αντικείμενο μέσα στη συλλογή είναι SCHOOLκαι το αναζητήσετε school, θα επιστρέψει false.

Γιατί να το χρησιμοποιήσω;

  • Για να δημιουργήσετε απλή λειτουργικότητα αναζήτησης
  • Είναι μια διαισθητική προσέγγιση για να προσδιορίσετε εάν υπάρχει μια συμβολοσειρά
  • Χρησιμοποιεί δηλώσεις υπό όρους για τροποποίηση, φιλτράρισμα και ούτω καθεξής
  • Οδηγεί σε αναγνώσιμο κώδικα

Παράδειγμα:

Ας πούμε για οποιονδήποτε λόγο ότι δεν γνωρίζετε ποια αυτοκίνητα έχετε στο γκαράζ σας και χρειάζεστε ένα σύστημα για να ελέγξετε αν το αυτοκίνητο που θέλετε υπάρχει ή όχι. includes()στη διάσωση!

4. Κάποια () μέθοδος

Η some()μέθοδος ελέγχει εάν υπάρχουν ορισμένα στοιχεία σε έναν πίνακα και επιστρέφει trueή false. Αυτό είναι κάπως παρόμοιο με την έννοια της includes()μεθόδου, εκτός του ότι το όρισμα είναι συνάρτηση και όχι συμβολοσειρά.

Γιατί να το χρησιμοποιήσω;

  • Διασφαλίζει ότι κάποιο στοιχείο περνάει το τεστ
  • Εκτελεί δηλώσεις υπό όρους χρησιμοποιώντας συναρτήσεις
  • Κάντε τον κωδικό σας δηλωτικό
  • Μερικά είναι αρκετά καλά

Παράδειγμα:

Ας πούμε ότι είστε ιδιοκτήτης κλαμπ και μην νοιάζεστε ποιος μπαίνει στο κλαμπ. Ωστόσο, δεν επιτρέπονται ορισμένοι, επειδή έπιναν πάρα πολύ (η δημιουργικότητά μου στην καλύτερη περίπτωση) Δείτε τις διαφορές μεταξύ ES5 και ES6 παρακάτω:

ES5:

ES6:

5. Κάθε μέθοδος ()

Η every()μέθοδος περνά μέσα από τον πίνακα, ελέγχει κάθεστοιχείο, και επιστρέφει trueή false. Ίδια ιδέα με some(). Εκτός εάν κάθε στοιχείο πρέπει να ικανοποιεί τη δήλωση υπό όρους, διαφορετικά, θα επιστρέψει false.

Γιατί να το χρησιμοποιήσω;

  • Διασφαλίζει ότι κάθε στοιχείο περνάει το τεστ
  • Μπορείτε να εκτελέσετε δηλώσεις υπό όρους χρησιμοποιώντας συναρτήσεις
  • Κάντε τον κωδικό σας δηλωτικό

Παράδειγμα:

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

ES5

ES6

6. Μέθοδος φίλτρου ()

Η filter()μέθοδος δημιουργεί έναν νέο πίνακα με όλα τα στοιχεία που περνούν το τεστ.

Γιατί να το χρησιμοποιήσω;

  • Έτσι μπορείτε να αποφύγετε την αλλαγή του κύριου πίνακα
  • Σας επιτρέπει να φιλτράρετε αντικείμενα που δεν χρειάζεστε
  • Σας δίνει πιο αναγνώσιμο κώδικα

Παράδειγμα:

Ας υποθέσουμε ότι θέλετε να επιστρέψετε μόνο τιμές άνω ή ίσες με 30. Φιλτράρετε όλες αυτές τις άλλες τιμές…

ES5

ES6

7. Μέθοδος χάρτη ()

Η map()μέθοδος είναι παρόμοια με τη filter()μέθοδο όσον αφορά την επιστροφή ενός νέου πίνακα. Ωστόσο, η μόνη διαφορά είναι ότι χρησιμοποιείται για την τροποποίηση στοιχείων.

Γιατί να το χρησιμοποιήσω;

  • Σας επιτρέπει να αποφύγετε να κάνετε αλλαγές στον κύριο πίνακα
  • Μπορείτε να τροποποιήσετε τα στοιχεία που θέλετε
  • Σας δίνει πιο αναγνώσιμο κώδικα

Παράδειγμα:

Ας υποθέσουμε ότι έχετε μια λίστα προϊόντων με τιμές. Ο διαχειριστής σας χρειάζεται μια λίστα για να εμφανίσει τις νέες τιμές αφού έχουν φορολογηθεί κατά 25%. Η map()μέθοδος μπορεί να σας βοηθήσει.

ES5

ES6

8. Μέθοδος μείωσης ()

Η reduce()μέθοδος μπορεί να χρησιμοποιηθεί για να μετατρέψει έναν πίνακα σε κάτι άλλο, το οποίο θα μπορούσε να είναι ακέραιος, αντικείμενο, αλυσίδα υποσχέσεων (διαδοχική εκτέλεση υποσχέσεων) κ.λπ. Για πρακτικούς λόγους, μια απλή περίπτωση χρήσης θα ήταν να συνοψίσουμε μια λίστα ακέραιων αριθμών . Εν ολίγοις, «μειώνει» ολόκληρο τον πίνακα σε μία τιμή.

Γιατί να το χρησιμοποιήσω;

  • Εκτελέστε υπολογισμούς
  • Υπολογίστε μια τιμή
  • Μετρήστε τα διπλά
  • Ομαδοποίηση αντικειμένων ανά ιδιότητα
  • Εκτελέστε τις υποσχέσεις διαδοχικά
  • Είναι ένας γρήγορος τρόπος εκτέλεσης υπολογισμών

Παράδειγμα:

Ας υποθέσουμε ότι θέλετε να μάθετε τα συνολικά έξοδά σας για μια εβδομάδα. Χρησιμοποιήστε reduce()για να λάβετε αυτήν την τιμή.

ES5

ES6

Μπορείτε να με βρείτε στις Ειδήσεις προγραμματιστών όπου δημοσιεύω κάθε εβδομάδα. Ή μπορείτε να με ακολουθήσετε στο Twitter, όπου δημοσιεύω σχετικές συμβουλές και κόλπα για την ανάπτυξη ιστού.