2018-09-27前端掌握这一波面试题,面试加薪无忧无虑

过夏的北京,天气似乎突然有点凉,春天的温暖刚过,但求职的浪潮却已悄然来袭。就在大家摩拳擦掌、积极备战的当下,沽泡前端讲师们为大家准备了一份小小礼物:

特别说明:

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

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

分析:

这道题检验的是 JS 基本功,在妙味课堂 JS 基础课程里就有讲,只要对 typeof 运算符是了解的,就没有太大难度。具体在回答的时候,再结合理论知识和编码过程中实际情况进行回答即可。另外,考虑到面试时的严谨性,妙味讲师把 ES2015 中新增的类型也并入回复中,供大家参考。

建议回复:

首先,JavaScript 中一共有两大数据类型:

基础类型引用类型

基础类型包括: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 种隐式类型转换?

分析:

类型转换听起来可能有点宽泛,但这道题明确给出了回答的范围,对于听过 JS 实体课的同学来说,这几乎是送分题,因为课上讲师们就明确讲解了类型转换的几种不同形式,假如大家有做好笔记的话~

建议回复:

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

2. 隐式类型转换: 在使用算术运算符时,运算符两边的数据类型可以是任意的,比如,一个字符串可以和数字相加。之所以不同的数据类型之间可以做运算,是因为 JavaScript 引擎在运算之前会悄悄的把他们进行了隐式类型转换。隐式类型转换主要有:+、–、==、!

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

分析:

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

建议回复:

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

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

事件流包含三个阶段:事件捕捉阶段处于目标阶段事件冒泡阶段

事件捕捉阶段:事件开始由顶层对象触发,然后逐级向下传播,直到目标的元素;处于目标阶段:处在绑定事件的元素上;事件冒泡阶段:事件由具体的元素先接收,然后逐级向上传播,直到不具体的元素;

五、BOM 对象有哪些,列举 window 对象?

分析:

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

建议回复:

window 对象,是 JS 的最顶层对象,其他的 BOM 对象都是 window 对象的属性;location 对象,浏览器当前URL信息;navigator 对象,浏览器本身信息;screen 对象,客户端屏幕信息;history 对象,浏览器访问历史信息;

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

分析:

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

建议回复:

简述 AJAX:AJAX即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

AJAX 基本步骤:

初始化ajax对象连接地址,准备数据发送请求接收数据(正在接收,尚未完成)接收数据完成

//初始化ajax对象

var xhr = new XMLHttpRequest();

//连接地址,准备数据

xhr.open(“方式”,”地址”,是否为异步);

//接收数据完成触发的事件

xhr.onload =function(){}

//发送数据

xhr.send();

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

分析:

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

建议回复:

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 请求:

以提交为目的的请求(类似语义化,get 表示请求,post 表示提交);发送私密类数据(用户名、密码)(因为浏览器缓存记录特性);向服务器发送大量数据(数据大小限制区别);上传文件图片时(数据类型区别);

十、 AJAX 的局限性?

分析:

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

建议回复:

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

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

分析:

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

建议回复:

当使用 new 操作符调用构造函数,函数实际会经历如下步骤:

创建一个新对象;把函数中上下文(作用域)对象this指向该对象;执行代码,通过this给新对象添加属性或方法;返回对象;

十二、null 和 undefined 的区别?

分析:

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

建议回复:

null: null表示空值,转为数值时为0;

undefined:undefined表示"缺少值",就是此处应该有一个值,但是还没有定义。

变量被声明了,但没有赋值时,就等于undefined。对象没有赋值的属性,该属性的值为undefined。函数没有返回值时,默认返回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)进行值复制。

分析:

这道题考察了以下知识点:

使用 typeof 判断值得类型;使用 toString 区分数组和对象;递归函数的使用;

建议回复:

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;

}

假如以上面试题由你来做的话,能达到及格的小伙伴们举个爪看看? 大家还碰到哪些原生的 JS 面试题表示困惑了?不如拿出来和大家一起分享讨论吧~

有疑惑的同学,就在这帖子下留言吧~~

有任何疑惑加群QQ786276452

对前端的技术,架构技术感兴趣的同学关注我的头条号,并在后台私信发送关键字:“前端”即可获取免费的架构师学习资料

知识体系已整理好(源码,笔记,PPT,学习视频),欢迎免费领取。还有面试视频分享可以免费获取。关注我,可以获得没有的架构经验哦!!

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,688评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,559评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,749评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,581评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,741评论 3 271
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,684评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,122评论 2 292
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,847评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,441评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,939评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,333评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,783评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,275评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,830评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,444评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,553评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,618评论 2 249

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,071评论 1 45
  • 2018web前端最新面试题总结 一、Html/Css基础模块 基础部分 什么是HTML?答:​ HTML并不是...
    duans_阅读 4,626评论 3 27
  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    怡宝丶阅读 2,542评论 0 7
  • 1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined、Nul...
    极乐君阅读 5,391评论 0 106
  • 面试题按类型来分,主要涉及到“技术”与“非技术”两大类,今天我们主要讨论的是“技术类”,在这个大类别下涉及到的子类...
    simple_50a1阅读 2,393评论 1 56