javascript面试_技术电话面试案例研究：如何在JavaScript中将数组加倍

javascript面试

by Jane Philipps

简·菲利普斯

技术电话面试案例研究：如何在JavaScript中将数组加倍 (Technical phone interview case study: How to double an array in JavaScript)

Technical phone screens are a crucial step in the technical interview process. Often, whether or not you pass the technical phone screen will dictate whether you’ll be invited for an on-site interview.

技术电话屏幕是技术面试过程中的关键步骤。 通常，您是否通过技术电话屏幕将决定是否邀请您进行现场采访。

Technical phone screens can be tough because you must think out loud while working through a problem without having the benefit of being there in person with your interviewer. When you’re interviewing with someone over the phone or video, it can be difficult for your entire presence to come through. Usually, you’ll be working in a shared editor, so while you’re working through a problem, the interviewer will only be able to hear you and see what you’re typing. Many people find it more difficult to communicate in this way than in person.

技术电话屏幕很难显示，因为您在解决问题时必须大声思考，而又不能与面试官在一起。 当您通过电话或视频与某人进行采访时，可能很难使您的整个状态都得到体现。 通常，您将在共享编辑器中工作，因此在解决问题时，面试官只能听到您的声音并看到您输入的内容。 许多人发现以这种方式进行交流比面对面交流更加困难。

The good news is technical phone screens are something you can practice and get better at. Just like any skill, the more you do them, the better you’ll get. Eventually you will start to see results, as you’ll be invited to interview on-site with more and more companies.

好消息是技术电话屏幕是您可以练习并得到改进的东西。 就像任何技能一样，您做得越多，就会越好。 最终，随着您被邀请与越来越多的公司进行现场采访，您将开始看到结果。

Though all technical phone interviews are different, most will require you to think on your feet. So the best way to prepare is simply to practice working through questions. You can walk through them on your own by talking them out, and you can also practice with a friend. If you’re practicing on your own, you could even record yourself so you can listen back on the recording and see if how you explained your thought process made sense.

尽管所有的技术电话面试都不相同，但大多数都需要您认真考虑。 因此，最好的准备方法就是简单地练习解决问题。 您可以通过大声说出来来独自走动，也可以和朋友一起练习。 如果您自己练习，甚至可以录制自己，这样您就可以收听录制内容，看看您如何解释自己的思维过程是否有意义。

Finally, you can practice by interviewing with companies! When I was last interviewing for a new role, I started by finding companies that I was interested in, but wouldn’t be upset about if I didn’t pass the technical phone screen. This way, I still felt pressure to prepare, but I expected to fail a few times first. It was then less disappointing when I didn’t move on to the next stage.

最后，您可以通过面试公司来练习！ 当我最后一次面试新职位时，我首先找到了我感兴趣的公司，但是如果我不通过技术电话屏幕，也不会感到沮丧。 这样，我仍然感到准备工作的压力，但我希望首先失败几次。 然后，当我不进行下一阶段时，就没有那么令人失望了。

In this post, I will walk through a question I received in a technical phone screen to give you a framework for approaching these types of interviews. I hope this is helpful, and I welcome your comments and feedback!

在这篇文章中，我将逐步解答我在技术电话屏幕上收到的一个问题，为您提供进行此类采访的框架。 希望对您有所帮助，也欢迎您提出意见和反馈！

Let’s dive in.

让我们潜入。

问题 (The question)

This was an actual question that I received from an interviewer. I like this question, because there are several ways to solve it. The way you solve it reflects your programming style and helps the interviewer gauge whether or not you’d be a fit for the position.

这是我从面试官那里收到的一个实际问题。 我喜欢这个问题，因为有几种解决方法。 解决方案的方式反映了您的编程风格，并可以帮助面试官评估您是否适合该职位。

Here’s the sample interview question:

这是样本面试问题：

Given an array, write a function that doubles the array.Example: given [1,2,3,4,5], your function should return [1,2,3,4,5,1,2,3,4,5].You could call it like so: myArray.double().

回答问题 (Answering the question)

Here are my five steps for approaching a problem during a technical phone screen:

这是在技术电话屏幕中解决问题的五个步骤：

1. Clarify the question

1.澄清问题

2. Think of small test cases, including edge cases

2.考虑小的测试用例，包括边缘案例

3. Pseudo-code your solution (optional)

3.对您的解决方案进行伪编码(可选)

4. Translate your pseudo-code into actual code

4.将您的伪代码转换为实际代码

5. Test your solution using the test cases you came up with earlier

5.使用您先前提出的测试用例来测试您的解决方案

1.澄清问题 (1. Clarify the question)

The first thing you should do when given an interview question like this is ask clarifying questions.

当给像这样的面试问题时，您应该做的第一件事就是问清楚问题。

In this case, the question is relatively straightforward: I understand that I need to write a function that takes in an array and returns an array that has been manipulated. Understanding the input and ouput of a function results in what is often considered a function signature.

在这种情况下，问题相对简单：我理解我需要编写一个函数，该函数接受一个数组并返回一个已被操纵的数组。 了解函数的输入和输出会导致通常认为是函数签名 。

2.考虑小的测试用例，包括边缘案例 (2. Think of small test cases, including edge cases)

Next, you’ll want to think of some smaller examples, which will serve as your test cases later:

接下来，您需要考虑一些较小的示例，这些示例稍后将用作您的测试用例：

// What happens when the given array is empty?[] => []

// What happens when the given array has only 1 element?[1] => [1,1]

// What happens when the given array has only 2 elements?[1,2] => [1,2,1,2]

// What happens when the given array has N elements?[1...N] => [1,2,3,4,5...N,1,2,3,4,5...N]

Thinking about these cases before you start coding will help you look for and establish patterns for what you’re trying to solve. It’ll also help you think about space or time complexity, which may come as a follow up question later. This also helps make sure that you’ve sufficiently understood the question, as it gives your interviewer a chance to correct any misconceptions.

在开始编码之前考虑这些情况将有助于您寻找并建立要解决的问题的模式。 它还将帮助您考虑空间或时间的复杂性，稍后可能会提出后续问题。 这还有助于确保您已充分理解该问题，因为它使您的面试官有机会纠正任何误解。

3.对您的解决方案进行伪编码(可选) (3. Pseudo-code your solution (optional))

Now that you’ve clarified the problem and thought of a few sample test cases, it’s time to think through the actual solution. This is where pseudo-coding can come in handy. If you’re not familiar with pseudo-coding, it’s the idea of writing out what you want to do in plain language or simplified code syntax before writing out the working code. It’s a way to help you organize your thoughts before jumping right into the code.

既然您已经弄清了问题并想到了一些示例测试用例，那么该考虑一下实际的解决方案了。 这是伪编码可以派上用场的地方。 如果您不熟悉伪编码，那就是在编写工作代码之前先以简单语言或简化代码语法写出您想做的事情。 这是一种帮助您在跳入代码之前整理思路的方法。

Pseudo-coding can be incredibly effective in terms of helping you stay on track during your interview. I personally like to do it, because it helps me stay organized. If I ever get stuck, I can refer back to the steps I’ve written in pseudo-code to get back on track.

伪编码在帮助您在面试过程中保持正轨方面可能非常有效。 我个人喜欢这样做，因为它可以帮助我保持井井有条。 如果遇到困难，可以参考用伪代码编写的步骤，以恢复正常工作。

I once had a phone interview where I wrote the steps in pseudo-code before writing the actual code. The interviewer was able to help guide me by pointing to the step in my pseudo-code that I needed to take next. In this case, the interviewer also mentioned that he had never seen anyone do that before, and was incredibly impressed. So, pseudo-coding also has the benefit of showing your interviewer that you’re organized and impressing them with those skills!

我曾经接受过一次电话采访，在编写实际代码之前，我用伪代码编写了步骤。 面试官通过指向下一步需要执行的伪代码步骤，可以帮助指导我。 在这种情况下，面试官还提到他从未见过这样做的人，并且给人留下了深刻的印象。 因此，伪编码还具有向面试官显示您的组织能力并使他们印象深刻的优势！

So, going back to the question at hand, here is some pseudo-code you could write:

因此，回到前面的问题，这是您可以编写的一些伪代码：

// Define a function that takes in an array// Loop over the array// Push each element from the array back into the array// Return the array

4.将您的伪代码转换为实际代码 (4. Translate your pseudo-code into actual code)

Now that you’ve written pseudo-code, it’s time to do some coding. For this question, the first (incorrect) solution I came up with looked like this:

现在您已经编写了伪代码，是时候进行一些编码了。 对于这个问题，我想到的第一个(不正确的)解决方案是这样的：

var array = [1,2,3,4,5];

var double = function(array) {

for (var i = 0; i < array.length; i++) {    array.push(array[i]);  }

return array;

}

double(array);

Now, this seems pretty straightforward, right? However, there’s a small trick to this question that I only discovered by coding up my solution and trying to run it. That brings me to the final step!

现在，这看起来很简单，对吧？ 但是，这个问题有一个小技巧，我只有通过编写解决方案并尝试运行它才能发现。 那把我带到了最后一步！

5.使用您先前提出的测试用例测试您的解决方案 (5. Test your solution using the test cases you came up with earlier)

If you’re an experienced programmer, you might easily spot the bug in my solution above. But it wasn’t until I ran my code that I realized I had created a dreaded infinite loop!

如果您是一位经验丰富的程序员，则可以在上面的解决方案中轻松发现该错误。 但是直到我运行代码后，我才意识到自己已经创建了一个可怕的无限循环 ！

Why does this create an infinite loop? The array.length that I was using to know when my for loop would stop was dynamically increasing as I was pushing new elements into the array! So, when the for loop started, array.length was equal to 5. But after the first iteration of the for loop, array.length was equal to 6, and on and on ad infinitum.

为什么这会造成无限循环？ 当我将新元素推入数组时，我for知道for循环何时停止的array.length正在动态增加！ 因此，当for循环开始时， array.length等于5。但是在for循环的第一次迭代之后， array.length等于6，并且是无限的。

However, there is a simple change that will make this solution work:

但是，有一个简单的更改将使此解决方案起作用：

var array = [1,2,3,4,5];

var double = function(array) {

var length = array.length;

for (var i = 0; i < length; i++) {    array.push(array[i]);  }

return array;

}

double(array);=> [1,2,3,4,5,1,2,3,4,5]

RUNTIME: O(n) = linear

运行时间：O(n)=线性

With this change, I’m declaring a variable called length inside the scope of the function and then using that as the delimiter for my for loop. Even though my array size is now changing, the for loop still stops after the 5th iteration, because the length variable does not change when array.length changes.

进行此更改后，我在函数范围内声明了一个名为length的变量，然后将其用作我的for循环的定界符。 即使我的数组大小现在正在更改， for循环在第5次迭代后仍会停止，因为array.length更改时length变量不会更改。

Now I can test my code with the edge cases I came up with ealier and see that the results are as expected:

现在，我可以使用yeier提出的边缘情况测试代码，并观察结果是否如预期：

// Passing in an empty array yields an empty array correctly:[] => []

// Passing in an array with only 1 element yields the correct array with 2 elements:[1] => [1,1]

// Passing in an array with only 2 elements yields the correct array with 4 elements:[1,2] => [1,2,1,2]

// Passing in an array with 10 elements yields the correct array with 20 elements:[1,2,3,4,5,6,7,8,9,10] => [1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10]

替代解决方案 (Alternate solutions)

The above is one way to solve this question, but there are a couple of other alternatives as well. Remember when I introduced the question above with the suggestion of calling the function by writing something like myArray.double()? If you’re familiar with object oriented programming, you may recognize this syntax. In this case, the general idea is that you would actually add an array method called double using the prototype chain, that you would then be able to call.

上面是解决这个问题的一种方法，但是还有其他两种选择。 还记得我在上面的问题中提出了通过编写类似于myArray.double()的调用函数的建议吗？ 如果您熟悉面向对象的编程，则可以识别此语法。 在这种情况下，通常的想法是，您实际上将使用原型链添加一个称为double的数组方法，然后便可以调用该方法。

Here’s an example of how I could do that using the for loop structure from my original solution:

这是一个示例，说明如何使用原始解决方案中的for循环结构来做到这一点：

Array.prototype.double = function() {  var length = this.length;

for (var i = 0; i < length; i++) {    this.push(this[i]);  }

return this;}

var myArray = [1,2,3,4,5];

myArray.double();=> [1,2,3,4,5,1,2,3,4,5]

By defining the function using the JavaSacript prototype chain, I don’t actually have to pass anything into it because I have access to the array that the method is being called on with this. To learn more about the this keyword, read the MDN docs.

通过使用JavaSacript原型链定义函数，实际上我不需要传递任何内容，因为我可以访问使用this调用方法的数组。 要了解有关this关键字的更多信息，请阅读MDN docs 。

Now, these solutions are great, but what about answering this question without using a for loop? One way is to use the built in JavaScript method forEach. This is the same idea as a for loop, but instead of us telling the program how to execute our code (imperative programming) we’re going to tell it what the result is (declarative programming). You can read more about imperative vs. declarative programming here.

现在，这些解决方案很棒，但是不使用for循环来回答这个问题呢？ 一种方法是使用内置JavaScript方法forEach 。 这与for循环的想法相同，但与其告诉程序如何执行代码(命令式编程)，不如告诉我们结果是什么(声明式编程)。 您可以在此处阅读有关命令式与声明式编程的更多信息。

Here’s an example of the same solution using forEach:

这是使用forEach的相同解决方案的示例：

var array = [1,2,3,4,5];

var double = function(array) {

array.forEach(function(value) {    array.push(value);  });

return array;}

double(array);=> [1,2,3,4,5,1,2,3,4,5]

RUNTIME: O(n) = linear

运行时间：O(n)=线性

Finally, here’s another solution to this problem, which I found with a few quick Google searches.

最后，这是针对此问题的另一种解决方案，我通过一些快速的Google搜索发现了该解决方案。

There is also a built in array method called concat that you can use:

您还可以使用一个称为concat的内置数组方法：

var array = [1,2,3,4,5];

var double = function(array) {  var doubled = array.concat(array);

return doubled;}

double(array);=> [1,2,3,4,5,1,2,3,4,5]

RUNTIME: O(n) = linear

运行时间：O(n)=线性

NOTE: If you’re wondering about Google searching during your phone screen, here’s my take after participating in more than a dozen technical phone screens: usually it’s completely acceptable.

注意：如果您想在手机屏幕上进行Google搜索，以下是我参加十多个技术手机屏幕后的看法：通常完全可以接受。

Technical phone screens are often scheduled for 45 mins to 1 hour. Some of that time is reserved for the interviewer to ask questions about your experience, while some is also reserved for you to ask questions. The time you spend coding can be anywhere from 30–45 mins based on the company and interviewer.

技术电话屏幕通常安排为45分钟到1小时。 这段时间中有一些时间留给面试官问有关您的经历的问题，而另一些时间也留给您问问题。 根据公司和面试官的不同，您花费的编码时间可能在30-45分钟之间。

In many cases, your interviewer will be able to help you with quick tips and small hints if you have a general idea about how to do something but need to look up the specifics. For example, I once had an interviewer who knew the regex I needed off the top of their head to perform a specific function, so I didn’t need to spend time figuring it out. This allowed the interview to continue more seamlessly.

在许多情况下，如果您对如何做某事有一般的想法，但需要详细了解，您的面试官将能够通过快速提示和小提示为您提供帮助。 例如，我曾经有一个面试官，他知道我需要发挥正则表达式来执行特定功能，因此我不需要花时间来弄清楚它。 这样可以使面试更加无缝地进行。

However, I’ve also had experiences where an interviewer has asked me to refactor my original solution in a different way and explicitly said it was fine to look up documentation. This is usually the case, because many developers spend time daily reading or referencing docs. Being able to follow that same pattern in a technical phone interview is a good sign.

但是，我也有过采访者要求我以其他方式重构原始解决方案的经验，并明确表示查找文档是很好的。 通常是这种情况，因为许多开发人员每天都花时间阅读或引用文档。 能够在技术电话采访中遵循相同的模式是一个好兆头。

However, Googling for a solution during your interview can also be a time sink, especially if you’re not searching with just the right phrase (this is where the more you search, the better you will become).

但是，在面试过程中谷歌搜索解决方案也可能会浪费时间，尤其是如果您搜索的词不只是正确的词(在此词中搜索的次数越多，您就会变得越好)。

For this specific example, if I had already known about JavaScript’s concat method, it might have come to mind when I was confronted with this problem. Then, Googling to remind myself of how concat worked would have been acceptable.

对于这个特定的示例，如果我已经知道JavaScript的concat方法，那么当我遇到这个问题时可能会想到它。 然后，谷歌让自己想起concat是如何工作的，这是可以接受的。

But if I had instead spent time Googling how to double an array before even trying to think through the problem myself, this might have been a red flag for the interviewer. Technical phone screens are a good way for an interviewer to get a sense of how you think, and it really depends what they are looking for in terms of the position they’re hiring for.

但是，如果我什至在尝试自己思考问题之前花了很多时间在谷歌搜索方法上加倍数组，这对面试官来说可能是个危险信号。 技术电话屏幕是让面试官了解您的想法的好方法，它实际上取决于他们寻找的职位。

On the other hand, some companies will explicitly tell you that you’re not allowed to use Google for help, so in those cases, it’s best not to. Of course, if you’re unsure at all, ask your interviewer.

另一方面，某些公司会明确告诉您，不允许您使用Google寻求帮助，因此在这种情况下，最好不要这样做。 当然，如果您不确定，请询问您的面试官。

结论 (Conclusion)

Why am I showing you all of these examples? As you can see, there is not just one single way to approach this problem. There are several approaches you can take, and how you approach the problem all depends on a combination of what your background is and how you think about problem solving. For me, I often gravitate toward loops since for loops were one of the original programming concepts I learned. But someone who’s used concat before might think of that right off the bat.

为什么我向您展示所有这些示例？ 如您所见，不仅有解决该问题的单一方法。 您可以采取几种方法，而解决问题的方式都取决于您的背景和解决问题的方式。 对我来说，我经常偏向于循环，因为for循环是我学到的原始编程概念之一。 但是以前使用concat可能会立即想到这一点。

I thought this problem was a good example, because it seems relatively simple at first. However, there are ways to get tripped up (as you saw with my infinite loop above), and there are several solutions that demonstrate various levels of specific knowledge. Still, you could also solve this with a solid idea written in pseudo-code and some Googling.

我认为这个问题是一个很好的例子，因为起初看起来比较简单。 但是，有很多方法可以解决问题(如您在上面的无限循环中所看到的)，并且有几种解决方案可以展示各种级别的特定知识。 不过，您也可以使用伪代码和一些Googling编写的扎实思路来解决此问题。

Keep in mind that you won’t always pass technical phone interviews, but the more you do them, the better you will get. And, if you learned something from the interview, even if it was something small, it was probably worth your time.

请记住，您不会总是通过技术电话面试，但是您做的越多，就会越好。 而且，如果您从面试中学到了一些东西，即使它很小，那也值得您花时间。

最后一点 (One final tip)

Always remember to thank your interviewer via email preferably by the end of the same business day that you interviewed with them. Even if the company isn’t your top choice, someone took time out of their busy schedule to interview you, so it’s important to thank them. And, if you learned something new, a quick thank you email is a great way to reiterate that.

始终记得最好在与您面试的同一工作日结束之前通过电子邮件感谢您的面试官。 即使公司不是您的最佳选择，也要有人从忙碌的工作中抽出时间来采访您，因此感谢他们很重要。 而且，如果您学到了新东西，那么快速发送感谢邮件是重申这一点的好方法。

What has your experience been like with technical phone interviews? Do you love them? Do you hate them? What has been the most interesting problem that you’ve been asked to solve? Leave a comment below or let me know by emailing me at jane [at ] fullstackinterviewing [dot ] com.

您在技术电话采访中的经历如何？ 你爱他们吗？ 你讨厌他们吗？ 您被要求解决的最有趣的问题是什么？ 在下面发表评论，或通过发送电子邮件至jane [at] fullstackinterviewing [dot] com来通知我。

Did you like this article? Are you interested in landing your dream job in software development? Sign up for my mailing list.

你喜欢这篇文章吗？ 您是否有兴趣在软件开发方面找到理想的工作？ 注册我的邮件列表 。

翻译自: https://www.freecodecamp.org/news/technical-phone-interview-case-study-how-to-double-an-array-in-javascript-90a95aa98e3e/

javascript面试