面试之前都会从网上找很多面试题来看,尤其是看到经典面试题,及必会的面试题,都是好好的看上几遍(其实更多的时候都是在背),可是总感觉面试之前看题作用并不大,因为你不理解的问题,还是会不理解,面试管随便一问,就不行了.其实面试几次后就会发现,经常问的问题也就那几个,比如,闭包,原型链,this,等.刚开始的时候真的是理解不了,然后就看书,强烈推荐《javascript高级程序设计(第三版)》
以及《你不知道的javascript系列》
,在实际项目中遇到坑的时候,就反复看,看的时候很难受,但是当真正理解了之后,就会恍然大悟,所以功夫还是下在平时,临时抱佛脚真的没啥用~
以下是我总结的面试题中常问到的,很多都是
我亲身经历的面试
中遇到的一些问题,刚开始遇到的时候也不是太清楚,面试完之后就深入的学习了一下相关的知识😜
1,考察this
1 | var length = 10; |
- 10 ,2
- 第一次输出10应该没有问题。我们知道取对象属于除了点操作符还可以用中括号,所以第二次执行时相当于arguments调用方法,this指向arguments,而这里传了两个参数,故输出arguments长度为2。
1 | var length = 10; |
1 | function fn(a) { |
- function a() {}
- 2
- var和function是会提前声明的.而且function是优先于var声明的(如果同时存在的话),所以刚开始输出的就是一个funciton,接着往下执行a进行重新赋值了,故第二次输出的是2;
3,局部变量和全局变量
1 | var f = true; |
- 输出 10 报错 30
- 这是个我犯了很久的错误,很长一段时间我都以为{…}内的新声明的变量是局部变量,后来我才发现function内的新声明的变量才是局部变量,而没有用var声明的变量在哪里都是全局变量。再次提醒切记只有function(){}内新声明的才能是局部变量,while{…}、if{…}、for(..) 之内的都是全局变量(除非本身包含在function内)。
4,变量隐式声明
1 | if( 'a' in window) { |
- 10
- funciton和var会提前声明,而其实{…}内的变量也会提前声明,于是代码还没执行前a已经被声明了。所以 ‘a’ in window会返回true,a被赋值
5,给基本类型数据添加属性,不报错,但取值时是undefined
1 | var a = 10; |
- NaN undefinedhello
- 给基本类型数据加属性不报错,但是引用的话返回undefined,10+undefined返回NaN,而undefined和string相加时转变成了字符串
6,函数声明优先于变量声明
1 | console.log(typeof fn); |
- function
- 因为函数声明优于变量声明。我们知道在代码逐行执行前,函数声明和变量声明会提前进行,而函数声明又会优于变量声明,这里的优于可以理解为晚于变量声明后,如果函数名和变量名相同,函数声明就能覆盖变量声明。所以以上代码将函数声明和变量声明调换顺序还是一样结果。
7,判断一个字符串中出现次数最多的字符,并统计次数
1 | var s = 'aaabbbcccaaabbbaaa'; |
- 正则
1
2
3
4
5
6
7
8
9
10var s = 'aaabbbcccaaabbbaaa';
var a = s.split('');
a.sort();
s = a.join('');
var pattern = /(\w)\1*/g;
var ans = s.match(pattern);
ans.sort(function(a, b) {
return a.length < b.length;
})
console.log(ans[0][0] + ':' + ans[0].length);
8, 经典闭包
1 | <!--html--> |
- 从0开始隔10s按顺序出现’第一次出现’,’第二次出现’,’第三次出现‘
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15const datas = ['1', '2', '3'];
let timer = null;
for (let i = 0; i < datas.length; i++) {
// const index = i;
if (timer) {
clearTimeout(timer);
let timer = setTimeout(function () {
console.log(datas[i]);
}, 10000 * i)
} else {
let timer = setTimeout(function () {
console.log(datas[i]);
}, 10000 * i)
}
};
9,请编写一个JavaScript函数 parseQueryString,它的用途是把URL参数解析为一个对象,如: var url = “http://witmax.cn/index.php?key0=0&key1=1&key2=2″
1 | function parseQueryString(url) { |
10,this
1 | var baz=3; |
11,数组方法
- 数组排序:写一个js函数,将数组对象按照一定的顺序进行排序,且可通过参数决定升降序
1 | const list = [ |
12,求一个字符串的字节长度
1 | function GetBytes(str){ |
13 jsonp原理及过程
- 利用
- 并提供一个回调函数来接收数据(函数名可约定,或通过地址参数传递)。
- 第三方产生的响应为json数据的包装(故称之为jsonp,即json padding),形如:callback({“name”:”hax”,”gender”:”Male”})这样浏览器会调用callback函数,并传递解析后json对象作为参数。本站脚本可在callback函数里处理所传入的数据。
14, link和@import区别
- link属于html标签,而@import是css提供的。
- 页面被加载时,link会同时被加载,而@import引用的css会等到页面加载结束后加载。
- link是html标签,因此没有兼容性,而@import只有IE5以上才能识别。
- link方式样式的权重高于@import的
15,一个页面从输入url到页面加载显示完成,这个过程都发生了什么?
- 1,浏览器开启一个线程来处理这个请求
- 2,查找浏览器缓存(浏览器缓存-系统缓存-路由器缓存)
- 3,DNS解析,查找该域名对应的IP地址,重定向(301),
- 4,向真实IP地址服务器发出tcp连接,tcp三次握手
- 5,握手成功后,进行http协议会话,浏览器发送报头
- 6,进入到web服务器上的 Web Server,如 Apache、Tomcat、Node.JS 等服务器;
- 7,进入部署好的后端应用,如 PHP、Java、JavaScript、Python 等,找到对应的请求处理;
- 8,处理结束回馈报头,将数据返回至浏览器;
- 9,浏览器开始下载html文档(响应报头,状态码200),同时设置缓存;
- 10,之后浏览器对整个 HTML 结构进行解析,形成 DOM 树;与此同时,它还需要对相应的 CSS 文件进行解析,形成 CSS 树(CSSOM)。
- 11,得到绘制树之后,需要计算每个结点在页面中的位置,这一个过程称为layout
浏览器这边做的工作大致分为以下几步:
加载:根据请求的URL进行域名解析,向服务器发起请求,接收文件(HTML、JS、CSS、图象等)。
解析:对加载到的资源(HTML、JS、CSS等)进行语法解析,建议相应的内部数据结构(比如HTML的DOM树,JS的(对象)属性表,CSS的样式规则等等)
16,TCP传输的三次握手四次挥手策略
三次握手 SYN和ACK
发送端首先发送一个带SYN标志的数据包给对方。接收端收到后,回传一个带有SYN/ACK标志的数据包以示传达确认信息。 最后,发送端再回传一个带ACK标志的数据包,代表“握手”结束。 若在握手过程中某个阶段莫名中断,TCP协议会再次以相同的顺序发送相同的数据包。
四次挥手
- 第一次挥手:主动关闭方发送一个FIN,用来关闭主动方到被动关闭方的数据传送,也就是主动关闭方告诉被动关闭方:我已经不 会再给你发数据了(当然,在fin包之前发送出去的数据,如果没有收到对应的ack确认报文,主动关闭方依然会重发这些数据),但是,此时主动关闭方还可 以接受数据。
- 第二次挥手:被动关闭方收到FIN包后,发送一个ACK给对方,确认序号为收到序号+1(与SYN相同,一个FIN占用一个序号)。
- 第三次挥手:被动关闭方发送一个FIN,用来关闭被动关闭方到主动关闭方的数据传送,也就是告诉主动关闭方,我的数据也发送完了,不会再给你发数据了。
- 第四次挥手:主动关闭方收到FIN后,发送一个ACK给被动关闭方,确认序号为收到序号+1,至此,完成四次挥手。
17, new操作符到底干了什么?深入了解
- 1,创建一个空对象,而且this变量引用该对象,同时还继承了该函数的原型.
- 2,属性和方法被加入到this引用的对象中,
- 3,新创建的对象由this所引用,而且最后隐式的返回this
18, null和undefined的区别?
undefined
- (1)变量被声明了,但是没有赋值,就等于undefined
- (2)调用函数时,应该提供的参数没有提供,该参数等于undefined
- (3)对象没有赋值的属性,该属性的值为undefined
- (4)函数没有返回值时,默认返回undefined
null- (1)作为函数的参数,表示该函数的参数不是对象
- (2)作为对象原型链的终点
19, js的基本数据类型
Number,String,Boolean,Null, Undefined,Object,Symbol
20,DOM怎样添加,移除,复制,和创建节点
1 | // 创建新节点 |
参考总结
这10道javaScript笔试题你都会么
正则
2016年十家公司面试小记
浅谈javascript的函数节流
面试题1
面试题2
面试题3
html与css
道阻且长啊TAT(前端面试总结),17年春招面试总结