2017年年初前端面试总结
请各位读者添加一下作者的微信公众号，以后有新的文章，将在微信公众号直接推送给各位，非常感谢。
1.前言
近期很多小伙伴们都已经开始新一轮的跳槽，而跳槽的计划往往又因为面试的失利而被迫中止。
正好作者身边最近就有很多小伙伴在尝试跳槽。
那么今天咱们就来分享一下，“战友们”分享给我的第一手的面试资料吧。
本文是 作者：李鹏 原创文章，若想转载，请私信作者并在转载文章开头附上原文地址链接。
未经允许私自转载，作者保留法律追究权利。
2.正文
2.1 阿里巴巴
首先咱们来看一看，一位去阿里进行面试的小伙伴，看看他在面试中都遇到了什么问题。
首先你先做个自我介绍吧。
这个没什么好说的，大家肯定都熟门熟套了，但是请注意接下来的内容。
这时候递给我一张纸 和 笔，告诉我，接下来我问到的问题，都需要你直接手写下来，如果问到一些方法，就直接用代码来展示。
WTF? 虽然我知道你是想考考我的“基础功”，但是这个也太夸张了吧。
但是没办法，谁让你是过来面试的呢，他怎么说，你就怎么做呗。
接下来就是重点了，面试官开始询问具体的技术内容了。
- 你上一个项目都用到了那些方法优化js的性能？
- 说一下你对angualr的见解，说一下项目中你为什么会用angular？
- angular的生命周期？
- 你个人认为为什么那么多人迷恋angular？
- 说一下angular和jQ的区别？
- 说一下你对vue和vuex的使用方法？
- 手写vue实现一个Vue的一个小效果，假如...(具体的朋友没说全)？
- 说一些什么是高并发，这些如何处理？
- 说一下什么是面向对象？
- 手写代码实现 封装、继承
- 说一下你对多态的看法
- 工作这么长时间了，肯定懂后台吧 ，什么是 线程？
- ES6你了解哪些？你对ES6有什么看法?
- 说一说关于 Promise 的使用（需要手写）
总结：
基本上，在你说一句话中，只要提到专业术语，
他会立马让你说这个专业术语的意思。
而且，只要你回答过以后，他还会要求你手写代码并实现。
2.2 北京 **** 健康科技有限公司 机试题
各位小伙伴们请注意，这次这个公司并没有像其他公司一样，上来先做一套笔试题，而是上来给你一个需求，直接让你完成对应的内容。
请通过ajax调用远程接口获取数据，实现如图所示界面
- 接口地址：
- http://test.sifong.cn:3129/public/sfai.asmx/WebCall=sParam
- 输入参数为sParam： sParam为对象形式,采用URL参数方式
- Key1=Value1&Key2=Value2&...
- sParam具体内容：
- guid=010C6FBE0AA14EE6BD61C97CC1E64DD5&method=3363
- 输出参数：为json数据格式
- 成功返回：
- Result=true,USERID=我的编号,PHOTO=我的照片,Value=数据列表
- 数据每一项:TOPIC_ID=话题编号,CIRCLE_ID=圈子编号,CIRCLE_NAME=圈子名称,TOPIC_CONTENT=话题内容,USERID=客户编号,NICKNAME=昵称,PHOTO=照片,CREATE_TIME=发表时间,COMMENT_TIMES=评论次数,LIKE_TIMES=点赞次数,SHARE_TIMES=分享次数,IS_LIKE=已点赞,[PIC_LIST=图片列表],[CAN_DEL=可以删除]
- 失败返回：
- Result=false,Message=错误信息,ErrCode=错误代码
其中：
- PHOTO=成员图像 具体内容为photo媒体编号，通过以下地址显示
- http://test.sifong.cn:3129/public/SFAIMedia.aspx?id=媒体编号&[type=媒体类型]
- 媒体类型：
- image：原图、thumb1：缩略图、voice：音频、video：视频
- PIC_LIST 内容= 普通图片媒体编号 , 通过以下地址显示
- http://test.sifong.cn:3129/public/SFAIPhoto.aspx?id=媒体编号&type=image
其中，面试官给你讲解完就直接出去了，直接给你留在屋子里，让你等你完成之后再找他。
比较好的一点就是可以请求场外支援。
当然，自己要开热点。
2.3 不记得具体是哪些公司的面试题分享
以下面试题无出处，无顺序，各位小伙伴可以选择性查看。
2.3.1 某不知名公司面试题
- 当前一段代码输出结果是什么？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>MR_LP --> QQ ：3206064928</title>
</head>
<body>
</body>
<script type="text/javascript" charset="utf-8">
var z = 10;
function foo(){
console.log(z);
}
(function(funArg){
var z = 20;
funArg();
})(foo);
</script>
</html>
- 当前一段代码输出结果是什么？
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>MR_LP --> QQ ：3206064928</title>
</head>
<body>
</body>
<script type="text/javascript" charset="utf-8">
var data = [];
for(var k = 0; k < 3; k++){
data[k] = function(){
console.log(k);
};
}
data[0]();
data[1]();
data[2]();
</script>
</html>
-
假设现有一篇文章，
var content = "...大量文字"，
文章中触及到一些敏感词汇,如["习近平","周永康","中共","6.4"]等内容。
如何在文章中发现这些敏感词，并将背景设置为红色或者改变字体颜色并标示出来。 -
JQuery 中 $fn.extend 函数的实现（实现核心代码即可）
-
设计基于观察者模式的事件绑定机制
2.3.2 另一个不知名的公司面试题
-
列出 display 的值，并说明他们的作用
-
position 中，relative 和 absolute 的区别，包括使用时的注意事项和定位原点
-
CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？CSS 3 新增的伪类有哪些？
-
CSS 3 有哪些新特性？
-
new 操作符具体做了什么？
-
请问三行 a，b，c 输出分别是什么？
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>MR_LP --> QQ ：3206064928</title>
</head>
<body>
</body>
<script type="text/javascript" charset="utf-8">
function fun(n,o){
console.log(o)
return{
fun:function(m){
return fun(m,n);
}
};
}
var a = fun(0); a.fun(1); a.fun(2); a.fun(3);
var b = fun(0).fun(1).fun(2).fun(3);
var c = fun(0).fun(1); c.fun(2); c.fun(3);
</script>
</html>
- 问，输出分别为什么？
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>MR_LP --> QQ ：3206064928</title>
</head>
<body>
</body>
<script type="text/javascript" charset="utf-8">
var a = 100;
function testResult(){
var b = 2 * a;
var a = 200;
var c = a / 2;
alert(b);
alert(c);
}
testResult();
</script>
</html>
- 问输出结果为什么？
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>MR_LP --> QQ ：3206064928</title>
</head>
<body>
</body>
<script type="text/javascript" charset="utf-8">
var tt = "MR_LP --> QQ ：3206064928";
function test(){
alert(tt);
var tt = "李鹏";
alert(tt);
}
test();
</script>
</html>
3. 后记
不知不觉，就写了这么多了。
其他一些面试题，咱们稍后等作者专门开一篇专题，再详细讨论吧。
拜了个拜。
李鹏
2017年03月12日15:47:49
