一周热文和最新 JS 进阶面试题 #4

向右看齐 2022-10-15 05:52 188阅读 0赞

▲** 点击下方“前端开发博客”**关注公众号

回复“面试”获取面试精选文章

忙碌的一周过去了，一起来汇总一下前端开发博客最近一周有哪些值得阅读的东西吧。

[**上周总结**][Link 1]

## 文章排行 ##

1.  [Vue3 + TypeScript 复盘总结][Vue3 _ TypeScript]
2.  [一篇由简到难的 Vue 面试题+详解答案][Vue]
3.  [一个算法面试题的5种不同解法][5]
4.  [53道常见NodeJS基础面试题（附答案）][53_NodeJS]
5.  [30道常见React基础面试题（附答案）][30_React]
6.  [面向后端的前端技术分享][Link 2]
7.  [近几年我在职场踩过的坑][Link 3]

## 最新试题 ##

###### 25. 输出是什么？ ######

const obj = { a: 'one', b: 'two', a: 'three' }
    console.log(obj)

*  A: `{ a: "one", b: "two" }`
 *  B: `{ b: "two", a: "three" }`
 *  C: `{ a: "three", b: "two" }`
 *  D: `SyntaxError`

#### 答案: C ####

如果你有两个名称相同的键，则键会被替换掉。它仍然位于第一个键出现的位置，但是值是最后出现那个键的值。

--------------------

###### 26. JavaScript 全局执行上下文为你做了两件事：全局对象和 this 关键字。 ######

*  A: 对
 *  B: 错
 *  C: 看情况

#### 答案: A ####

基本执行上下文是全局执行上下文：它是代码中随处可访问的内容。

--------------------

###### 27. 输出是什么？ ######

for (let i = 1; i < 5; i++) {
      if (i === 3) continue
      console.log(i)
    }

*  A: `1` `2`
 *  B: `1` `2` `3`
 *  C: `1` `2` `4`
 *  D: `1` `3` `4`

#### 答案: C ####

如果某个条件返回 `true`，则 `continue` 语句跳过本次迭代。

--------------------

###### 28. 输出是什么？ ######

String.prototype.giveLydiaPizza = () => {
      return 'Just give Lydia pizza already!'
    }
    
    const name = 'Lydia'
    
    name.giveLydiaPizza()

*  A: `"Just give Lydia pizza already!"`
 *  B: `TypeError: not a function`
 *  C: `SyntaxError`
 *  D: `undefined`

#### 答案: A ####

`String` 是内置的构造函数，我们可以向它添加属性。我只是在它的原型中添加了一个方法。基本类型字符串被自动转换为字符串对象，由字符串原型函数生成。因此，所有 string(string 对象)都可以访问该方法！

--------------------

###### 29. 输出是什么？ ######

const a = {}
    const b = { key: 'b' }
    const c = { key: 'c' }
    
    a[b] = 123
    a[c] = 456
    
    console.log(a[b])

*  A: `123`
 *  B: `456`
 *  C: `undefined`
 *  D: `ReferenceError`

#### 答案: B ####

对象的键被自动转换为字符串。我们试图将一个对象 `b` 设置为对象 `a` 的键，且相应的值为 `123`。

然而，当字符串化一个对象时，它会变成 `"[object Object]"`。因此这里说的是，`a["[object Object]"] = 123`。然后，我们再一次做了同样的事情，`c` 是另外一个对象，这里也有隐式字符串化，于是，`a["[object Object]"] = 456`。

然后，我们打印 `a[b]`，也就是 `a["[object Object]"]`。之前刚设置为 `456`，因此返回的是 `456`。

--------------------

###### 30. 输出是什么？ ######

const foo = () => console.log('First')
    const bar = () => setTimeout(() => console.log('Second'))
    const baz = () => console.log('Third')
    
    bar()
    foo()
    baz()

*  A: `First` `Second` `Third`
 *  B: `First` `Third` `Second`
 *  C: `Second` `First` `Third`
 *  D: `Second` `Third` `First`

#### 答案: B ####

我们有一个 `setTimeout` 函数，并首先调用它。然而，它是最后打印日志的。

这是因为在浏览器中，我们不仅有运行时引擎，还有一个叫做 `WebAPI` 的东西。`WebAPI` 提供了 `setTimeout` 函数，也包含其他的，例如 DOM。

将 *callback* 推送到 WebAPI 后，`setTimeout` 函数本身(但不是回调！)将从栈中弹出。

![fcb19daa59c91641c835fd099a1d4ec3.png][]

现在，`foo` 被调用，打印 `"First"`。

![a99301e2762937f0a90fcb4f7bc5c4bc.png][]

```foo` 从栈中弹出，`baz` 被调用. 打印 `"Third"`。

![0559fcf0cf208efbb439cf715ac6cbd5.png][]

WebAPI 不能随时向栈内添加内容。相反，它将回调函数推到名为 *queue* 的地方。

![22304ab65bfadd4fc9597221807f5fb0.png][]

这就是事件循环开始工作的地方。一个事件循环查看栈和任务队列。如果栈是空的，它接受队列上的第一个元素并将其推入栈。

![3e499b4daf7329cc6524443ee636efda.png][]

`bar` 被调用，打印 `"Second"`，然后它被栈弹出。

--------------------

好了，以上就是本周的汇总，以后我们每周会汇总一次，相信你会从中找到你喜欢的内容，最后，记得点个在看，转发文章，关注一下我哦。

**有用的话，点个“在看”，支持我们↓↓↓**

[Link 1]: http://mp.weixin.qq.com/s?__biz=MzAxODE4MTEzMA%3D%3D&chksm=83dbb892b4ac3184136f8e4bd9cfdc59a012fa9295992e16a5eaf9856cbdf29ae7d791f48de9&idx=2&mid=2650088951&scene=21&sn=54a4e30dc204bab6f24050174af79ced#wechat_redirect
[Vue3 _ TypeScript]: http://mp.weixin.qq.com/s?__biz=MzAxODE4MTEzMA%3D%3D&chksm=83dbb892b4ac31849b71fefb4799a52446d0ff974d7359d4faa52c40ebc6e58e51c51bc383c1&idx=1&mid=2650088951&scene=21&sn=13c416f07e6bd386bef4d5cadcd5e9eb#wechat_redirect
[Vue]: http://mp.weixin.qq.com/s?__biz=MzAxODE4MTEzMA%3D%3D&chksm=83dbbb15b4ac32030d568e5bf467a58efd0b43ee64ad0c43874e741a20aa92401414f58feeff&idx=1&mid=2650089072&scene=21&sn=607f3f05f58b26090fa398af8a43f99e#wechat_redirect
[5]: http://mp.weixin.qq.com/s?__biz=MzAxODE4MTEzMA%3D%3D&chksm=83dbbb72b4ac3264594533267c48f49dbaade63edf18817e6477d0b50c8fe7a6020ab8def73a&idx=1&mid=2650088983&scene=21&sn=f7ebf17c286ea4941e8ae3212731389b#wechat_redirect
[53_NodeJS]: http://mp.weixin.qq.com/s?__biz=MzAxODE4MTEzMA%3D%3D&chksm=83dbba65b4ac33736c00b22e575d045f1fd4fa17e6443fa01b8a9f5e9f4568b8cdee55fd8dac&idx=2&mid=2650089216&scene=21&sn=4c06d8bb79afc0f7cb8769d046c1ff75#wechat_redirect
[30_React]: http://mp.weixin.qq.com/s?__biz=MzAxODE4MTEzMA%3D%3D&chksm=83dbba43b4ac335513e251b6b7c7fa810ba3b3473401df07f952b9b500ac0e4b3bfe6c9b534d&idx=1&mid=2650089254&scene=21&sn=5dafeede578c416b373af8eda0c1e16e#wechat_redirect
[Link 2]: http://mp.weixin.qq.com/s?__biz=MzAxODE4MTEzMA%3D%3D&chksm=83dbbb15b4ac32030f91fd95bf93c488eaded09622148099b97e08682c28745d2f1d54ec1bb3&idx=2&mid=2650089072&scene=21&sn=e33e638b3090666dd98776b4b2b66ac4#wechat_redirect
[Link 3]: http://mp.weixin.qq.com/s?__biz=MzAxODE4MTEzMA%3D%3D&chksm=83dbbbf2b4ac32e4184bd53cef8e93e0ff3cc254cfda56798ef65382def1cf8f695368112f1f&idx=2&mid=2650089111&scene=21&sn=1c9afbc941e364012fc403fc920cfa85#wechat_redirect
[fcb19daa59c91641c835fd099a1d4ec3.png]: /images/20221014/2cc27481465f47acaab50997be8e824c.png
[a99301e2762937f0a90fcb4f7bc5c4bc.png]: /images/20221014/73cd014612724d818509fd480a5fc596.png
[0559fcf0cf208efbb439cf715ac6cbd5.png]: /images/20221014/4b6ea637f78d4dbe83558cae4e59f102.png
[22304ab65bfadd4fc9597221807f5fb0.png]: /images/20221014/89036c85905240b8beb0192af948a25f.png
[3e499b4daf7329cc6524443ee636efda.png]: /images/20221014/a635f913cf1349ecac4ff90dd016a4ee.png