logo头像

叩首问路,码梦为生

搜狐研究院前端散招面试题总结

首先,搜狐媒体大厦还是蛮阔气的,但是门口的保安让我在沙发区稍等一会儿的时候,我看到那里有 5 个类似员工的人在打王者荣耀。。果然“大公司”的员工氛围就是不一样啊。。后来等了大概 10 分钟左右,一个挂有实习工作牌的女士把我带到了 9 楼,这里应该是搜狐员工办公的地方,两边都有比较大的办公区,然后中间有一块稍微小一点的地方用来面试和聊天,hr 姐姐首先让我做了一下搜狐的笔试题,然后说大概一个小时,如果做完了就给她打电话,然后就自己走开了(连杯水都没有倒,实习生就是这样的吗。。), 做完了之后就有一位男士拿着我的简历过来了,整个面试的过程堪称尴尬,因为我的简历上写有“关注ES6”,所以这位年轻的面试官就开始各种问 ES6 相关的东西,还问我和 react 相关的东西,比如让我讲一下 react 的设计思想啊什么的。。难道这就是“关注ES6”想要表达的意思吗?后来他可能感觉也比较尴尬了,就问了一些 JS 相关的东西,比如 self 和 this 的区别啊什么的,但是我的水平实在有限,这位面试官的前端水平实在是在我之上太多,所以我也是基本上全程蒙蔽,更别提让我用 jQuery 实现一个 promise 对象了(对了,这位面试官连 jQ 的 when() 方法都不知道。。),就这样结束了一面,当然由于我的水平实在太低,所以就直接让我走人了(不过我也比较饿了,想回学校吃点东西了。。)

笔试题

一、不定项选择题

我不知道笔试题能不能拍照,但是我还是冒着被批评和留下不好印象的风险拍了一下,总体来说难度还是适中的,其中有些题还是蛮经典的,大家可以自行消化

1. 以下元素为块级元素的有:

  • p
  • strong
  • span
  • section

2. 以下可以使元素不可见的有:

  • display: none
  • width:0; height:0; overflow:hidden
  • visibility: hidden
  • display: inline

3. 以下正确的有:

  • Number.MIN_VALUE > 0
  • Number(1) == new Number(1)
  • null == undefined
  • NaN == NaN

4. 以下会有错误发生的有:

  • 9..toString() //“9”
  • alert(a) //a is not defined
  • eval(‘a’) //a is not defined
  • console.log(Number)

5. 以下哪些情况会促发 BFC?

  • float 不为 none
  • position 为 fixed
  • display 为 static
  • overflow 为 scroll

6. 哪些元素会生成 BFC:

  1. 根元素
  2. float 属性不为 none
  3. position 为 absolute 或 fixed
  4. display 为 inline-block, table-cell, table-caption, flex, inline-flex
  5. overflow 不为 visible

二、填空题

1. 一个 div 垂直居中于整个 body 的 css 代码:

1
2
3
4
5
6
7
8
9
.center{
position: absolute;
height: 400px;
width: 400px;
margin-top: -200px;
margin-left: -200px;
left: 50%;
top: 50%;
}

2. 以下代码的打印结果为:10 10 10 10 10 10 10 10 10 10

1
2
3
4
5
for(var i=1;i<10;i++){
setTimeout(function(){
console.log(i);
},0);
};

3. 匹配邮箱的正则表达式:

1
^\[a-z0-9\]+(\[._\\\-\]*\[a-z0-9\])*@(\[a-z0-9\]+\[-a-z0-9\]*\[a-z0-9\]+.){1,63}\[a-z0-9\]+$

对于该正则表达式的解释:比较正宗的验证邮箱的正则表达式js代码详解

4. 对纯数字数组中每个元素进行乘以 2 后再取数组中的最小值

1
2
3
4
5
function doubleMin(arr){
return Math.min.apply(null,arr.map(function(item){
return item*2;
}))
}

关于数组 map() 方法的讲解:js 数组 map方法

5. 对以下数组按照拼音首字母排序 arr: [‘研发中心’,’视频中心’,’焦点部门’,’新闻部门’]

1
2
3
4
5
6
7
8
9
10
11
arr.sort(function(a,b){
var af = a.charAt(0);
var bf = b.charAt(0);
if(af.localeCompare(bf) > 0){
return 1;
}else if(af.localeCompare(bf) < 0){
return -1;
}else{
return 0;
}
})

三、简答题

1. 实现:var a = add(10)(3)(2) // a打印结果为15

这是一道关于类型转换的问题:一道面试题引发的对 javascript 类型转换的思考

2. 实现一个加载的动画(该动画有至少三个小圆,分别变大变小富有层次感)(只能使用 css)

利用关键帧动画 @keyframes 就可以达到,网上有好多关于加载动画实现的文章,推荐一下类似这道题想要的效果的文章:CSS 实现加载动画之八-圆点旋转6种CSS3加载动画

3. HTTP 是一个无状态的协议,那网站是如何记住用户信息的呢?请写出详细过程;同时谈谈 localStorage 和 sessionStorage 的区别,对离线缓存,甚至是 indexDB 的理解

网站是如何记住用户信息的:无状态协议中认证状态保持方案的一些思考

4. 请用 JS 实现一个简单的列表(List)类,使得其具有 show(展示该 list 的所有元素),add(向 list 添加一个元素,无返回),delete(删除指定位置的元素,并返回删除成功否),clear(清空 list);

在 JS 中是没有类的,所以其实是用 function 来间接实现,这类实现在我的另一篇文章里大量提到:JS 实现复杂数据结构

5. 请分别实现一个菱形,一个倒三角,一个椭圆形的答案(只能使用 css 和 html,不考虑兼容性)

在 css 中,通过 border 和旋转可以实现很多种图形,我在这个方面也是比较白痴的,所以推荐以下文章:CSS3实现32种基本图形利用css样式画各种图形–初步、进阶、高级(一)(感觉这两篇文章的排版和图片都不是很好,找时间我会自己再总结一下)

6. 简要回答你对跨域的理解,为什么要跨域,如何跨域

跨域这种问题应该是老生常谈了,其实就是浏览器的一种“同源策略”,为了保证安全而采取的措施,具体大家自行搜索吧,关于跨域的文章实在是太多了

一面

1. localStorage 和 sessionStorage 的区别

  • localStorage 和 sessionStorage 一样都是用来存储客户端临时信息的对象。
  • 他们均只能存储字符串类型的对象(虽然规范中可以存储其他原生类型的对象,但是目前为止没有浏览器对其进行实现)。
  • localStorage 生命周期是永久,这意味着除非用户显示在浏览器提供的 UI 上清除 localStorage 信息,否则这些信息将永远存在。
  • sessionStorage 生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过 sessionStorage 存储的数据也就被清空了。
  • 不同浏览器无法共享 localStorage 或 sessionStorage 中的信息。相同浏览器的不同页面间可以共享相同的 localStorage(页面属于相同域名和端口),但是不同页面或标签页间无法共享 sessionStorage 的信息。这里需要注意的是,页面及标签页仅指顶级窗口,如果一个标签页包含多个 iframe 标签且他们属于同源页面,那么他们之间是可以共享 sessionStorage 的。

2. JS中self和this的区别

不知道为什么面试官会问这个问题,因为 self 好像在 react 才会经常用到吧?。。但是我还是查了一下,网上对这两个的区别的解释很少,大致就是:self 指向本窗口,this 指向就比较广泛了

3. 如何实现 JS 中的防抖动和节流阀

这个功能其实经常用到,但是面试官给我的答案是 underscore.js 源码中有,然后说 jQuery 的第三方库应该也有。。估计是这位面试官经常用 underscore.js 解决重复点击的问题,然后至于怎么实现的自己也不知道。。(我就没好意思再问了,以免造成尴尬的局面),推荐一下解释的很清楚的文章(这是一篇中文译文,英文原文可以点击下面这篇文章中的原文链接):实例解析防抖动(Debouncing)和节流阀(Throttling)

4. HTML5 使任何元素变为可编辑的属性

1
contenteditable="true"

5. 当给 line-height 设置为 5rem、5em、5px、5pt、500%、5 时的计算公式

在张鑫旭的慕课网讲解视频(深入理解 CSS 系列)中曾经讲到过这些单位的含义和作用,具体可以点击下面链接查看我对他的讲解的总结:CSS 深入理解之 line-height,具体计算公式和作用如下:

  • 5rem:按照 html 的 font-size 进行计算
  • 5em:按照自身的 font-size 进行计算
  • 5px:相对长度单位,像素
  • 5pt:绝对长度单位,点 Points (1点 = 1/72英寸)
  • 500%:按照自身的 font-size 进行计算
  • 5:同样按照自身的 font-size 进行计算

可以看出,line-height 的值如果不是具体数值,都是按照 font-size 进行计算的,同时 500%/5em/5 有什么区别呢?在张鑫旭的讲解中也提到了,500%/5em 会根据自身的 font-size 进行计算,得到具体数值后将行高继承给后代元素,而 5 只会将比例继承给后代元素,后代元素会根据自己的 font-size 重新计算行高

更新自2017-10-11:突然发现小程序中有一个很有趣的长度单位 rpx,具体参见这篇文章:谈谈像素以及微信小程序的 rpx

6. oninput 事件和 onchange 事件的区别

onchange 事件经常用到(图片、文件上传),但是 oninput 事件却没有用过了,推荐:总结oninput、onchange与onpropertychange事件的用法和区别

支付宝打赏 微信打赏

听说赞过就能年薪百万