最近在网上看到一些关于Javascript的面试问题，整理了一下。希望能对有需要的朋友或者自己有所帮助。以后看到之后我会继续补充。我们来看看这篇关于Javascript前端常见面试问题的文章。让我们一起学习。

前言

如果把面试问题按类型分类，主要涉及“技术性”和“非技术性”两大类。技术类别下涉及的子类别有：

PC端布局类

核心JavaScript基本类

派生框架类

应用程序类别

如果把这四类面试问题按照出现的频率来划分的话，面试时100%会被问到的问题是：“移动PC布局类，JavaScript核心基础类”。这次选择难度较大的《JavaScript核心基础课》面试问题，进行分析和回答，为面试前的准备。

特别说明：

如果面试的时候被这些问题卡住了，一定要正视自己的不足，好好学习，直到学会为止！毕竟，要想成为一名合格的“WEB前端工程师”，你得掌握以下JavaScript核心基础知识才能合格，否则你就是个“冒牌货”

一、JavaScript 的 typeof 返回哪些数据类型？

分析：

这个问题很考验JS的基本功。只要你知道运算符的类型，这并不太难。在具体回答中，结合理论知识和编码过程中的实际情况进行回答。此外，考虑到面试的严谨性，ES2015中的新类型也被纳入到了回复中。

建议回复：

首先，JavaScript中有两种数据类型：

基型

参考类型

基本类型包括：数字、字符串、布尔、空、未定义和符号(此类型是ES2015中的新类型)

引用类型包括：Object typeof运算符以字符串的形式返回类型信息。需要注意的是，typeof返回的类型与JavaScript定义的类型略有不同。Typeof返回七个可能的值：数字、字符串、布尔值、对象、符号、函数和未定义。

二、请写出以下代码运算结果：

警报(null类型)；

警报(未定义的类型)；

警报(NaN类型)；

alert(NaN==未定义)；

alert(NaN==NaN)；

var str=' 123abc

警报(字符串类型)；

alert(str)；

分析：

这个问题与“问题1”联系在一起。在“问题1”的回答之后，将通过这个问题再次强化运算符和数据类型的基本功。

建议回复：

本主题主要考察typeof的判断值类型，其输出结果如下：

警报(null类型)；//对象

警报(未定义的类型)；//未定义

警报(NaN类型)；//数字

alert(NaN==未定义)；//假

alert(NaN==NaN)；//假

var str=' 123abc

警报(字符串类型)；//数字

alert(str)；//楠

三、例举至少 3 种强制类型转换和 2 种隐式类型转换？

分析：

类型转换听起来可能有点宽泛，但是这个问题明确给出了答案的范围。

建议回复：

1.强制类型转换：显式调用内置函数，强制将一种类型的值转换为另一种类型。类型转换主要包括：Boolean、Number、String、parseInt、parseFloat。

2.隐式类型转换：使用算术运算符时，运算符两边的数据类型可以是任意的。例如，字符串可以添加数字。之所以可以操作不同的数据类型，是因为JavaScript引擎在操作之前会悄悄对它们进行隐式的类型转换。隐式类型转换主要包括：-，==，

四、JavaScript 的事件流模型都有什么？

建议回复：

事件描述从页面接收事件的顺序。DOM是一种树形结构。当一个事件被页面中的一个元素触发时，该事件将从顶层的窗口对象开始，向下传播到目标元素。路径的祖先节点将触发相应的事件。如果当前节点的事件与事件处理函数绑定，将执行该函数。当事件到达目标元素并且执行绑定函数(如果有的话)时，事件将向上传播到窗口元素，并且路径的祖先节点将触发相应的事件(如果

事件流包含三个阶段：

事件捕获阶段

处于目标阶段

事件冒泡阶段

事件捕获阶段：事件从顶层对象开始触发，然后一步步向下扩散，直到目标元素；

在目标阶段：在绑定事件的元素上；

事件冒泡阶段：事件先被特定元素接收，然后向上扩散到非特定元素；

五、BOM 对象有哪些，列举 window 对象？

建议回复：

Window对象是JS的顶层对象，其他BOM对象是window对象的属性；

文档对象，文档对象；

Location对象，浏览器的当前URL信息；

Navigator对象，浏览器本身的信息；

屏幕对象，客户端屏幕信息；

历史对象，浏览器访问历史信息；

六、请简述 AJAX 及基本步骤？

分析：

对于这种纯概念的题，建议在面试前把原生AJAX函数的封装过程再写一遍，在理解的基础上背下来，这样才能在面试中发挥好。

建议回复：

简介：Ajax，即“异步Javascript和XML”(Asynchronous Javascript And XML)，指的是一种用于创建交互式web应用的web开发技术。AJAX可以通过在后台与服务器交换一点数据，使网页异步更新。这意味着您可以更新网页的某些部分，而无需重新加载整个网页。

AJAX 基本步骤：

初始化ajax对象

地址，准备数据

即时战略游戏

接收数据(正在接收，尚未完成)

接收数据完成

//初始化ajax对象

var xhr=xhr=new XMLHttpRequest()；

//连接地址，准备数据。

Xhr.open ("mode "，" address "，是否异步)；

//接收数据完成事件

xhr.onload=function(){}

//发送数据

xhr . send()；

七、HTTP 状态消息 200 302 304 403 404 500 分别表示什么？

分析：

“带着理解去记忆”是处理概念性问题的最佳法宝。另外，看看延伸的知识点也是有益无害的。

建议回复：

20:请求已成功，请求所期望的响应头或数据体将随此响应返回。

02:请求的资源临时响应来自不同URI的请求。由于这种重定向是暂时的，客户端应该继续向原始地址发送未来的请求。只有在Cache-Control中指定或过期时，此响应才是可缓存的。

34:如果客户端发送一个有条件的GET请求，并且该请求已经被允许，但是文档的内容(自上次访问以来或者根据请求的条件)没有改变，服务器应该返回这个状态码。04响应禁止包含消息体，所以它总是以消息头后的第一个空行结束。

43:服务器理解了请求，但拒绝执行。

44:请求失败，在服务器上找不到请求所需的资源。

50:服务器遇到意外情况，导致无法完成请求处理。一般来说，当服务器端的源代码出现错误时，就会出现这个问题。

八、同步和异步的区别？

分析：

又是一个概念问题。

建议回复：

首先，同步是异步到阻塞和非阻塞并不重要。异步主要讲的是事情做好之后怎么处理，或者说是一种消息通信机制。

在同步的情况下，由消息处理程序来等待消息被触发。

在异步情况下，触发机制通知消息处理程序。

举例：比如在课堂上，你问老师一个问题，可能要花一些时间思考。这时，老师可能会：

思考，思考.好的，有答案；

这个问题需要一点时间。你先干点别的，我想好了再来找你。

第一个是同步，第二个是异步。那么同步和异步可以说是针对被请求方的，被请求方用什么方式告知处理结果呢？

堵不堵，主要针对请求者。

阻塞：提出请求等待结果返回，再处理后续的事情；

非阻塞：不等待结果返回就发出请求，然后做后续的事情；

例如，它仍然是最后一个例子：

当老师使用同步思维的时候，你可以安静的等待老师的回答，也可以在等待老师回答的时候做自己的事情。当然，这个时候你需要时刻关注老师有没有想好，需要在节目中进行民调。ˉ ˉ ˉ ˉ ˉ ˉ ˉ ˉ ˉ ˉ ˉ

老师使用异步方法。这时候老师告诉你可以先做别的，准备好了会通知你。然后你可以做别的事情，然后只是监视事件。当然你也可以很主动，其他的我就不做了！一直要等老师“想好了”。

因此同步可以被阻塞或非阻塞，异步也是如此。

九、GET和POST的区别，何时使用POST？

分析：

像数据交互这样的概念问题在面试中经常被问到，这也体现了它在工作中的实用价值。所以没别的，好好学习，好好背诵！

建议回复：

GET和POST的区别：

Get:一般用来查询数据，URL用来传递参数。由于浏览器对地址栏的长度有限制，所以GET发送的信息量也有限制。同时浏览器会记录(历史，缓存)所请求地址的信息，包括地址背后的数据。Get只能发送普通格式(URL编码格式)的数据。

Post:一般用于向服务器发送数据。理论上对发送数据的大小没有限制。浏览器会缓存记录的地址，但不会记录POST提交的数据。Post可以以各种形式发送纯文本、URL编码格式和二进制格式的字符串。

请在以下情况下使用发布请求：

以提交为目的的请求(类似语义，get表示请求，post表示提交)；

发送私有类数据(用户名，密码)(因为浏览器的缓存记录特性)；

向服务器发送大量数据(数据大小限制差异)；

上传文件图片时(数据类型不同)；

十、 AJAX 的局限性？

建议回复：

AJAX不支持浏览器后退按钮。

AJAX是一个安全问题，暴露了与服务器交互的细节。

对搜索引擎的支持很弱。不会执行你的JS脚本，只操作你的网页源代码；

跨域请求有一定的限制。解决方案：jsonp；

十一、new 操作符具体干了什么呢？

分析：

概念问题。

建议回复：

当使用new运算符调用构造函数时，该函数实际上会经历以下步骤：

创建一个新对象；

将函数中的上下文(作用域)对象this指向此对象；

执行代码以通过此向新对象添加属性或方法；

返回一个对象；

十二、null 和 undefined 的区别？

分析：

一个经典的概念问题。

建议回复：

Null: null表示空值，换算成数值就是0；

Undefined:undefined的意思是‘缺少值’，也就是这里应该有值，但是没有定义。

当一个变量被声明但没有被赋值时，它就是未定义的。

该对象没有分配的属性，并且该属性的值未定义。

当函数没有返回值时，默认情况下返回undefined。

十三、JavaScript 原型，原型链 ? 有什么特点？

建议回复：

JavaScript prototype:每次创建一个函数，函数上都有一个叫做prototype的属性，它的值是一个对象。这个对象的目的是当使用函数创建实例时，这些实例将共享原型上的属性和方法。

原型链：在JavaScript中，每个对象都有一个到其原型对象的内部链接(proto)。这个原型对象又有了自己的原型，直到一个对象的原型为空(也就是不再有原型指向)。这种逐级链式结构称为原型链。在寻找对象的属性时，JavaScript会向上遍历原型链，直到找到给定名称的属性；当搜索到达原型链的顶端(Object.prototype)时，仍然没有找到指定的属性，将返回undefined。

十四、实现对数组进行乱序

分析：

这个问题考察的是数组的sort()方法。因为是无序的，所以还需要使用Math.random()生成随机数，打乱排序规则。

建议回复：

写代码之前，先介绍一下实现原理，然后开始写代码：

var a=[1，2，3，4，5，6，7，8，9，10]；

var符号=1；

排序(函数(a，b) {

返回Math.random() - 0.5

});

十五、实现一个函数 clone()，可以对 JavaScript 中的5种主要的数据类型（包括 Number、String、Object、Array、Boolean）进行值复制。

分析：

这道题考察了以下几个知识点：

使用typeof确定值的类型；

使用toString区分数组和对象；

递归函数的使用；

回复：

函数克隆(对象){

//如果判断为对象，则循环复制。

if(type of obj===' object ' type of obj！=='null') {

//区分数组和对象，并创建一个空数组或对象

var o=object . prototype . tostring . call(obj)。slice(8，-1)==='Array '？[] : {};

for(对象中的变量k){

//如果属性的对应值是对象，则递归复制。

if(type of obj===' object ' type of obj！=='null'){

o[k]=克隆(对象[k])

}否则{

o[k]=obj[k]；

}

}

}else{ //不是对象，返回值即可。

返回obj

}

返回o；

}

总结

以上就是为你总结了Javascript前端面试问题的全部内容。希望这篇文章的内容能给你的学习或者工作带来一些帮助。有问题可以留言交流。请继续关注我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。