编码 面试_如何克服面试中的编码挑战

编码 面试

As many of you know, I have been applying for a job in web development for a few weeks and I thought it would be a good idea to share some of the coding challenges I've encountered.

你们中许多人都知道，我已经申请了Web开发工作了几周，我认为与我分享一些我遇到的编码挑战是一个好主意。

Not only that but I'll share the ways I went about solving these challenges.  Granted, there are many ways to solve these challenges but these are the ways I went about it.  If you have different ways that's awesome and I'd love for you to share them with me!

不仅如此，我还将分享我解决这些挑战的方式。 诚然，有许多方法可以解决这些挑战，但这是我解决问题的方法。 如果您有其他很棒的方式，我希望您能与我分享！

I will not share any identifiable information about the companies or specifics on the interview process of said company to preserve process integrity.

我不会在该公司的面试过程中分享有关公司或细节的任何可识别信息，以保持过程的完整性。

Alright, let's get to it then.

好吧，让我们开始吧。

挑战 (The Challenge)

This is a challenge I was given recently that I felt good about solving:

这是我最近遇到的一个挑战，使我在解决问题上感觉很好：

Task: Return a basic styled list of posts from an endpoint in reverse chronological order

任务：以相反的时间顺序从端点返回帖子的基本样式列表

To protect the company and their information, I will not share the URL from which I returned the information but instead will have a generic link from JSONPlaceholder (a great, free, open source API for developers when you need to get some generic outside data) in the code below.

为了保护公司及其信息，我不会共享从其返回信息的URL，而是从JSONPlaceholder获得通用链接(当您需要一些通用的外部数据时，这是一种很棒的，免费的开放源代码的API，适用于开发人员)在下面的代码中。

Here's the HTML I started with so we have something to display our results in:

这是我开始使用HTML，因此我们可以在其中显示结果：

The <ul> tag has an id so we can style it later in the process.

<ul>标记具有一个ID，因此我们可以在此过程的稍后阶段对其进行样式设置。

从端点获取数据 (Fetching Data From the Endpoint)

Alright, let's dig into the JavaScript portion of this challenge.  First, I like to set my output and display variables:

好吧，让我们深入研究一下这一挑战的JavaScript部分。 首先，我想设置输出并显示变量：

I use let for the output variable and set it to null because we will change it's value later in the code.  The list variable is declared with const because it's value will not be changing.

我将let用作输出变量，并将其设置为null，因为稍后我们将在代码中更改其值。 list变量用const声明，因为它的值不会改变。

In the above example, we’re declaring an arrow function named getData wrapped in a try…catch block (This is a cleaner/easier to use/read syntax that uses tries some code and catches errors if they happen — you’ll also see the catch portion below).  Because we're getting data asynchronously we also need to make use of async/await to fetch data.  This is the method I'm most comfortable with but I know there are many other ways to get data from an endpoint so feel free to share yours :D

在上面的例子中，我们声明了一个箭头功能命名的getData包裹在一个TRY ... CATCH块(这是一个更清洁/更容易使用/读取语法使用尝试一些代码， 渔获物的错误，如果他们发生-你还可以看到下面的捕获部分)。 因为我们要异步获取数据，所以我们还需要利用async / await来获取数据。 这是我最喜欢的方法，但是我知道还有很多其他方法可以从端点获取数据，因此可以随时共享您的：D

Once we've declared our data variable, the next thing is to set a variable to turn the returned data to a JSON object so we can get it in a usable form.  We do that with the .json() method.  We're awaiting the data as well because if we were to omit the await keyword, JavaScript would try to turn the data variable into JSON but the data would not be there yet because it's coming from an asynchronous API.

声明数据变量后，下一步是设置一个变量以将返回的数据转换为JSON对象，以便以可用的形式获取它。 我们使用.json()方法做到这一点。 我们也正在等待数据，因为如果我们省略await关键字，JavaScript会尝试将数据变量转换为JSON，但由于该数据来自异步API，因此数据尚不存在。

As the very last line in the section, we console.log our data that we get back from the API endpoint just to make sure we're getting everything we wanted.  We have an array full of objects.  You'll also notice that the key published_at holds our dates and they are not in any type of order.  Their format is also not a simple four digit number representing the year which would make it easy to filter them into reverse chronological order.  We'll need to take care of that.

作为本节的最后一行，我们对从API端点获取的数据进行console.log记录 ，以确保获得所需的一切。 我们有一个充满对象的数组。 您还会注意到，键published_at保存了我们的日期，并且它们没有任何顺序。 它们的格式也不是代表年份的简单的四位数，因此可以很容易地将它们过滤为反向时间顺序 。 我们需要注意这一点。

处理我们的数据 (Manipulating Our Data)

Here we declare the variable dataCopy which points to the dataJSON variable mutated into an array via the spread operator(...).  Essentially, we are copying our returned JSON data so we aren't manipulating the original (bad practice) while making it into an array so that we can iterate over it.

在这里，我们声明变量dataCopy ，该变量指向通过spread操作符(...)突变为数组的dataJSON变量。 本质上，我们正在复制返回的JSON数据，因此在将原始数据放入数组中时不会对其进行处理(不好的做法)，以便可以对其进行迭代。

After, we sort the array.  Sort is an extremely useful array method that will put our array indices into the order of our choosing based on the function we pass into sort.

之后，我们对数组进行排序 。 排序是一种非常有用的数组方法，它将根据传递给排序的函数将数组索引置于选择的顺序中。

Typically, we might want to sort the data based on value (largest to smallest) so we subtract the parameter a from parameter b.  But because we need to display our results in reverse chronological order I decided to produce a new date (accomplished with the new operator and the JavaScript built in method Date that creates a new platform independent formatted instance of a date.  Now, because a and b represent our objects sitting inside our array indices, we can access the key/value pairs held within said objects.  So, we subtract b.published_at from a.published_at and this should give us our dates in reverse chronological order.

通常情况下，我们可能要基于价值的数据进行排序(从大到小)，所以我们从参数b减去参数 。 但是因为我们需要按时间倒序显示结果，所以我决定产生一个新日期(由new运算符和JavaScript内置方法Date共同完成，该方法创建一个新的平台独立格式的日期实例。现在，因为a和b代表我们的对象坐在我们的数组索引里面，我们可以说，访问对象中持有的键/值对。所以，我们减去b.published_at从a.published_at，这应该给我们以时间倒序我们的日期。

展示我们劳动的成果 (Displaying the Fruits of Our Labor)

Remember that output variable we set to null at the very top of our program?  Well now is it's time to shine!

还记得我们在程序最顶部设置为null的 输出变量吗？ 好了，现在该发光了！

So, there's a few things going on here.  First, we're setting our output variable to a new value by mapping over our dataCopy variable using the map method.  This method returns a new array with the results of calling the provided function once for each index.  The item parameter represents our objects inside of our array that was returned from the endpoint and thus has access to all of their properties such as title and published_at.

因此，这里发生了一些事情。 首先，通过使用map方法映射到dataCopy变量，将输出变量设置为新值。 此方法返回一个新数组，其结果是为每个索引调用一次提供的函数。 item参数表示从端点返回的数组内部的对象，因此可以访问其所有属性，例如title和published_at 。

We return two list elements with a <span> inside each one (for styling purposes), as well as a string for the Title and Date Published headings.  Inside of those, we have our variables that use template literals to set the title and the date for each post.

我们返回两个列表元素，每个元素内都有一个<span> (出于样式目的)，以及一个标题和发布日期标题的字符串。 在这些里面，我们有使用模板文字的变量来设置每个帖子的标题和日期。

Then, we set our list variable's innerHTML equal to that of our output variable.

然后，将列表变量的innerHTML设置为等于输出变量的innerHTML 。

Finally, we have the closing bracket and error handling of our try...catch block as well as our function call:

最后，我们获得了try ... catch块的闭括号和错误处理以及函数调用：

最终密码 (Final Code)

Here is what our full code body looks like now:

这是我们完整的代码主体现在的样子：

And here is our basic CSS styling:

这是我们的基本CSS样式：

And here is the result of our work with it's very basic styling:

这是我们工作的结果，它具有非常基本的样式：

As you can see, we accomplished what we set out to do and in fact the list is in reverse chronological order. Yay!

如您所见，我们完成了我们要做的工作，实际上，该列表按时间倒序排列 。 好极了！

---

---

I hope you've enjoyed this walk through of my thought process and of how I solved this challenge.  Granted, there are many ways of completing this so feel free to share yours with me!  I'm excited to keep this series going and will post another after I've gone through another challenge!

我希望您喜欢我的思考过程以及如何解决这一难题。 当然，有很多方法可以完成此操作，请随时与我分享！ 我很高兴继续进行本系列赛，并在经历了另一项挑战后再发表！

Also, I cross post most of my articles on great platforms like Dev.to and Medium so you can find my work there as well. This article was originally posted on my blog on May 27, 2019.

另外，我将大多数文章交叉发布在Dev.to和Medium等出色平台上，因此您也可以在那里找到我的作品。 本文最初于2019年5月27日发布在我的博客上。

While you’re here why not sign up for my Newsletter.  I promise I’ll never  spam your inbox and your information will not be shared with  anyone/site.  I like to occasionally send out interesting resources I  find, articles about web development, and a list of my newest posts.

当您在这里时，为何不注册我的时事通讯 。 我保证我永远不会向您的收件箱发送垃圾邮件，并且不会与任何人/站点共享您的信息。 我偶尔会发送一些有趣的资源，有关Web开发的文章以及最新文章列表。

Have an awesome day filled with love, joy, and coding!

美好的一天充满爱，欢乐和编码！

翻译自: https://www.freecodecamp.org/news/conquering-job-interview-code-challenges-v1-0/

编码 面试