javascript面试_在编码面试中需要注意的3个JavaScript问题

javascript面试

JavaScript is the official language of all modern web browsers. As such, JavaScript questions come up in all sorts of developer interviews.

JavaScript是所有现代Web浏览器的官方语言。因此，各种开发人员访谈中都会出现JavaScript问题。

This article isn’t about the newest JavaScript libraries, common development practices, or any of the new ES6 functions. Rather, it’s about 3 things that usually come up in interviews when discussing JavaScript. I myself have been asked these questions, and my friends have told me they’ve been asked them, too.

本文不是关于最新JavaScript库，常见的开发实践或任何新的ES6函数。相反，在讨论JavaScript时，通常在采访中会涉及到三件事。我自己也被问过这些问题，我的朋友们也告诉我他们也被问过这些问题。

Of course these aren’t the only 3 things you should study before a JavaScript interview — there are a multitude of ways you can better prepare for an upcoming interview — but below are 3 questions an interviewer may ask to judge how well you know and understand the JavaScript language and the DOM.

当然，这些并不是您在JavaScript面试之前应该学习的唯一三件事-有多种方法可以更好地为即将到来的面试做准备-但是以下是面试官可能要问的三个问题，以判断您对自己的了解和了解的程度JavaScript语言和DOM 。

So let’s get started! Note that we’re going to use vanilla JavaScript in the examples below, since your interviewer will usually want to see how well you understand JavaScript and the DOM without the help of libraries like jQuery.

因此，让我们开始吧！请注意，在下面的示例中，我们将使用原始JavaScript，因为您的访问员通常会希望在没有jQuery之类的帮助的情况下，了解您对JavaScript和DOM的理解程度。

问题1：事件委托 (Question 1: Event delegation)

When building an application, sometimes you’ll need to attach event listeners to buttons, text, or images on the page in order to perform some action when the user interacts with the element.

在构建应用程序时，有时您需要将事件侦听器附加到页面上的按钮，文本或图像上，以便在用户与元素进行交互时执行某些操作。

If we take a simple todo list as an example, the interviewer may tell you that they want an action to occur when a user clicks one of the list items. And they want you to implement this functionality in JavaScript assuming the following HTML code:

如果我们以一个简单的待办事项列表为例，访问者可能会告诉您，当用户单击列表项之一时，他们希望采取某种措施。他们希望您假设以下HTML代码在JavaScript中实现此功能：

You may want to do something like the following to attach event listeners to the elements:

您可能需要执行以下操作，将事件侦听器附加到元素：

While this does technically work, the problem is that you’re attaching an event listener to every single item individually. This is fine for 4 elements, but what if someone adds 10,000 items (they may have a lot of things to do) to their todo list? Then your function will create 10,000 separate event listeners and attach each of them to the DOM. This isn’t very efficient.

尽管这在技术上是可行的，但问题是您将事件侦听器分别附加到每个项目。这对于4个元素来说很好，但是如果有人将10,000个项目(他们可能有很多事情要做)添加到他们的待办事项列表中怎么办？然后，您的函数将创建10,000个独立的事件侦听器，并将每个侦听器都附加到DOM。这不是很有效。

In an interview it would be best to first ask the interviewer what the maximum number of elements the user can enter is. If it can never be more than 10, for example, then the above code would work fine. But if there’s no limit to the number of items the user can enter, then you’d want to use a more efficient solution.

在采访中，最好先问问采访者，用户可以输入的最大元素数是多少。例如，如果它不能超过10，那么上面的代码将可以正常工作。但是，如果用户可以输入的项目数没有限制，那么您想使用更有效的解决方案。

If your application could end up with hundreds of event listeners, the more efficient solution would be to actually attach one event listener to the whole container, and then be able to access each item when it’s actually clicked. This is called event delegation, and it’s much more efficient than attaching separate event handlers.

如果您的应用程序最终可能包含数百个事件侦听器，则更有效的解决方案是将一个事件侦听器实际附加到整个容器，然后在实际单击每个项目时便能够访问它们。这称为事件委托，它比附加单独的事件处理程序效率更高。

Here’s the code for event delegation:

这是事件委托的代码：

问题2：在循环中使用闭包 (Question 2: Using a closure within a loop)

Closures are sometimes brought up in an interview so that the interviewer can gauge how familiar you are with the language, and whether you know when to implement a closure.

有时会在面试中提出封闭方式，以便访问员可以评估您对语言的熟悉程度以及是否知道何时实施封闭。

A closure is basically when an inner function has access to variables outside of its scope. Closures can be used for things like implementing privacy and creating function factories. A common interview question regarding the use of closures is something like this:

闭包基本上是指内部函数可以访问其范围之外的变量。闭包可以用于实现隐私和创建功能工厂之类的事情。有关使用闭包的常见采访问题是这样的：

Write a function that will loop through a list of integers and print the index of each element after a 3 second delay.

编写一个将遍历整数列表并在3秒的延迟后打印每个元素的索引的函数。

A common (incorrect) implementation I’ve seen for this problem looks something like this:

我为这个问题所见的常见(错误)实现看起来像这样：

If you run this you’ll see that you actually get the 4 printed out every time instead of the expected 0, 1, 2, 3 after a 3 second delay.

如果运行此命令，则会看到您实际上每次都打印了4个，而不是在3秒钟的延迟后输出了预期的0、1、2、3 。

To correctly identify why this is happening it would be useful to have an understanding of why this happens in JavaScript, which is exactly what the interviewer is trying to test.

要正确确定这种情况的发生原因，有必要了解JavaScript中这种情况发生的原因，这正是访问员试图测试的原因。

The reason for this is because the setTimeout function creates a function (the closure) that has access to its outer scope, which is the loop that contains the index i. After 3 seconds go by, the function is executed and it prints out the value of i, which at the end of the loop is at 4 because it cycles through 0, 1, 2, 3, 4 and the loop finally stops at 4.

其原因是因为setTimeout函数创建了一个可以访问其外部作用域的函数(闭包)，该外部作用域是包含索引i的循环。经过3秒钟后，该函数将执行并打印出i的值，该值在循环结束时为4，因为它在0、1、2、3、4之间循环，最终循环在4处停止。

There are actually a few ways of correctly writing the function for this problem. Here are two of them:

实际上，有几种方法可以正确编写此问题的函数。这是其中两个：

问题3：反跳 (Question 3: Debouncing)

There are some browser events that can fire many times within a short timespan very quickly, such as resizing a window or scrolling down a page. If you attach an event listener to the window scroll event for example, and the user continuously scrolls down the page very quickly, your event may fire thousands of times within the span of 3 seconds. This can cause some serious performance issues.

有些浏览器事件可以在很短的时间内Swift触发多次，例如调整窗口大小或向下滚动页面。例如，如果将事件侦听器附加到窗口滚动事件，并且用户连续快速向下滚动页面，则您的事件可能会在3秒的跨度内触发数千次。这可能会导致一些严重的性能问题。

If you’re discussing building an application in an interview, and events like scrolling, window resizing, or key pressing come up, make sure to mention debouncing and/or throttling as a way to improve page speed and performance. A real example taken from this guest post on css-tricks:

如果您在面试中讨论如何构建应用程序，并且出现诸如滚动，窗口大小调整或按键之类的事件，请确保提及反跳和/或调节，以提高页面速度和性能。一个真实的例子来自于这个关于css-tricks的来宾帖子：

In 2011, an issue popped up on the Twitter website: when you were scrolling down your Twitter feed, it became slow and unresponsive. John Resig published a blog post about the problem where it was explained how bad of an idea it is to directly attach expensive functions to the scroll event.
2011年，Twitter网站上弹出一个问题：当您向下滚动Twitter feed时，它变得缓慢且无响应。 John Resig发表了一篇关于该问题的博客文章，其中解释了直接将昂贵的函数附加到scroll事件的想法多么糟糕。

Debouncing is one way to solve this issue by limiting the time that needs to pass by until a function is called again. A correct implementation of debouncing would therefore group several function calls into one and execute it only once after some time has elapsed. Here’s an implementation in plain JavaScript that makes use of topics such as scope, closures, this, and timing events:

消除反跳是解决此问题的一种方法，方法是限制直到再次调用函数之前需要经过的时间。正确实现的去抖动会因此组几个函数调用成一个，并执行它只有一次经过一段时间之后。这是纯JavaScript的实现，该实现利用了诸如scope ，closures， this和Timing事件之类的主题：

This function — when wrapped around an event — will execute only after a certain amount of time has elapsed.

该功能(围绕事件)仅在经过一定时间后才会执行。

You would use this function like so:

您将像这样使用此功能：

Throttling is another technique that’s is similar to debouncing, except that instead of waiting for some time to pass by before calling a function, throttling just spreads the function calls across a longer time interval. So if an event occurs 10 times within 100 milliseconds, throttling could spread out each of the function calls to be executed once every 2 seconds instead of all firing within 100 milliseconds.

节流是另一种类似于反跳的技术，除了节流只是将函数调用扩展到更长的时间间隔之外，而不是在调用函数之前等待一段时间。因此，如果一个事件在100毫秒内发生10次，则节流可能会扩展每个要每2秒执行一次的函数调用，而不是在100毫秒内触发所有事件。

For more information on debouncing and throttling, the following articles and tutorials may be helpful:

有关反跳和限制的更多信息，以下文章和教程可能会有所帮助：

Throttling and Debouncing in JavaScript
JavaScript中的节流和反跳
The Difference Between Throttling and Debouncing
节流与反跳的区别
Examples of Throttling and Debouncing
节流和反跳的示例
Remy Sharp’s blog post on Throttling function calls
雷米·夏普(Remy Sharp)关于节流功能调用的博客文章

If you enjoyed reading this article, then you may like reading the JavaScript tutorials and solving some of the JavaScript coding challenges that I host on Coderbyte. I’d love to hear what you think!

如果您喜欢阅读本文，那么您可能喜欢阅读JavaScript教程并解决我在Coderbyte上托管的一些JavaScript编码难题。我很想听听您的想法！