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編碼難題。我很想聽聽您的想法！