前端拿高薪必看面试题

title
面试之前都会从网上找很多面试题来看,尤其是看到经典面试题,及必会的面试题,都是好好的看上几遍(其实更多的时候都是在背),可是总感觉面试之前看题作用并不大,因为你不理解的问题,还是会不理解,面试管随便一问,就不行了.其实面试几次后就会发现,经常问的问题也就那几个,比如,闭包,原型链,this,等.刚开始的时候真的是理解不了,然后就看书,强烈推荐《javascript高级程序设计(第三版)》以及《你不知道的javascript系列》,在实际项目中遇到坑的时候,就反复看,看的时候很难受,但是当真正理解了之后,就会恍然大悟,所以功夫还是下在平时,临时抱佛脚真的没啥用~

以下是我总结的面试题中常问到的,很多都是我亲身经历的面试中遇到的一些问题,刚开始遇到的时候也不是太清楚,面试完之后就深入的学习了一下相关的知识😜

1,考察this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var length = 10;
function fn() {
console.log(this.length);
}

var obj = {
length: 5,
method: function(fn) {
fn();
arguments[0]();
}
};

obj.method(fn, 1);
  • 10 ,2
  • 第一次输出10应该没有问题。我们知道取对象属于除了点操作符还可以用中括号,所以第二次执行时相当于arguments调用方法,this指向arguments,而这里传了两个参数,故输出arguments长度为2。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var length = 10;
function fn() {
console.log(this.length);
}

var obj = {
length: 5,
method: function(fn) {
fn();
const fun = arguments[0];
fun();
}
};

obj.method(fn, 1);
  • 10 10

    2,var和函数的提前声明

1
2
3
4
5
6
7
8
function fn(a) {
console.log(a);
var a = 2;
function a() {}
console.log(a);
}

fn(1);
  • function a() {}
  • 2
  • var和function是会提前声明的.而且function是优先于var声明的(如果同时存在的话),所以刚开始输出的就是一个funciton,接着往下执行a进行重新赋值了,故第二次输出的是2;

3,局部变量和全局变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var f = true;
if (f === true) {
var a = 10;
}

function fn() {
var b = 20;
c = 30;
}

fn();
console.log(a);
console.log(b);
console.log(c);
  • 输出 10 报错 30
  • 这是个我犯了很久的错误,很长一段时间我都以为{…}内的新声明的变量是局部变量,后来我才发现function内的新声明的变量才是局部变量,而没有用var声明的变量在哪里都是全局变量。再次提醒切记只有function(){}内新声明的才能是局部变量,while{…}、if{…}、for(..) 之内的都是全局变量(除非本身包含在function内)。

4,变量隐式声明

1
2
3
4
if( 'a' in window) {
var a = 10;
}
console.log(a);
  • 10
  • funciton和var会提前声明,而其实{…}内的变量也会提前声明,于是代码还没执行前a已经被声明了。所以 ‘a’ in window会返回true,a被赋值

5,给基本类型数据添加属性,不报错,但取值时是undefined

1
2
3
4
5
6
7
var a = 10;
a.pro = 10;
console.log(a.pro + a);

var s = 'hello';
s.pro = 'world';
console.log(s.pro + s);
  • NaN undefinedhello
  • 给基本类型数据加属性不报错,但是引用的话返回undefined,10+undefined返回NaN,而undefined和string相加时转变成了字符串

6,函数声明优先于变量声明

1
2
3
console.log(typeof fn);
function fn() {};
var fn;
  • function
  • 因为函数声明优于变量声明。我们知道在代码逐行执行前,函数声明和变量声明会提前进行,而函数声明又会优于变量声明,这里的优于可以理解为晚于变量声明后,如果函数名和变量名相同,函数声明就能覆盖变量声明。所以以上代码将函数声明和变量声明调换顺序还是一样结果。

7,判断一个字符串中出现次数最多的字符,并统计次数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var s = 'aaabbbcccaaabbbaaa';
var obj = {};
var letter;
var maxn = -1;
for (let i = 0; i< s.length; i++) {
if(obj[s[i]]) {
obj[s[i]] ++;
if(obj[s[i]] > maxn) {
maxn = obj[s[i]];
letter = s[i];
}
} else {
obj[s[i]] = 1;
if(obj[s[i]] > maxn) {
maxn = obj[s[i]];
letter = s[i];
}
}
}
console.log(`${letter}:${maxn}`);
  • 正则
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!--html-->
<ul>
<li>这是第1个</li>
<li>这是第2个</li>
<li>这是第3个</li>
<li>这是第4个</li>
</ul>

<!--js-->
一:
for(var i = 0; i < lis.length; i++) {
lis[i].index = i;
lis[i].onclick = function() {
alert(this.index);
};
}
二:
for(var i = 0; i < lis.length; i++) {
(function(i) {
lis[i].onclick = function() {
alert(i);
};
})(i);
}
三:
for(let i = 0; i < lis.length; i++) {
lis[i].onclick = function() {
alert(i);
};
}
  • 从0开始隔10s按顺序出现’第一次出现’,’第二次出现’,’第三次出现‘
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    const 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
2
3
4
5
6
7
8
9
10
11
12
13
14
function parseQueryString(url) {
var obj = {};
var a = url.split('?');
if(a.length === 1) return obj;
var b = a[1].split('&');
for(var i = 0, length = b.length; i < length; i++) {
var c = b[i].split('=');
obj[c[0]] = c[1];
}
return obj;
}
var url = 'http://witmax.cn/index.php?key0=0&key1=1&key2=2';
var obj = parseQueryString(url);
console.log(obj.key0, obj.key1, obj.key2); // 0 1 2

10,this

1
2
3
4
5
6
7
8
9
10
11
var baz=3;
var bazz={
baz: 2,
getbaz: function() {
return this.baz
}
}
console.log(bazz.getbaz())
var g=bazz.getbaz;
console.log(g());
第一个输出2,第二个输出3,函数作为对象本身属性调用的时候this指向对象,作为普通函数调用的时候就指向全局了

11,数组方法

  • 数组排序:写一个js函数,将数组对象按照一定的顺序进行排序,且可通过参数决定升降序
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const list = [
{
"name": "first",
"index": 1,
},
{
"name": "second",
"index": 2,
},
{
"name": "third",
"index": 3,
},
{
"name": "fourth",
"index": 4,
},
]
function compare(property){
return function(a,b){
return a[property] - a[property];
}
}
console.log(list.sort(compare('index')))

12,求一个字符串的字节长度

1
2
3
4
5
6
7
8
9
10
11
12
13
function GetBytes(str){
var len = str.length;
var bytes = len;
for(var i=0; i<len; i++){
if (str.charCodeAt(i) > 255) bytes++;
}
return bytes;
}

alert(GetBytes("你好,as"));
str = 'hello world';
console.log(str.charCodeAt(0)); // 104, 返回指定索引处字符的 Unicode 数值,大于255为中文
console.log(str.charAt(0)); // h, 返回指定位置的字符,

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
2
3
4
5
6
7
8
9
10
11
12
13
// 创建新节点
createDocumentFragment(); // 创建一个DOM片段
createElement(); // 创建一个具体的元素
createTextNode(); // 创建一个文本节点
//添加,移除,替换
appendChild()
removeChild()
replaceChild()
insertBefore() // 在已有的子节点前插入一个新的子节点
// 查找
getElementByTagName() // 通过标签名称
getElementByName() // 通过元素的Name属性的值(IE容错能力较强,会得到一个数组,其中包括id等于name值的)
getElementById() // 通过元素ID,唯一性

参考总结

这10道javaScript笔试题你都会么
正则
2016年十家公司面试小记
浅谈javascript的函数节流
面试题1
面试题2
面试题3
html与css
道阻且长啊TAT(前端面试总结),17年春招面试总结

About

aboutme
github
blog