Javascript前端经典的⾯试题及答案
前⾔
如果⾯试题按类型来分，主要涉及到“技术”与“⾮技术”两⼤类，技术类别下涉及到的⼦类别有：
1. 移动 & PC端布局类
2. JavaScript 核⼼基础类
3. 衍⽣框架类
4. 项⽬应⽤类
这四⼤类别的⾯试题若按出现频率来划分，则⾯试时 100% 会问到的题型有：“移动端&PC端布局类、JavaScript 核⼼基础类”。本次选择这两类中难度更⾼⼀些的 “JavaScript 核⼼基础类” ⾯试题，进⾏了分析和解答，供⾯试前准备。
特别说明：
假如你在⾯试时被这些题型卡住了，就必须正视⾃⼰的知识短板，并且要⼼悦城服的刻苦钻研、直⾄学
会为⽌！毕竟想要成为⼀个合格的 “WEB前端⼯程师”，掌握以下这些 JavaScript 核⼼的基础知识，才担得上“合格”这两个字，否则就是“冒牌”的哦~
⼀、JavaScript 的 typeof 返回哪些数据类型？
分析：
这道题检验的是 JS 基本功，只要对 typeof 运算符是了解的，就没有太⼤难度。具体在回答的时候，再结合理论知识和编码过程中实际情况进⾏回答即可。另外，考虑到⾯试时的严谨性， ES2015 中新增的类型也并⼊回复中。
建议回复：
⾸先，JavaScript 中⼀共有两⼤数据类型：
1. 基础类型
2. 引⽤类型
·  基础类型包括：Number、String、Boolean、Null、Undefined、Symbol（该类型位 ES2015 中新增类型）
·  引⽤类型包括：Object typeof 运算符把类型信息以字符串形式返回，需要注意的是 typeof 返回的类型和 JavaScript 定义的类型有细微的差异。 typeof 返回七种可能的值：“number”、“string”、“boolean”、“object”、"symbol"、
“function”和“undefined”。
⼆、请写出以下代码运算结果：
alert(typeof null);
alert(typeof undefined);
alert(typeof NaN);
alert(NaN == undefined);
alert(NaN == NaN);
var str = "123abc";
alert(typeof str++);
alert(str);
分析：
这道题与“题⽬⼀”是连环扣，当“题⽬⼀”回答完后，通过此题再⼀次强化运算符和数据类型的基本功。
建议回复：
本题主要是考察 typeof 判断值的类型，它们输出的结果依次是：
alert(typeof null); // object
alert(typeof undefined); // undefined
alert(typeof NaN); // number
alert(NaN == undefined); // false
alert(NaN == NaN); // false
var str = "123abc";
alert(typeof str++); // number
alert(str); // NaN
三、例举⾄少 3 种强制类型转换和 2 种隐式类型转换?
分析：
类型转换听起来可能有点宽泛，但这道题明确给出了回答的范围。
建议回复：
1. 强制类型转换：明确调⽤内置函数，强制把⼀种类型的值转换为另⼀种类型。强制类型转换主要有：Boolean、Number、String、parseInt、parseFloat
2. 隐式类型转换：在使⽤算术运算符时，运算符两边的数据类型可以是任意的，⽐如，⼀个字符串可以和数字相加。之所以不同的数据类型之间可以做运算，是因为 JavaScript 引擎在运算之前会悄悄的把他们进⾏了隐式类型转换。隐式类型转换主要有：+、–、==、!
四、JavaScript 的事件流模型都有什么？
建议回复：
事件流描述的是从页⾯中接收事件的顺序。 DOM 结构是树形结构，当页⾯中的某⼀个元素触发了某个⼀个事件，事件会从最顶层的 window 对象开始，向下传播到⽬标元素，途径的祖先节点都会触发对应的事件，如果当前节点的该事件绑定了事件处理函数的话，则会执⾏该函数当事件达到⽬标元素并执⾏绑定函数（如果有绑定的话）后，事件⼜会向上传播到 window 元素，途径的祖先节点都会触发对应的事件（如果绑定事件处理函数的话）
事件流包含三个阶段：
事件捕捉阶段
处于⽬标阶段
事件冒泡阶段
事件捕捉阶段：事件开始由顶层对象触发，然后逐级向下传播，直到⽬标的元素；
处于⽬标阶段：处在绑定事件的元素上；
事件冒泡阶段：事件由具体的元素先接收，然后逐级向上传播，直到不具体的元素；
五、BOM 对象有哪些，列举 window 对象？
建议回复：
1. window 对象，是 JS 的最顶层对象，其他的 BOM 对象都是 window 对象的属性；
2. document 对象，⽂档对象；
3. location 对象，浏览器当前URL信息；
4. navigator 对象，浏览器本⾝信息；
5. screen 对象，客户端屏幕信息；
6. history 对象，浏览器访问历史信息；
六、请简述 AJAX 及基本步骤？
分析：
对于这种纯概念题，建议⾯试前再写⼀遍原⽣ AJAX 函数的封装过程，⼀定要在理解的基础上去背，才会在⾯试时有良好发挥。
建议回复：
简述 AJAX：AJAX即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指⼀种创建交互式⽹页应⽤的⽹页开发技术。通过在后台与服务器进⾏少量数据交换，AJAX 可以使⽹页实现异步更新。这意味着可以在不重新加载整个⽹页的情况下，对⽹页的某部分进⾏更新。
AJAX 基本步骤：
1. 初始化ajax对象
2. 连接地址，准备数据
3. 发送请求
4. 接收数据（正在接收，尚未完成）
5. 接收数据完成
//初始化ajax对象
var xhr = xhr = new XMLHttpRequest();
//连接地址，准备数据
xhr.open(“⽅式”,”地址”，是否为异步);
数字前端工程师和web前端//接收数据完成触发的事件
//发送数据
xhr.send();
七、HTTP 状态消息 200 302 304 403 404 500 分别表⽰什么？
分析：
“带着理解去记忆” 是对付概念题最好的法宝，此外多看看延展的知识点，也是有益⽆害。
建议回复：
200：请求已成功，请求所希望的响应头或数据体将随此响应返回。
302：请求的资源临时从不同的 URI 响应请求。由于这样的重定向是临时的，客户端应当继续向原有地址发送以后的请求。只有在 Cache-Control 或 Expires 中进⾏了指定的情况下，这个响应才是可缓存的。
304：如果客户端发送了⼀个带条件的 GET 请求且该请求已被允许，⽽⽂档的内容（⾃上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个状态码。304 响应禁⽌包含消息体，因此始终以消息头后的第⼀个空⾏结尾。
403：服务器已经理解请求，但是拒绝执⾏它。
404：请求失败，请求所希望得到的资源未被在服务器上发现。
500：服务器遇到了⼀个未曾预料的状况，导致了它⽆法完成对请求的处理。⼀般来说，这个问题都会在服务器端的源代码出现错误时出现。
⼋、同步和异步的区别?
分析：
⼜是概念题。
建议回复：
⾸先同步异步于阻塞⾮阻塞并没有关系。同步异步主要是事情做完以后，如何进⾏处理、或者说关注的是⼀种消息通信机制。
同步的情况下，是由处理消息者⾃⼰去等待消息是否被触发；
⽽异步的情况下是由触发机制来通知处理消息者；
举例：⽐如在上课时，你问⽼师⼀个问题，这个问题可能需要花费⼀点时间去思考，这个时候⽼师可能：
思考，思考……，好了，有答案了；
这个问题需要⼀点时间，你先做点别的，等我想好了，去你。
第⼀种就是同步，第⼆种就是异步。所以同步异步可以说是对被请求⽅来说的，被请求者使⽤什么⽅式来告知处理结果。
阻塞⾮阻塞，主要是对于请求者⽽⾔的。
阻塞：发出请求等待结果返回，然后再处理后续的事情；
⾮阻塞：发出请求不等待结果返回，可以接着做后续的事情；
举例，还是上⼀个例⼦：
⽼师在使⽤同步思考的时候，你可以静静的等待⽼师给出答案，也可以边做⾃⼰的事情边等待⽼师的回答，当然这时候你需要时刻去关注⽼师是否已经想好了，在程序中需要进⾏轮询了。乀(¯ε¯乀)
⽼师使⽤异步的⽅式，这个时候⽼师告诉你可以先去做别的，好了就通知你，那么你可以去做点别的，然后监听事件就⾏，当然你也可以很轴，我就不做别的！我要⼀直等着⽼师“想好了”的事件发⽣。
所以同步可以是阻塞的也可以是⾮阻塞的，异步也是如此。
九、GET和POST的区别，何时使⽤POST？
分析：
像是数据交互类的概念题在⾯试时被问到的机率之多，也反应出它在⼯作中的实⽤价值。所以没别的，好好学吧，好好背！建议回复：
GET和POST的区别：
GET：⼀般⽤于查询数据，使⽤URL传递参数，由于浏览器对地址栏长度有限制，所以对使⽤get⽅式所发送信息的数量有限制，同时浏览器会记录（历史记录，缓存）中会保留请求地址的信息，包括地址后⾯的数据。get 只能发送普通格式（URL 编码格式）的数据。
POST：⼀般⽤于向服务器发送数据，对所发送的数据的⼤⼩理论上是没有限制，浏览器会缓存记录地址，但是不会记录 post 提交的数据。post 可以发送纯⽂本、URL编码格式、⼆进制格式的字符串，形式多样。
在以下情况中，请使⽤ POST 请求：
1. 以提交为⽬的的请求（类似语义化，get 表⽰请求，post 表⽰提交）；
2. 发送私密类数据（⽤户名、密码）（因为浏览器缓存记录特性）；
3. 向服务器发送⼤量数据（数据⼤⼩限制区别）；
4. 上传⽂件图⽚时（数据类型区别）；
⼗、 AJAX 的局限性?
建议回复：
1. AJAX 不⽀持浏览器 back 按钮。
2. 安全问题 AJAX 暴露了与服务器交互的细节。
3. 对搜索引擎的⽀持⽐较弱。不会执⾏你的 JS 脚本，只会操作你的⽹页源代码；
4. 跨域请求有⼀定限制。解决⽅式：jsonp；
⼗⼀、new 操作符具体⼲了什么呢?
分析：
原理概念题。
建议回复：
当使⽤ new 操作符调⽤构造函数，函数实际会经历如下步骤：
1. 创建⼀个新对象；
2. 把函数中上下⽂（作⽤域）对象this指向该对象；
3. 执⾏代码，通过this给新对象添加属性或⽅法；
4. 返回对象；
⼗⼆、null 和 undefined 的区别？
分析：
经典的概念题。
建议回复：
null： null表⽰空值，转为数值时为0；
undefined：undefined表⽰"缺少值"，就是此处应该有⼀个值，但是还没有定义。
1. 变量被声明了，但没有赋值时，就等于undefined。
2. 对象没有赋值的属性，该属性的值为undefined。
3. 函数没有返回值时，默认返回undefined。
⼗三、JavaScript 原型，原型链 ? 有什么特点？
建议回复：
JavaScript 原型：每创建⼀个函数，函数上都有⼀个属性为 prototype，它的值是⼀个对象。这个对象的作⽤在于当使⽤函数创建实例的时候，那么这些实例都会共享原型上的属性和⽅法。
原型链：在 JavaScript 中，每个对象都有⼀个指向它的原型（prototype）对象的内部链接（proto）。这个原型对象⼜有⾃⼰的原型，直到某个对象的原型为 null 为⽌（也就是不再有原型指向）。这种⼀级⼀级的链结构就称为原型链（prototype chain）。当查⼀个对象的属性时，JavaScript 会向上遍历原型链，直到到给定名称的属性为⽌；到查到达原型链的顶部（Object.prototype），仍然没有到指定的属性，就会返回 undefined。
⼗四、实现对数组进⾏乱序
分析：
这道题检验了数组的 sort() ⽅法，因为是乱序，所以还需要⽤到 Math.random() 产⽣随机数，打乱排序规律。
建议回复：
在写代码前，先把实现原理介绍⼀下，然后再开始写代码：
var a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var sign = 1;
a.sort(function(a, b) {
return Math.random() - 0.5
});
⼗五、实现⼀个函数 clone()，可以对 JavaScript 中的5种主要的数据类型（包括 Number、String、Object、Array、Boolean）进⾏值复制。
分析：
这道题考察了以下知识点：
1. 使⽤ typeof 判断值得类型；
2. 使⽤ toString 区分数组和对象；
3. 递归函数的使⽤；
建议回复：
function clone(obj) {
//判断是对象，就进⾏循环复制
if (typeof obj === 'object' && typeof obj !== 'null') {
// 区分是数组还是对象，创建空的数组或对象
var o = String.call(obj).slice(8, -1) === "Array" ? [] : {};
for (var k in obj) {
// 如果属性对应的值为对象，则递归复制
if(typeof obj === 'object' && typeof obj !== 'null'){
o[k] = clone(obj[k])
}else{
o[k] = obj[k];
}
}
}else{ //不为对象，直接把值返回
return obj;
}
return o;
}
总结
以上就是给⼤家总结关于Javascript前端⾯试题的全部内容了，后续看到再继续补充，希望本⽂的内容对⼤家的学习或者⼯作能带来⼀定的帮助，如果有疑问⼤家可以留⾔交流，请⼤家继续关注。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。