javascript面試

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

JavaScript是所有現(xiàn)代Web瀏覽器的官方語言。 因此，各種開發(fā)人員訪談中都會(huì)出現(xiàn)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.

本文不是關(guān)于最新JavaScript庫，常見的開發(fā)實(shí)踐或任何新的ES6函數(shù) 。 相反，在討論JavaScript時(shí)，通常在采訪中會(huì)涉及到三件事。 我自己也被問過這些問題，我的朋友們也告訴我他們也被問過這些問題。

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.

當(dāng)然，這些并不是您在JavaScript面試之前應(yīng)該學(xué)習(xí)的唯一三件事-有多種 方法 可以更好地為即將到來的面試做準(zhǔn)備-但是以下是面試官可能要問的三個(gè)問題，以判斷您對(duì)自己的了解和了解的程度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.

因此，讓我們開始吧！ 請(qǐng)注意，在下面的示例中，我們將使用原始JavaScript，因?yàn)槟脑L問員通常會(huì)希望在沒有jQuery之類的幫助的情況下，了解您對(duì)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.

在構(gòu)建應(yīng)用程序時(shí)，有時(shí)您需要將事件偵聽器附加到頁面上的按鈕，文本或圖像上，以便在用戶與元素進(jìn)行交互時(shí)執(zhí)行某些操作。

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:

如果我們以一個(gè)簡單的待辦事項(xiàng)列表為例，訪問者可能會(huì)告訴您，當(dāng)用戶單擊列表項(xiàng)之一時(shí)，他們希望采取某種措施。 他們希望您假設(shè)以下HTML代碼在JavaScript中實(shí)現(xiàn)此功能：

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

您可能需要執(zhí)行以下操作，將事件偵聽器附加到元素：

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.

盡管這在技術(shù)上是可行的，但問題是您將事件偵聽器分別附加到每個(gè)項(xiàng)目。 這對(duì)于4個(gè)元素來說很好，但是如果有人將10,000個(gè)項(xiàng)目(他們可能有很多事情要做)添加到他們的待辦事項(xiàng)列表中怎么辦？ 然后，您的函數(shù)將創(chuàng)建10,000個(gè)獨(dú)立的事件偵聽器，并將每個(gè)偵聽器都附加到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.

在采訪中，最好先問問采訪者，用戶可以輸入的最大元素?cái)?shù)是多少。 例如，如果它不能超過10，那么上面的代碼將可以正常工作。 但是，如果用戶可以輸入的項(xiàng)目數(shù)沒有限制，那么您想使用更有效的解決方案。

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.

如果您的應(yīng)用程序最終可能包含數(shù)百個(gè)事件偵聽器，則更有效的解決方案是將一個(gè)事件偵聽器實(shí)際附加到整個(gè)容器，然后在實(shí)際單擊每個(gè)項(xiàng)目時(shí)便能夠訪問它們。 這稱為事件委托 ，它比附加單獨(dú)的事件處理程序效率更高。

Here’s the code for event delegation:

這是事件委托的代碼：

問題2：在循環(huán)中使用閉包 (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.

有時(shí)會(huì)在面試中提出封閉方式，以便訪問員可以評(píng)估您對(duì)語言的熟悉程度以及是否知道何時(shí)實(shí)施封閉。

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:

閉包基本上是指內(nèi)部函數(shù)可以訪問其范圍之外的變量。 閉包可以用于實(shí)現(xiàn)隱私和創(chuàng)建功能工廠之類的事情。 有關(guān)使用閉包的常見采訪問題是這樣的：

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

編寫一個(gè)將遍歷整數(shù)列表并在3秒的延遲后打印每個(gè)元素的索引的函數(shù)。

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

我為這個(gè)問題所見的常見(錯(cuò)誤)實(shí)現(xiàn)看起來像這樣：

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.

如果運(yùn)行此命令，則會(huì)看到您實(shí)際上每次都打印了4個(gè) ，而不是在3秒鐘的延遲后輸出了預(yù)期的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.

要正確確定這種情況的發(fā)生原因，有必要了解JavaScript中這種情況發(fā)生的原因，這正是訪問員試圖測(cè)試的原因。

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.

其原因是因?yàn)閟etTimeout函數(shù)創(chuàng)建了一個(gè)可以訪問其外部作用域的函數(shù)(閉包)，該外部作用域是包含索引i的循環(huán)。 經(jīng)過3秒鐘后，該函數(shù)將執(zhí)行并打印出i的值，該值在循環(huán)結(jié)束時(shí)為4，因?yàn)樗?、1、2、3、4之間循環(huán)，最終循環(huán)在4處停止。

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

實(shí)際上， 有幾種方法可以正確編寫此問題的函數(shù)。 這是其中兩個(gè)：

問題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.

有些瀏覽器事件可以在很短的時(shí)間內(nèi)Swift觸發(fā)多次，例如調(diào)整窗口大小或向下滾動(dòng)頁面。 例如，如果將事件偵聽器附加到窗口滾動(dòng)事件，并且用戶連續(xù)快速向下滾動(dòng)頁面，則您的事件可能會(huì)在3秒的跨度內(nèi)觸發(fā)數(shù)千次。 這可能會(huì)導(dǎo)致一些嚴(yán)重的性能問題。

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:

如果您在面試中討論如何構(gòu)建應(yīng)用程序，并且出現(xiàn)諸如滾動(dòng)，窗口大小調(diào)整或按鍵之類的事件，請(qǐng)確保提及反跳和/或調(diào)節(jié)，以提高頁面速度和性能。 一個(gè)真實(shí)的例子來自于這個(gè)關(guān)于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網(wǎng)站上彈出一個(gè)問題：當(dāng)您向下滾動(dòng)Twitter feed時(shí)，它變得緩慢且無響應(yīng)。 John Resig發(fā)表了一篇關(guān)于該問題的博客文章，其中解釋了直接將昂貴的函數(shù)附加到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:

消除反跳是解決此問題的一種方法，方法是限制直到再次調(diào)用函數(shù)之前需要經(jīng)過的時(shí)間。 正確實(shí)現(xiàn)的去抖動(dòng)會(huì)因此組幾個(gè)函數(shù)調(diào)用成一個(gè)，并執(zhí)行它只有一次經(jīng)過一段時(shí)間之后。 這是純JavaScript的實(shí)現(xiàn)，該實(shí)現(xiàn)利用了諸如scope ，closures， this和Timing事件之類的主題 ：

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

該功能(圍繞事件)僅在經(jīng)過一定時(shí)間后才會(huì)執(zhí)行。

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.

節(jié)流是另一種類似于反跳的技術(shù)，除了節(jié)流只是將函數(shù)調(diào)用擴(kuò)展到更長的時(shí)間間隔之外，而不是在調(diào)用函數(shù)之前等待一段時(shí)間。 因此，如果一個(gè)事件在100毫秒內(nèi)發(fā)生10次，則節(jié)流可能會(huì)擴(kuò)展每個(gè)要每2秒執(zhí)行一次的函數(shù)調(diào)用，而不是在100毫秒內(nèi)觸發(fā)所有事件。

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

有關(guān)反跳和限制的更多信息，以下文章和教程可能會(huì)有所幫助：

• Throttling and Debouncing in JavaScript

  JavaScript中的節(jié)流和反跳

• The Difference Between Throttling and Debouncing

  節(jié)流與反跳的區(qū)別

• Examples of Throttling and Debouncing

  節(jié)流和反跳的示例

• Remy Sharp’s blog post on Throttling function calls

  雷米·夏普(Remy Sharp)關(guān)于節(jié)流功能調(diào)用的博客文章

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

翻譯自: https://www.freecodecamp.org/news/3-questions-to-watch-out-for-in-a-javascript-interview-725012834ccb/

javascript面試

總結(jié)

以上是生活随笔為你收集整理的javascript面试_在编码面试中需要注意的3个JavaScript问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。