Πώς να κατακτήσετε προκλήσεις κωδικοποίησης συνέντευξης εργασίας

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

Όχι μόνο αυτό, αλλά θα μοιραστώ τους τρόπους που έκανα για την επίλυση αυτών των προκλήσεων. Βεβαίως, υπάρχουν πολλοί τρόποι για την επίλυση αυτών των προκλήσεων, αλλά αυτοί είναι οι τρόποι που το έκανα. Αν έχετε διαφορετικούς τρόπους που είναι φοβερό και θα ήθελα πολύ να τα μοιραστείτε μαζί μου!

Δεν θα μοιραστώ καμία αναγνωρίσιμη πληροφορία σχετικά με τις εταιρείες ή τις λεπτομέρειες σχετικά με τη διαδικασία συνέντευξης της εν λόγω εταιρείας για τη διατήρηση της ακεραιότητας της διαδικασίας.

Εντάξει, ας το φτάσουμε τότε.

Η πρόκληση

Πρόκειται για μια πρόκληση που μου δόθηκε πρόσφατα ότι ένιωθα καλά για την επίλυση:

Εργασία: Επιστρέψτε μια βασική λίστα αναρτήσεων από ένα τελικό σημείο με αντίστροφη χρονολογική σειρά

Για να προστατέψω την εταιρεία και τις πληροφορίες τους, δεν θα κοινοποιήσω τη διεύθυνση URL από την οποία επέστρεψα τις πληροφορίες, αλλά θα έχω έναν γενικό σύνδεσμο από το JSONPlaceholder (ένα εξαιρετικό, δωρεάν, ανοιχτού κώδικα API για προγραμματιστές όταν χρειάζεστε κάποια γενικά εξωτερικά δεδομένα) στον παρακάτω κώδικα.

Εδώ είναι ο HTML που ξεκίνησα, οπότε έχουμε κάτι για να εμφανίσουμε τα αποτελέσματά μας:

ο

    Η ετικέτα έχει ένα αναγνωριστικό, ώστε να μπορούμε να το σχεδιάσουμε αργότερα στη διαδικασία.

    Λήψη δεδομένων από το τελικό σημείο

    Εντάξει, ας ανακαλύψουμε το τμήμα JavaScript αυτής της πρόκλησης. Πρώτον, θέλω να ορίσω τις μεταβλητές εξόδου και εμφάνισης:

    Χρησιμοποιώ το let για τη μεταβλητή εξόδου και το θέτω σε μηδέν επειδή θα αλλάξουμε την τιμή του αργότερα στον κώδικα. Η μεταβλητή λίστας δηλώνεται με const επειδή η τιμή της δεν θα αλλάζει.

    Στο παραπάνω παράδειγμα, είμαστε δηλώνοντας μια λειτουργία βέλος που ονομάζεται GetData τυλιγμένο σε ένα μπλοκ try ... αλιευμάτων (Αυτό είναι ένα καθαριστικό / εύκολο στη χρήση / ανάγνωσης σύνταξη που χρήσεων προσπαθεί κάποια κώδικα και τα αλιεύματα τα λάθη και αν συμβεί - θα δείτε επίσης το τμήμα αλίευσης παρακάτω). Επειδή λαμβάνουμε δεδομένα ασύγχρονα, πρέπει επίσης να χρησιμοποιήσουμε το async / περιμένουμε να πάρουμε δεδομένα. Αυτή είναι η μέθοδος με την οποία νιώθω πιο άνετα, αλλά ξέρω ότι υπάρχουν πολλοί άλλοι τρόποι λήψης δεδομένων από ένα τελικό σημείο, οπότε μη διστάσετε να το μοιραστείτε

    Μόλις δηλώσουμε τη μεταβλητή δεδομένων μας , το επόμενο είναι να ορίσουμε μια μεταβλητή για να μετατρέψουμε τα δεδομένα που επιστρέφονται σε ένα αντικείμενο JSON, ώστε να μπορούμε να το πάρουμε σε χρησιμοποιήσιμη μορφή. Το κάνουμε αυτό με τη μέθοδο .json () . Περιμένουμε επίσης τα δεδομένα, διότι αν θέλαμε να παραλείψουμε τη λέξη-κλειδί αναμονής , η JavaScript θα προσπαθούσε να μετατρέψει τη μεταβλητή δεδομένων σε JSON, αλλά τα δεδομένα δεν θα υπήρχαν ακόμη επειδή προέρχονται από ασύγχρονο API.

    Ως η τελευταία γραμμή της ενότητας, κονσόλα. Καταγράψτε τα δεδομένα μας ότι παίρνουμε πίσω από το τελικό σημείο του API για να βεβαιωθούμε ότι λαμβάνουμε ό, τι θέλαμε. Έχουμε μια σειρά γεμάτη αντικείμενα. Θα παρατηρήσετε επίσης ότι το κλειδί Published_at διατηρεί τις ημερομηνίες μας και δεν είναι σε κανένα είδος παραγγελίας. Η μορφή τους δεν είναι επίσης ένας απλός τετραψήφιος αριθμός που αντιπροσωπεύει το έτος που θα διευκολύνει το φιλτράρισμα τους σε αντίστροφη χρονολογική σειρά . Θα πρέπει να το φροντίσουμε αυτό.

    Χειρισμός των δεδομένων μας

    Εδώ δηλώνουμε τη μεταβλητή dataCopy που επισημαίνει την dataJSON μεταβλητή μεταλλαχθεί σε μια σειρά, μέσω του χειριστή spread (...) . Ουσιαστικά, αντιγράφουμε τα επιστρεφόμενα δεδομένα JSON, οπότε δεν χειριζόμαστε το πρωτότυπο (κακή πρακτική) ενώ το κάνουμε σε πίνακα έτσι ώστε να μπορούμε να το επαναλάβουμε.

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

    Συνήθως, ίσως θέλουμε να ταξινομήσουμε τα δεδομένα με βάση την τιμή (μεγαλύτερη έως μικρότερη), έτσι αφαιρούμε την παράμετρο a από την παράμετρο b . Αλλά επειδή πρέπει να εμφανίσουμε τα αποτελέσματά μας με αντίστροφη χρονολογική σειρά , αποφάσισα να δημιουργήσω μια νέα ημερομηνία (ολοκληρώθηκε με τον νέο χειριστή και την ενσωματωμένη JavaScript μέθοδο Date που δημιουργεί μια νέα πλατφόρμα ανεξάρτητη μορφή μιας ημερομηνίας. Τώρα, επειδή a και b αντιπροσωπεύστε τα αντικείμενά μας που βρίσκονται μέσα στους δείκτες του πίνακα μας, μπορούμε να έχουμε πρόσβαση στα ζεύγη κλειδιών / τιμών που διατηρούνται στα εν λόγω αντικείμενα. Έτσι, αφαιρούμε το b.published_at από το a.published_at και αυτό θα πρέπει να μας δώσει τις ημερομηνίες μας στοαντίστροφη χρονολογική σειρά .

    Εμφάνιση των καρπών της εργασίας μας

    Θυμάστε ότι η μεταβλητή εξόδου που ορίζουμε ως μηδέν στην κορυφή του προγράμματος μας; Λοιπόν τώρα είναι καιρός να λάμψει!

    Λοιπόν, υπάρχουν μερικά πράγματα εδώ. Αρχικά, ορίζουμε τη μεταβλητή εξόδου σε μια νέα τιμή χαρτογραφώντας τη μεταβλητή dataCopy χρησιμοποιώντας τη μέθοδο χάρτη . Αυτή η μέθοδος επιστρέφει έναν νέο πίνακα με τα αποτελέσματα της κλήσης της παρεχόμενης συνάρτησης μία φορά για κάθε ευρετήριο. Η παράμετρος του στοιχείου αντιπροσωπεύει τα αντικείμενά μας στο εσωτερικό του πίνακα μας που επιστράφηκαν από το τελικό σημείο και έτσι έχει πρόσβαση σε όλες τις ιδιότητές τους, όπως ο τίτλος και το Published_at .

    Επιστρέφουμε δύο στοιχεία λίστας με ένα μέσα σε κάθε ένα (για λόγους στυλ), καθώς και μια συμβολοσειρά για τις επικεφαλίδες Τίτλος και Ημερομηνία Δημοσίευσης . Μέσα από αυτές, έχουμε τις μεταβλητές μας που χρησιμοποιούν τις τυπικές λέξεις για να ορίσουν τον τίτλο και την ημερομηνία για κάθε ανάρτηση.

    Στη συνέχεια, ορίζουμε το internalHTML της μεταβλητής λίστας μας ίσο με αυτό της μεταβλητής εξόδου μας .

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

    Τελικός κωδικός

    Δείτε πώς φαίνεται το πλήρες σώμα κώδικα τώρα:

    Και εδώ είναι το βασικό μας στυλ CSS:

    Και εδώ είναι το αποτέλεσμα της δουλειάς μας με πολύ βασικό στυλ:

    Όπως μπορείτε να δείτε, καταφέραμε να κάνουμε αυτό και στην πραγματικότητα ο κατάλογος είναι με αντίστροφη χρονολογική σειρά . Ναι!

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

    Επίσης, δημοσιεύω τα περισσότερα άρθρα μου σε εξαιρετικές πλατφόρμες, όπως το Dev.to και το Medium, ώστε να μπορείτε να βρείτε και το έργο μου εκεί. Αυτό το άρθρο δημοσιεύτηκε αρχικά στο ιστολόγιό μου στις 27 Μαΐου 2019.

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

    Έχετε μια υπέροχη μέρα γεμάτη αγάπη, χαρά και κωδικοποίηση!