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!
准备? 我们走吧!
![hamilton let’s go gif](https://i-blog.csdnimg.cn/blog_migrate/3aff40d8403e3818700227c0dba4c102.png)
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?
![Image for post](https://i-blog.csdnimg.cn/blog_migrate/a2d5e2e6b7b4f5048b0d43fc4f544917.png)
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”)将从任务队列中推送到调用堆栈,然后是最后一个(毫不奇怪,它是“佩吉”)。 抱歉,佩吉。 😬
![hamilton and peggy gif](https://i-blog.csdnimg.cn/blog_migrate/d829f84dc50b23def7973de71c7d6059.png)
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在发生它的房间中。”
![hamilton aaron burr dancing gif](https://i-blog.csdnimg.cn/blog_migrate/2c1f96b736fae4b57fe926dfa9ac2480.png)
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?)
![hamilton I’m not throwing away my shot gif](https://i-blog.csdnimg.cn/blog_migrate/d27b4fad4bc456206a008aabe7a6642b.png)
<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?)
![hamilton ladies gif](https://i-blog.csdnimg.cn/blog_migrate/2e2ba737b61d5c262003c22efbec1fa1.png)
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测验! 你做到了! 🙌
![hamilton king george happy dance gif](https://i-blog.csdnimg.cn/blog_migrate/6e251ed5f5abf25e61ede97476c9f20c.png)
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知识点