50道JavaScript详解面试题，你需要了解一下

女爷i 2023-01-14 10:58 764阅读 0赞

![15d0d1a96e9572e52c3aa470e5cb0399.png][]

英文 | https://javascript.plainenglish.io/50-questions-to-master-the-javascript-coding-interview-639d2ac12630

翻译 | web前端开发公众号

## **1、以下哪个先打印？** ##

![3c48b9bd4177fa844b5fd210e3fd0b39.png][]

答案是第二种情况（打印出queueMicroTask更好），因为来自queueMicroTask的任务在调用栈为空之后且在调用事件循环之前被调用，对于setTimeout而言，任务是eventQeue的一部分。

## **2、控制台输出是什么？** ##

![f0119dce4d3141e5d69a9329a2a81ae4.png][]

答案是输出为10，因为将对象传递给函数时的对象相似，仅传递其值，而不传递对内存位置的实际引用。这就是为什么更改仅影响函数范围内的参数的原因。

## **3、控制台输出是什么？** ##

![f053c9f4e237b291dfde7eaf0d69dc54.png][]

在这种情况下，由于我们两次定义了相同的变量，因此，会在控制台上引发错误。

但是，如果我们使用var定义相同的变量，则控制台将返回50 。同样，在使用const定义变量时，我们将得到相同的错误。

## **4、Line1和Line2的控制台输出是什么？** ##

![318fa90e0069a3fe3c10f9d4331ab567.png][]

在Line1中，我们有两个相互比较的对象，并且它们都是唯一的，因此它将在控制台上记录为False。

在Line2中，我们使用===运算符来检查两个字符串基元而不是字符串对象，因此我们得到True。

## **5、控制台输出是什么，为什么？** ##

![85a54b9ae989c92bc43a0ab54a94b25e.png][]

与之前的问题类似，我们比较了两个唯一的对象。在这种情况下，只有一个唯一的对象，它具有两个常量x和y，它们指向内存中的唯一对象，并在控制台上返回True。

## **6、数组对象是JavaScript中的原始对象吗？** ##

在JavaScript中，我们处理的大多数事物都是对象，类似地，数组只是JavaScript中的特殊对象，它们具有其他对象所没有的属性。

## **7、以下函数的返回类型是什么？** ##

![33eb2da73d32962a4c36ac935f342962.png][]

答案，是B，因为异步函数在JavaScript中返回Promises 。

## **8、等待关键字会阻止应用程序中的所有JavaScript代码执行，直到返回等待的Promises？** ##

答案是False，await关键字仅阻止执行包含await关键字的特定函数内的代码。

## **9、以下打印什么？** ##

![4906183a0cf0f901838946fee9e318d5.png][]

JavaScript中的函数是对象，typeof name将输出function。

## **10、以下是用于打印“用户名”的****有效语法？** ##

![20ad97bef01348330de64cb502b8279d.png][]

以下语法是有效的，因为我们正在将异步函数的返回值传递给callback。

## **11、typeof和instanceof之间没有什么区别？** ##

typeof返回类型， instanceof返回布尔值。

instanceof需要TypeScript，而typeof则不需要。

typeof在右侧使用变量名称， instanceof在左侧和右侧使用值，而不是。

答案是B，因为它们都不要求TypeScript，并且两者都不是JavaScript固有的。

## **12、满足所有承诺后，以下哪个解决方案可以解决？** ##

![74f88eb7cf9de3fea027b0ee449a00f0.png][]

答案是C，当我们需要等待执行直到所有的都被解决时，Promise.all（）会非常有用。

**13、控制台输****出是什么，为什么？**

![c620e3bd28a0e73dd38a4d6cd4f72f93.png][]

在这种情况下，我们有＆运算符，它与＆＆运算符完全不同。＆是按位运算符，当我们比较11和3时，它将与1011和0011的二进制相同。结果，只有都为1的位保持为1，返回的输出为0011，它是3的二进制表示形式， 因此3记录在控制台上。

## **14、Object。\[\[Prototype\]\]的值是什么？** ##

*  Object  
    
 *  null
 *  \{\}

答案是null，因为默认值的对象。\[\[原型\]为空，它会返回undefined在控制台上。该对象位于原型链的顶部，当浏览器查找访问属性的值时，它将遍历原型链，直到找到该值或直到不再遍历所有原型为止。

## **15、空值合并运算符做什么？** ##

当左侧操作数为null或未定义时，它将返回右侧操作数。

## **16、getElementsByTagName是JavaScript函数吗？** ##

不，getElementsByTagName是一个Web API函数，就像普通的JS函数一样可用。

## **17、在JavaScript中使用事件委托时** ##

例如，当我们必须侦听页面加载期间可能不存在的事件时，可以使用事件委托，并在父元素上提供事件处理程序并查看event.target。但是，如今，现代的前端框架和库使此操作变得不必要了。

## **18、以下哪一项不是内置的JS错误类型？** ##

![ed6af3570132f5dfd63468abddef64fc.png][]

答案是E。

## **19、以下哪一项不是有效的Promise方法？** ##

![3d842e97ae33206987e62d452ac1c385.png][]

答案是A。

## **20、创建字符串后，我们可以修改它吗？** ##

不可以，因为字符串在JavaScript中是不可变的，指向字符串的变量可以分配给另一个字符串。

## **21、承诺链中的嵌套捕获可以捕获在承诺链中向上抛出的错误吗？** ##

不可以，嵌套是一种用于限制catch语句范围的控制结构。用简单的话来说，嵌套的catch仅捕获其作用域及其以下范围内的故障，而不捕获嵌套范围之外的链中较高的错误。

## **22、控制台输出是什么，为什么？** ##

![cb9305f35718e276193afb96fb19af18.png][]

即使mymap.get（\{\}）是有效的语法，它也会在控制台上返回undefined。因为set和get中的Object是内存中两个不同的空对象，因此getter不会返回值。

## **23、控制台输出是什么，为什么？** ##

![a383c25dd0c13b9c1b8f46c10cbe8724.png][]

控制台输出将为Map \{'a'=> 2，'b'=> 2，'c'=> 1\}，这意味着第二个映射中的所有相同键将覆盖第一个映射中的键。

## **24、括号符号可以像点符号一样链接吗？** ##

是的，可以，obj.prop1.prop2和obj \['prop1'\] \['prop2'\]是等效的。

## **25、for…in循环中会显示什么类型的属性？** ##

![759beb619f90a30a29666eb7e8e1092c.png][]

答案是B，可枚举属性。

## **26、以下内容是什么？** ##

![4222d6adc189767f1d38daa3b1e31a0f.png][]

控制台输出将为'Mohit'，因为内部函数有权访问在外部作用域中声明的变量。

## **27、函数引用自身进行递归的三种方式是什么？** ##

该函数的名称，一个指向该函数的范围内变量，并使用arguments.callee。

## **28、JavaScript是否支持重载？** ##

不，JavaScript本身不支持重载，但TypeScript可以。但是，可以在JavaScript中通过在未将所有可能的参数都传递给函数时返回不同的输出来执行重载。

## **29、return语句在数组的forEach循环中做什么？** ##

它不会返回任何内容，并且如果你需要从循环中返回值，则永远不要使用forEach循环。

## **30、RegExp没有任何属性。那是对的吗？** ##

不，RegExp具有许多属性，例如.flags和.global。

## **31、控制台输出是什么？** ##

![72326d381a403abf43a974b95e9369dc.png][]

控制台输出将为10和5，因为该函数在Promise中没有异步的内容，并且Promise同步解析。

## **32、在浏览器下一次重画显示内容之前，哪个函数会执行指定的代码块？** ##

![b09e2932b7be91bc7c623888e9d49ebf.png][]

requestAnimationFrame（）。

## **33、为什么在导入模块时使用别名？** ##

大多数时候，我们处理具有默认命名约定的简单导入，除此之外，有时我们不得不处理名称，因为有的名称较长。在这种情况下，使用别名是有帮助的。

## **34、使用缩减函数从数字数组中找到最小值。** ##

![aaedb2a8dda58d15aab7233dbd6dbd27.png][]

## **35、JavaScript中的子程序是什么？**    ##

子例程是主例程中遇到的函数，然后将其保存到对象并存储以供以后使用。例如，执行范围（变量，参数等）与子例程一起存储。

## **36、我们可以使用eventHandlers剪切和复制来防止用户将内容从浏览器复制到剪贴板吗？** ##

是的，这些事件处理程序是Web API的一部分。

## **37、创建新对象的三种可能方法是什么？** ##

new Object（）＆Object.create（）和文字符号，其中我们定义了像this-（const obj = \{a：2\}）这样的对象。

## **38、控制台输出是什么，为什么？** ##

![02e11ae8f92db7048da1be659c28f802.png][]

一个被分配到一个对象，b被分配给一个使用该扩展运算符，它意味着一个和b在技术上是相同的。

c只是一个空对象。

使用Object.assign（）中，c现在被指定到一个，并且后来在这之后，我们改变的值X在一个作为2。

控制台输出将为2,1,1。

## **39、Object.freeze（）的作用是什么？** ##

它防止添加新属性。

它可以防止更改对象的原型。

它防止更改属性的值。

它防止更改属性的可写性。

## **40、event.target与event.currentTarget有何不同？** ##

event.currentTarget随着事件起泡而变化，event.target保持不变。

## **41、Array sort（）方法的默认排序是什么？** ##

按字符值从最小到最大。

## **42、什么是比赛条件？** ##

当两个线程或异步进程必须完成自身操作以更新某些共享状态时，否则将出现错误或不良结果。

## **43、class关键字在JavaScript中有什么作用？** ##

使JavaScript更加面向对象只是语法上，即使使用class关键字，JavaScript仍会使用原型继承。

## **44、 queueMicrotask队列中的任务是在后进先出的基础上执行的。真的吗？** ##

否，任务按照先进先出的顺序执行。

## **45、什么是Shadow DOM API？** ##

阴影DOM API提供了一种隐藏的单独的DOM，附加到不是通过正常的访问元件JS DOM操作API。它提供Web组件的封装。

## **46、使用哪种方法将影子DOM树附加到指定的元素，并返回对其ShadowRoot的引用？** ##

Element.attachShadow（）。

## **47、控制台输出是什么，为什么？** ##

![1cd7f85dd4eef919335468496153f2bd.png][]

它返回h，因为数组在JavaScript中是从零开始的，因此arr \[2\] \[1\]将可以访问外部数组的第3个元素和内部数组的第2个元素，从而得出值“ h”。

## **48、window.localStorage和window.sessionStorage有什么区别？** ##

它们都将值对存储在Web浏览器中，但是sessionStorage在浏览器关闭后会删除存储的值。

## **49、！运算符返回一个布尔值。真的吗？** ##

是的，例如，在if语句中，需要在评估中返回一个布尔值，例如if（a！== b）。

## **50、JavaScript中的哪个ES6函数返回一个新数组？** ##

map（）和filter（）。

#  #

![8b89ab1bf0b09c05477c82f311a91d2d.png][]

[15d0d1a96e9572e52c3aa470e5cb0399.png]: /images/20221022/2a07ba6fc2af4796ad37a2db9616d40f.png
[3c48b9bd4177fa844b5fd210e3fd0b39.png]: /images/20221022/e4a9fe6f2737454bb2f9b46d9574b9cf.png
[f0119dce4d3141e5d69a9329a2a81ae4.png]: /images/20221022/cfbc587b5a434745b6c45fde28680928.png
[f053c9f4e237b291dfde7eaf0d69dc54.png]: /images/20221022/f5f5b8cad23a49d3b9417ff6c87a83ae.png
[318fa90e0069a3fe3c10f9d4331ab567.png]: /images/20221022/d3caebd8bd4a47dd95c12dcfce2685a9.png
[85a54b9ae989c92bc43a0ab54a94b25e.png]: /images/20221022/465566ae6b7f48b4ab255c9ff773288c.png
[33eb2da73d32962a4c36ac935f342962.png]: /images/20221022/a49f4b92d5e041009a31db7386a8fcea.png
[4906183a0cf0f901838946fee9e318d5.png]: /images/20221022/fdb3235e493a4c65913b3af19ed57e46.png
[20ad97bef01348330de64cb502b8279d.png]: /images/20221022/49b8a568e77143679ba8a54df965e20c.png
[74f88eb7cf9de3fea027b0ee449a00f0.png]: /images/20221022/1a4f1704b79245f6a14ee91e669eacd0.png
[c620e3bd28a0e73dd38a4d6cd4f72f93.png]: /images/20221022/7ee4e49eeb394c81b66e57a7fbb89462.png
[ed6af3570132f5dfd63468abddef64fc.png]: /images/20221022/b13d59cabea842d0a8087c00572db2a5.png
[3d842e97ae33206987e62d452ac1c385.png]: /images/20221022/3c5fcf0923ef4d2680f7db215e63d2b2.png
[cb9305f35718e276193afb96fb19af18.png]: /images/20221022/54525cc2c7294defb583d19498ebf693.png
[a383c25dd0c13b9c1b8f46c10cbe8724.png]: /images/20221022/f6be993834d34836bdd7ff2ccf562649.png
[759beb619f90a30a29666eb7e8e1092c.png]: /images/20221022/eba569ad188946d2bf5590407f71adc0.png
[4222d6adc189767f1d38daa3b1e31a0f.png]: /images/20221022/4c0768a68057446fa78fb3f2142a2b4e.png
[72326d381a403abf43a974b95e9369dc.png]: /images/20221022/1fab835dd36a4d268911af5c3616f5c8.png
[b09e2932b7be91bc7c623888e9d49ebf.png]: /images/20221022/a3de8c364f6a4943b997b65817f5b38c.png
[aaedb2a8dda58d15aab7233dbd6dbd27.png]: /images/20221022/7cc908100f0241938122ae3d7565a045.png
[02e11ae8f92db7048da1be659c28f802.png]: /images/20221022/5f4e599978374e6e9ce60a025b9aa3e4.png
[1cd7f85dd4eef919335468496153f2bd.png]: /images/20221022/3ecba6ba940241759b48252dffe6bbf8.png
[8b89ab1bf0b09c05477c82f311a91d2d.png]: /images/20221022/7cbe04f53454424da8a03cbc5858ab16.png