javascript知识点_您对JavaScript基础知识的了解程度如何？

javascript知识点

Technical interviews are notoriously stress-inducing, especially for people approaching their first software engineering/development job. While there’s currently some healthy debate surrounding the importance of the algorithm and data structures portion, it’s still vital to know the fundamentals.

众所周知，技术面试会引起压力，特别是对于那些刚开始从事软件工程/开发工作的人。 尽管目前围绕算法和数据结构部分的重要性存在一些健康的争论，但了解基础知识仍然至关重要。

Today I’ve compiled a short quiz to help you test your knowledge of important JavaScript concepts to know for tech interviews. If you need some refreshers before we begin, check out these helpful articles here and here. Try your best to answer these before checking them in the console!

今天，我整理了一个简短的测验，以帮助您测试对重要JavaScript概念的了解，以供技术采访使用。 如果您在开始之前需要一些复习，请在此处和此处查看这些有用的文章。 在控制台中检查它们之前，请尽力回答这些问题！

P.S. I’ve had the music from Hamilton stuck in my head for weeks, so you’ve been warned. 🙃

PS：汉密尔顿的音乐在我的脑海中停留了数周，所以已经警告过您。 🙃

Ready? Let’s go!

准备？ 我们走吧！

1.你怎么能把this的对象，这样下面的代码将不会返回undefined ？ (1. How can you attach this to the object so that the code below won’t return undefined?)

const Hamilton = {
    writesLikeHesRunningOutOfTime: true,
    frenemy: "Aaron Burr",    greeting() {
        console.log(`Pardon me, are you ${this.frenemy}, sir?`)
    }
}setTimeout(Hamilton.greeting, 1000)
// Pardon me, are you undefined, sir?

A) setTimeout(Hamilton.greeting.bind(Hamilton), 1000)

A) setTimeout(Hamilton.greeting.bind(Hamilton), 1000)

B) greeting() { console.log(`Pardon me, are you ${this.frenemy.bind}, sir?`) }

B) greeting() { console.log(`Pardon me, are you ${this.frenemy.bind}, sir?`) }

C) setTimeout(() => Hamilton.greeting(), 1000)

C) setTimeout(() => Hamilton.greeting(), 1000)

D) Both A and C

D)A和C

.

。

.

。

.

。

.

。

.

。

.

。

.

。

.

。

.

。

.

。

.

。

答案：D)A和C (Answer: D) Both A and C)

When using regular functions, the this context belongs to the object that invoked it. This can cause a problem if the function expects a different this context than the one that’s given to it. In this example, the Window becomes the this object. To fix the issue, you can use function binding in the form of .bind to specifically attach the Hamilton object to the greeting function, or you could use an arrow function within setTimeout.

使用常规函数时， this上下文属于调用它的对象。 如果函数需要不同的这可能会导致一个问题， this方面比给了它的一个。 在此示例中， Window成为this对象。 要解决此问题，可以使用.bind形式的函数绑定将Hamilton对象专门附加到greeting函数，或者可以在setTimeout使用箭头函数。

const Hamilton = {
    writesLikeHesRunningOutOfTime: true,
    frenemy: "Aaron Burr",    greeting() {
        console.log(`Pardon me, are you ${this.frenemy}, sir?`)
    }
}setTimeout(Hamilton.greeting.bind(Hamilton), 1000)
// OR // Pardon me, are you Aaron Burr, sir?

Great advice to give someone you’ve just met! 👍

给刚认识的人的好建议！ 👍

2.名称将以什么顺序出现？ (2. In which order will the names appear?)

function theLadies() {
    console.log("Eliza");
    setTimeout(function() {console.log("Peggy")}, 1000);
    setTimeout(function() {console.log("Angelica")}, 0);
    console.log("Theodosia");
}theLadies()

A) Eliza, Theodosia, Angelica, Peggy

A)伊丽莎，狄奥多西亚，当归，佩吉

B) Eliza, Angelica, Theodosia, Peggy

B)伊丽莎，当归，西奥多西，佩吉

C) Angelica, Eliza, Theodosia, Peggy

C)当归，伊丽莎，狄奥多西亚，佩吉

D) Eliza, Peggy, Angelica, Theodosia

D)伊丽莎，佩吉，当归，狄奥多西亚

.

。

.

。

.

。

.

。

.

。

.

。

.

。

.

。

.

。

.

。

.

。

答案：A)伊丽莎，狄奥多西亚，当归，佩吉 (Answer: A) Eliza, Theodosia, Angelica, Peggy)

When a function encounters setTimeout, the browser will put that callback function aside for later and start the timer provided in milliseconds (ex. 1,000) while the function execution continues. Once “Eliza” and “Theodosia” are console logged (since they have no barriers for execution), the setTimeout callback with the shortest delay (“Angelica”) will be pushed from the task queue to the call stack, followed by the last one (no surprise, it’s “Peggy”). Sorry, Peggy. 😬

当一个函数遇到setTimeout ，浏览器将把该回调函数放在一边以供以后使用，并在函数继续执行时以毫秒(例如1,000)为单位启动提供的计时器。 一旦控制台记录了“ Eliza”和“ Theodosia”(因为它们没有执行障碍)，则延迟最短的setTimeout回调(“ Angelica”)将从任务队列中推送到调用堆栈，然后是最后一个(毫不奇怪，它是“佩吉”)。 抱歉，佩吉。 😬

3.当我们调用whereItHappens函数时，什么会记录到控制台？ (3. What will log to the console when we call the whereItHappens function?)

function whereItHappens() {
    let h = "Alexander Hamilton"
    let m = "James Madison"
    let j = "Thomas Jefferson"
    const fact = `${h}, ${m} and ${j} are in the room where it happens.`    function room(){
        let b = "Aaron Burr"
        console.log(`${fact}`)
    }    console.log(`Maybe we should let ${b} in the room where it happens?`)
    return room()
}whereItHappens()

A) Alexander Hamilton, James Madison and Thomas Jefferson are in the room where it happens.

A)亚历山大·汉密尔顿，詹姆斯·麦迪逊和托马斯·杰斐逊都在发生这种情况的房间里。

B) Maybe we should let Aaron Burr in the room where it happens?

B)也许我们应该让亚伦·伯(Aaron Burr)进入发生这种情况的房间？

C) ReferenceError

C)ReferenceError

D) Undefined

D)未定义

.

。

.

。

.

。

.

。

.

。

.

。

.

。

.

。

.

。

.

。

.

。

答案：C)ReferenceError (Answer: C) ReferenceError)

The console will throw an Uncaught ReferenceError, citing that b is not defined. Since b is declared within the nested room function, it isn’t accessible outside to the larger whereItHappens function. The main function only has access to the h, m, j, and fact variables and the room function due to closure. In other words, Aaron Burr will never be allowed in the room where it happens!

控制台将引发未捕获的ReferenceError，并指出未定义b 。 由于b是在嵌套的room函数中声明的，因此无法在更大的whereItHappens函数外部访问。 由于关闭 ，主函数只能访问h ， m ， j和fact变量，而room函数也可以访问。 换句话说，亚伦·伯尔(Aaron Burr) 永远不会被允许进入发生这种情况的房间！

If we were to remove the last console.log line from the function, whereItHappens would return the string “Alexander Hamilton, James Madison and Thomas Jefferson are in the room where it happens.”

如果要从函数中删除最后一个console.log行，则whereItHappens将返回字符串“ Alexander Hamilton，James Madison和Thomas Jefferson在发生它的房间中。”

Sorry Burr, not this time. 🚫

对不起伯尔，这次不是。 🚫

4.以下语句将返回什么？ (4. What will the following statements return?)

{} === {}"talk less, smile more" == "Talk less, Smile more""and Peggy!" === " and Peggy!"2015 == "2015"(1786 - 1776) === 10

A) False, false, false, true, true

A)错误，错误，错误，正确，正确

B) True, false, false, true, true

B)正确，错误，错误，正确，正确

C) True, true, true, true, false

C)真实，真实，真实，真实，错误

D) False, true, false, false, true

D)错误，真实，错误，错误，真实

.

。

.

。

.

。

.

。

.

。

.

。

.

。

.

。

.

。

.

。

.

。

答案：A)错误，错误，错误，正确，正确 (Answer: A) False, false, false, true, true)

When you try to compare two different values using ===, you are asking if those two values are exactly the same in terms of value AND data type. (1786–1776) equates to 10 and they are both numbers, so they return true. The “and Peggy!” example has an extra space in the right string, so they return false. Note that objects {} are saved individually in memory, therefore, they can’t actually be the same, even if they’re both empty.

当您尝试使用===比较两个不同的值时，您在询问这两个值在值和数据类型方面是否完全相同 。 (1786–1776)等于10 ，它们都是数字，因此它们返回true。 “and Peggy!” 示例的右字符串中有多余的空格，因此它们返回false。 请注意，对象{}是分别保存在内存中的，因此，即使它们都是空的，它们实际上也不相同。

If you try to compare two values using ==, the validation is more loosely judged since the data type is not counted. The object values on both sides may also be coerced to match (for example, a string into a number), which is why 2015 == “2015” returns true. If we had written the same statement with ===, it would return false due to the difference in data type.

如果尝试使用==比较两个值，则由于不计算数据类型，因此对验证的判断更加宽松。 两侧的对象值也可能被强制匹配(例如，将字符串转换成数字)，这就是为什么2015 == “2015”返回true的原因。 如果我们用===编写了相同的语句，由于数据类型的不同，它将返回false。

5.单击表格上的Duel按钮会发生什么？ (5. What will happen when the Duel button is clicked on the form?)

<html>
  <body>
    <form method="POST" action="Aim-for-the-sky">
      <p>Do not throw away your shot!</p>
      <button type="submit" id="btn">Duel</button>
    </form>  <script>
    document.getElementById("btn").addEventListener("click", () =>     
    {
      fetch("Aim-for-the-opponent", {
          method: "POST"
      })
    })
  </script>
  </body>
</html>

A) Nothing

A)没事

B) Post to “Aim-for-the-sky”

B)发布到“天空瞄准”

C) Post to “Aim-for-the-opponent”

C)发布到“针对对手”

D) Both B and C

D)B和C

.

。

.

。

.

。

.

。

.

。

.

。

.

。

.

。

.

。

.

。

.

。

答案：D)B和C (Answer: D) Both B and C)

Because there is no e.preventDefault or e.stopPropagation written, the form will first make the POST request to “Aim-for-the-opponent” and then the event bubbling will continue upwards to the form. The form has a default action, “Aim-for-the-sky,” so due to the asynchronous nature of AJAX requests, the POST request to “Aim-for-the-opponent” won’t be able to complete before the bubbling commences upwards.

因为没有编写e.preventDefault或e.stopPropagation ，所以该表单将首先向“针对对手”发出POST请求，然后事件冒泡将继续向上到该表单。 该form具有默认操作“ Aim-for-the-sky”，因此，由于AJAX请求的异步性质，对“ Aim-for-the-opponent”的POST请求将无法在冒泡之前完成开始向上。

When the event hits the form default action, it will trigger the browser to submit a POST request immediately to that URL, canceling the first request and bringing the page to that form action URL. The final POST will be to “Aim-for-the-sky” as the event reaches the top (as Hamilton says, like a true “man of honor” would).

当事件达到form默认操作时，它将触发浏览器立即向该URL提交POST请求，取消第一个请求并将页面移至该form action URL。 最终的POST将是事件到达顶部时的“天空瞄准”(就像汉密尔顿说的那样，就像一个真正的“荣誉人物”一样)。

6.以下代码将返回什么？ (6. What will the following code return?)

formHarem()var quote = "if you really loved me you would share him."function formHarem() {
    console.log(`I'm just saying ${quote}`)
}

A) ReferenceError

A)ReferenceError

B) I’m just saying if you really loved me you would share him.

B)我只是说如果你真的爱我，你会和他分享。

C) I’m just saying undefined

C)我只是说不确定

D) Undefined

D)未定义

.

。

.

。

.

。

.

。

.

。

.

。

.

。

.

。

.

。

.

。

.

。

答案：C)我只是说不确定 (Answer: C) I’m just saying undefined)

There are two phases in JavaScript: compilation and execution. During the compilation phase, the code is read from the top down, and any global variables and function names are ‘hoisted’ up to memory (i.e. hoisting). This includes any variables declared using var. After compilation, during the execution phase, if a variable or function is referenced above where it’s actually written in the code, a reference error won’t be thrown because it already exists in memory. Since only the variable name is hoisted, and not the actual initialized value, we will see “I’m just saying undefined” logged in the console.

JavaScript有两个阶段：编译和执行。 在编译阶段，从上至下读取代码，并将所有全局变量和函数名称“提升”到内存(即提升 )。 这包括使用var声明的所有变量。 编译后，在执行阶段，如果在代码实际写入的位置上面引用了变量或函数，则不会引发引用错误，因为它已存在于内存中。 由于仅悬挂变量名称，而不悬挂实际的初始化值，因此我们将在控制台中看到“我只是说undefined ”。

That’s it for our short Hamilton-themed JavaScript quiz! You made it! 🙌

这就是我们简短的汉密尔顿主题JavaScript测验！ 你做到了！ 🙌

Leave a response and tell me how you did!

留下回应并告诉我您的情况！

翻译自: https://medium.com/@alison.quaglia/quiz-how-well-do-you-know-your-js-fundamentals-df813504ff53

javascript知识点