2017年第一波JavaScript前端面试题

时间  2019-12-05
标签 2017年 第一 javascript 端面 试题 栏目 JavaScript 繁體版
原文   原文链接

面试题按类型来分，主要涉及到“技术”与“非技术”两大类，今天咱们主要讨论的是“技术类”，在这个大类别下涉及到的子类别有：前端

  • 移动 & PC端布局类
  • JavaScript 核心基础类
  • 衍生框架类
  • 项目应用类

这四大类别的面试题若按出现频率来划分，则面试时 100% 会问到的题型有：“移动端&PC端布局类、JavaScript 核心基础类”。本次咱们选择了这两类中难度更高一些的 “JavaScript 核心基础类” 面试题，给你们进行了分析和解答，供你们面试前准备。面试

特别说明：

假如你在面试时被这些题型卡住了，就必须正视本身的知识短板，而且要心悦城服的刻苦钻研、直至学会为止！毕竟想要成为一个合格的 “WEB前端工程师”，掌握如下这些 JavaScript 核心的基础知识，才担得上“合格”这两个字，不然就是“冒牌”的哦~ajax

言归正传，咱们来看看妙味 JS 讲师们为你们整理的十五道 JavaScript 核心基础类面试题：json

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

分析：

这道题检验的是 JS 基本功，在妙味课堂 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”。

2、请写出如下运算结果：

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、例举至少 3 种强制类型转换和 2 种隐式类型转换?

分析：

类型转换听起来可能有点宽泛，但这道题明确给出了回答的范围，对于听过 JS 实体课的同窗来讲，这几乎是送分题，由于课上讲师们就明确讲解了类型转换的几种不一样形式，假如你们有作好笔记的话~安全

建议回复：

1. 强制类型转换： 明确调用内置函数，强制把一种类型的值转换为另外一种类型。强制类型转换主要有：Boolean、Number、String、parseInt、parseFloat服务器

2. 隐式类型转换： 在使用算术运算符时，运算符两边的数据类型能够是任意的，好比，一个字符串能够和数字相加。之因此不一样的数据类型之间能够作运算，是由于 JavaScript 引擎在运算以前会悄悄的把他们进行了隐式类型转换。隐式类型转换主要有：+、–、==、!

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

分析：

事件流模型这个知识点在妙味中级阶段 event 事件章节就有详细讲解，若是已经忘记的朋友，再去看看这个阶段的视频吧。 题外话：通常纯理论的知识点学起来枯燥（妙味实体班的学员也是如此），但理论的好处在于当遇到问题时，能迅速判断出错的原理所在，从而能够准确迅速的查找问题并精准修复，可让冗余代码简化到最低、能够再也不出了错之后像撞大运般的采用 “试来试去大法” 来修复~

建议回复：

事件流描述的是从页面中接收事件的顺序。 DOM 结构是树形结构，当页面中的某一个元素触发了某个一个事件，事件会从最顶层的 window 对象开始，向下传播到目标元素，途径的祖先节点都会触发对应的事件，若是当前节点的该事件绑定了事件处理函数的话，则会执行该函数当事件达到目标元素并执行绑定函数（若是有绑定的话）后，事件又会向上传播到 window 元素，途径的祖先节点都会触发对应的事件（若是绑定事件处理函数的话）

——文字好绕口有没有？谁让当初听课画图讲解的时候，你不认真听课却在那儿打瞌睡呢？ ^_^ 继续~

事件流包含三个阶段：
  • 事件捕捉阶段
  • 处于目标阶段
  • 事件冒泡阶段
  1. 事件捕捉阶段：事件开始由顶层对象触发，而后逐级向下传播，直到目标的元素；
  2. 处于目标阶段：处在绑定事件的元素上；
  3. 事件冒泡阶段：事件由具体的元素先接收，而后逐级向上传播，直到不具体的元素；

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

分析：

再次提醒：这题是妙味JS班 BOM 课程的笔记。背下来吧，背不出来的去面壁……

建议回复：

  1. window 对象，是 JS 的最顶层对象，其余的 BOM 对象都是 window 对象的属性；
  2. location 对象，浏览器当前URL信息；
  3. navigator 对象，浏览器自己信息；
  4. screen 对象，客户端屏幕信息；
  5. history 对象，浏览器访问历史信息；

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

分析：

若是说仅仅只会用 AJAX 是基础要求的话，那么听明白讲师课上的细节分析，则是面试加分项之一。对于这种纯概念题，建议面试前再写一遍原生 AJAX 函数的封装过程，必定要在理解的基础上去背，才会在面试时有良好发挥。

建议回复：

  • 简述 AJAX：AJAX即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种建立交互式网页应用的网页开发技术。经过在后台与服务器进行少许数据交换，AJAX 可使网页实现异步更新。这意味着能够在不从新加载整个网页的状况下，对网页的某部分进行更新。

AJAX 基本步骤：

  1. 初始化ajax对象
  2. 链接地址，准备数据
  3. 发送请求
  4. 接收数据（正在接收，还没有完成）
  5. 接收数据完成
//初始化ajax对象
var xhr = new XMLHttpRequest();
//链接地址，准备数据
xhr.open(“方式”,”地址”,是否为异步);
//接收数据完成触发的事件
xhr.onload =function(){}
//发送数据
xhr.send();

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

分析：

在听讲师讲解 AJAX 课程的时候，请仔细留意讲师所描述每个数字背后的含义、以及有可能出现的场景。万一在面试时考官不只仅只是让你背诵、而是给你一个场景让你作问答题呢？——因此，“带着理解去记忆” 是对付概念题最好的法宝，此外多看看延展的知识点，也是有益无害。

建议回复：

  1. 200：请求已成功，请求所但愿的响应头或数据体将随此响应返回。
  2. 302：请求的资源临时从不一样的 URI 响应请求。因为这样的重定向是临时的，客户端应当继续向原有地址发送之后的请求。只有在 Cache-Control 或 Expires 中进行了指定的状况下，这个响应才是可缓存的。
  3. 304：若是客户端发送了一个带条件的 GET 请求且该请求已被容许，而文档的内容（自上次访问以来或者根据请求的条件）并无改变，则服务器应当返回这个状态码。304 响应禁止包含消息体，所以始终以消息头后的第一个空行结尾。
  4. 403：服务器已经理解请求，可是拒绝执行它。
  5. 404：请求失败，请求所但愿获得的资源未被在服务器上发现。
  6. 500：服务器遇到了一个不曾预料的情况，致使了它没法完成对请求的处理。通常来讲，这个问题都会在服务器端的源代码出现错误时出现。

8、同步和异步的区别?

分析：

又是概念题，又是课上容易打瞌睡的题对不对？看看下面的“建议回复”吧，或许和大家上课的内容有些区别，由于讲师们又从新换了个比喻，把容易让人弄晕的、深刻的知识，以举例的形式描述了一遍。温故而知新的体验老是愉悦的，至于能把你们对该知识点的回忆勾起来多少？这就要看你们在妙味学习期间有没有往内心去了。

建议回复：

  • 首先同步异步于阻塞非阻塞并无关系。同步异步主要是事情作完之后，如何进行处理、或者说关注的是一种消息通讯机制。
  • 同步的状况下，是由处理消息者本身去等待消息是否被触发；
  • 而异步的状况下是由触发机制来通知处理消息者；

举例： 好比在妙味上课时，你问老师一个问题，这个问题可能须要花费一点时间去思考，这个时候老师可能：

  1. 思考，思考……，好了，有答案了；
  2. 这个问题须要一点时间，你先作点别的，等我想好了，去找你。

第一种就是同步，第二种就是异步。因此同步异步能够说是对被请求方来讲的，被请求者使用什么方式来告知处理结果。

  • 阻塞非阻塞，主要是对于请求者而言的。
  • 阻塞：发出请求等待结果返回，而后再处理后续的事情；
  • 非阻塞：发出请求不等待结果返回，能够接着作后续的事情；

举例，仍是上一个例子：

  1. 老师在使用同步思考的时候，你能够静静的等待老师给出答案，也能够边作本身的事情边等待老师的回答，固然这时候你须要时刻去关注老师是否已经想好了，在程序中须要进行轮询了。乀(ˉεˉ乀)
  2. 老师使用异步的方式，这个时候老师告诉你能够先去作别的，好了就通知你，那么你能够去作点别的，而后监听事件就行，固然你也能够很轴，我就不作别的！我要一直等着老师“想好了”的事件发生。

因此同步能够是阻塞的也能够是非阻塞的，异步也是如此。

9、GET和POST的区别，什么时候使用POST？

分析：

像是数据交互类的概念题在面试时被问到的机率之多，也反应出它在工做中的实用价值。因此没别的，好好学吧，好好背！

建议回复：

GET和POST的区别：

GET：通常用于查询数据，使用URL传递参数，因为浏览器对地址栏长度有限制，因此对使用get方式所发送信息的数量有限制，同时浏览器会记录（历史记录，缓存）中会保留请求地址的信息，包括地址后面的数据。get 只能发送普通格式（URL 编码格式）的数据。

POST：通常用于向服务器发送数据，对所发送的数据的大小理论上是没有限制，浏览器会缓存记录地址，可是不会记录 post 提交的数据。post 能够发送纯文本、URL编码格式、二进制格式的字符串，形式多样。

在如下状况中，请使用 POST 请求：

  1. 以提交为目的的请求（相似语义化，get 表示请求，post 表示提交）；
  2. 发送私密类数据（用户名、密码）（由于浏览器缓存记录特性）；
  3. 向服务器发送大量数据（数据大小限制区别）；
  4. 上传文件图片时（数据类型区别）；

10、 AJAX 的局限性?

分析：

刚刚上面有道题还分析了 AJAX 的原理步骤啥的，如今又冒出来个局限性？若是你仅仅只是知道怎么用它，那在看到这个题应该是一脸懵逼了……

建议回复：

  1. AJAX 不支持浏览器 back 按钮。
  2. 安全问题 AJAX 暴露了与服务器交互的细节。
  3. 对搜索引擎的支持比较弱。不会执行你的 JS 脚本，只会操做你的网页源代码；
  4. 跨域请求有必定限制。解决方式：jsonp；

11、new 操做符具体干了什么呢?

分析：

原理概念题，上课好好听、作好笔记、好好理解……啦啦啦~

建议回复：

当使用 new 操做符调用构造函数，函数实际会经历以下步骤：

  1. 建立一个新对象；
  2. 把函数中上下文（做用域）对象this指向该对象；
  3. 执行代码，经过this给新对象添加属性或方法；
  4. 返回对象；

12、null 和 undefined 的区别？

分析：

经典的概念题，要回答好的确须要功底扎实。

建议回复：

  • null： null表示空值，转为数值时为0；

  • undefined：undefined表示"缺乏值"，就是此处应该有一个值，可是尚未定义。

  1. 变量被声明了，但没有赋值时，就等于undefined。
  2. 对象没有赋值的属性，该属性的值为undefined。
  3. 函数没有返回值时，默认返回undefined。

十3、JavaScript 原型，原型链 ? 有什么特色？

分析：

不分析了，全是妙味实体班上课讲的东西。。。ㄟ(▔,▔)ㄏ

建议回复：

JavaScript 原型： 每建立一个函数，函数上都有一个属性为 prototype，它的值是一个对象。 这个对象的做用在于当使用函数建立实例的时候，那么这些实例都会共享原型上的属性和方法。

原型链： 在 JavaScript 中，每一个对象都有一个指向它的原型（prototype）对象的内部连接（proto）。这个原型对象又有本身的原型，直到某个对象的原型为 null 为止（也就是再也不有原型指向）。这种一级一级的链结构就称为原型链（prototype chain）。 当查找一个对象的属性时，JavaScript 会向上遍历原型链，直到找到给定名称的属性为止;到查找到达原型链的顶部（Object.prototype），仍然没有找到指定的属性，就会返回 undefined。

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

分析：

这道题检验了数组的 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
});

十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 = Object.prototype.toString.call(obj).slice(8, -1) === "Array" ? [] : {};
        for (var k in obj) {
            // 若是属性对应的值为对象，则递归复制
            if(typeof obj[k] === 'object' && typeof obj[k] !== 'null'){
                o[k] = clone(obj[k])
            }else{
                o[k] = obj[k];
            }
        }
    }else{ //不为对象，直接把值返回
        return obj;
    }
    return o;
}
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程