Wie man Herausforderungen bei der Codierung von Vorstellungsgesprächen bewältigt

Wie viele von Ihnen wissen, bewerbe ich mich seit einigen Wochen für eine Stelle in der Webentwicklung und dachte, es wäre eine gute Idee, einige der Codierungsprobleme zu teilen, denen ich begegnet bin.

Darüber hinaus werde ich Ihnen zeigen, wie ich diese Herausforderungen gelöst habe. Zugegeben, es gibt viele Möglichkeiten, diese Herausforderungen zu lösen, aber so habe ich es gemacht. Wenn Sie verschiedene Möglichkeiten haben, ist das großartig und ich würde mich freuen, wenn Sie sie mit mir teilen!

Ich werde keine identifizierbaren Informationen über die Unternehmen oder Einzelheiten zum Interviewprozess des Unternehmens weitergeben, um die Prozessintegrität zu gewährleisten.

Okay, dann lass uns loslegen.

Die Herausforderung

Dies ist eine Herausforderung, die mir kürzlich gegeben wurde und die ich beim Lösen gut fand:

Aufgabe: Geben Sie eine grundlegende Liste der Beiträge von einem Endpunkt in umgekehrter chronologischer Reihenfolge zurück

Um das Unternehmen und seine Informationen zu schützen, werde ich nicht die URL freigeben, von der ich die Informationen zurückgegeben habe, sondern einen generischen Link von JSONPlaceholder (eine großartige, kostenlose Open-Source-API für Entwickler, wenn Sie allgemeine externe Daten benötigen). im Code unten.

Hier ist der HTML-Code, mit dem ich begonnen habe, damit wir unsere Ergebnisse anzeigen können:

Das

Original text


    Das Tag hat eine ID, damit wir es später im Prozess formatieren können.

    Abrufen von Daten vom Endpunkt

    Okay, lassen Sie uns den JavaScript- Teil dieser Herausforderung untersuchen. Zunächst möchte ich meine Ausgabe- und Anzeigevariablen einstellen:

    Ich verwende let für die Ausgabevariable und setze sie auf null, da wir ihren Wert später im Code ändern werden. Die Liste Variable wird mit erklärt const , weil es Wert ist nicht zu ändern ist.

    Im obigen Beispiel sind wir einen Pfeil Funktion erklärt namens getData eingewickelt in einem try ... catch - Block (Dies ist ein sauberer / einfacher zu bedienen / Lese - Syntax , dass Anwendungen versucht , einige Code und fängt Fehler , wenn sie passieren - Sie werden auch sehen , der Fangabschnitt unten). Da wir Daten asynchron abrufen, müssen wir auch async / await verwenden , um Daten abzurufen. Dies ist die Methode, mit der ich mich am wohlsten fühle, aber ich weiß, dass es viele andere Möglichkeiten gibt, Daten von einem Endpunkt abzurufen. Teilen Sie also Ihre Daten mit: D.

    Sobald wir unseren deklariert haben Datenvariable, ist das nächste , was eine Variable zu setzen , die zurückgegebenen Daten auf ein JSON - Objekt zu drehen , so dass wir es in einer brauchbaren Form bekommen. Wir machen das mit der .json () Methode. Wir warten die Daten auch , denn wenn wir das weglassen waren await Stichwort, würde JavaScript versuchen , das drehen Datenvariable in JSON , aber die Daten würden noch nicht da sein , weil es von einer asynchronen API kommen wird .

    Als allerletzte Zeile in diesem Abschnitt protokollieren wir unsere Daten, die wir vom API-Endpunkt zurückerhalten, um sicherzustellen, dass wir alles bekommen, was wir wollten. Wir haben ein Array voller Objekte. Sie werden auch feststellen, dass der Schlüssel " created_at" unsere Daten enthält und nicht in irgendeiner Reihenfolge vorliegt. Ihr Format ist auch keine einfache vierstellige Zahl, die das Jahr darstellt, was es einfach machen würde, sie in umgekehrter chronologischer Reihenfolge zu filtern . Wir müssen uns darum kümmern.

    Manipulieren unserer Daten

    Hier erklären wir die Variable Datacopy , die Punkte auf die dataJSON Variable mutiert in eine Anordnung über den Spread - Operator (...) . Im Wesentlichen kopieren wir unsere zurückgegebenen JSON-Daten, damit wir das Original nicht manipulieren (schlechte Praxis), während wir es zu einem Array machen, damit wir darüber iterieren können.

    Danach sortieren wir das Array. Sortieren ist eine äußerst nützliche Array-Methode, mit der unsere Array-Indizes basierend auf der Funktion, die wir an sort übergeben, in die Reihenfolge unserer Wahl gebracht werden .

    In der Regel möchten wir die Daten möglicherweise nach dem Wert (vom größten zum kleinsten) sortieren, um den Parameter a vom Parameter b zu subtrahieren . Da wir unsere Ergebnisse jedoch in umgekehrter chronologischer Reihenfolge anzeigen müssen, habe ich beschlossen, ein neues Datum zu erstellen (durchgeführt mit dem neuen Operator und der in JavaScript integrierten Methode Date , mit der eine neue plattformunabhängig formatierte Instanz eines Datums erstellt wird. Nun, da a und b Wenn wir unsere Objekte in unseren Array-Indizes darstellen, können wir auf die Schlüssel / Wert-Paare zugreifen, die in diesen Objekten enthalten sind. Also subtrahieren wir b.published_at von a.published_at und dies sollte uns unsere Daten in gebenumgekehrte chronologische Reihenfolge .

    Anzeigen der Früchte unserer Arbeit

    Erinnern Sie sich an die Ausgabevariable , die wir ganz oben in unserem Programm auf null gesetzt haben ? Nun ist es Zeit zu glänzen!

    Hier sind also ein paar Dinge los. Zuerst setzen wir unsere Ausgabevariable auf einen neuen Wert, indem wir unsere dataCopy- Variable mit der Map- Methode zuordnen . Diese Methode gibt ein neues Array mit den Ergebnissen des einmaligen Aufrufs der bereitgestellten Funktion für jeden Index zurück. Der Parameter item repräsentiert unsere Objekte in unserem Array, das vom Endpunkt zurückgegeben wurde, und hat somit Zugriff auf alle ihre Eigenschaften wie title und shared_at .

    Wir geben zwei Listenelemente mit a zurück in jedem (für Stylingzwecke) sowie eine Zeichenfolge für die Überschriften Titel und Veröffentlichungsdatum . In diesen haben wir unsere Variablen, die Vorlagenliterale verwenden, um den Titel und das Datum für jeden Beitrag festzulegen.

    Dann setzen wir unsere Liste Variable innerHTML- zu dem unserer gleich Ausgangsvariable.

    Schließlich haben wir die schließende Klammer und die Fehlerbehandlung unseres try ... catch- Blocks sowie unseren Funktionsaufruf:

    Endgültiger Code

    So sieht unser vollständiger Code jetzt aus:

    Und hier ist unser grundlegendes CSS-Styling:

    Und hier ist das Ergebnis unserer Arbeit mit ihrem sehr einfachen Styling:

    Wie Sie sehen, haben wir das erreicht, was wir uns vorgenommen haben, und tatsächlich ist die Liste in umgekehrter chronologischer Reihenfolge . Yay!

    Ich hoffe, Sie haben diesen Spaziergang durch meinen Denkprozess und darüber, wie ich diese Herausforderung gelöst habe, genossen. Zugegeben, es gibt viele Möglichkeiten, dies zu vervollständigen. Teilen Sie Ihre mit mir! Ich freue mich darauf, diese Serie am Laufen zu halten und werde eine weitere veröffentlichen, nachdem ich eine weitere Herausforderung durchlaufen habe!

    Außerdem poste ich die meisten meiner Artikel auf großartigen Plattformen wie Dev.to und Medium, damit Sie meine Arbeit auch dort finden können. Dieser Artikel wurde ursprünglich am 27. Mai 2019 in meinem Blog veröffentlicht.

    Wenn Sie hier sind, abonnieren Sie doch meinen Newsletter . Ich verspreche, dass ich Ihren Posteingang niemals als Spam versenden werde und Ihre Informationen nicht an Dritte weitergegeben werden. Ich versende gelegentlich interessante Ressourcen, Artikel zur Webentwicklung und eine Liste meiner neuesten Beiträge.

    Wir wünschen Ihnen einen schönen Tag voller Liebe, Freude und Programmierung!