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

首先，搜狐媒体大厦还是蛮阔气的，但是门口的保安让我在沙发区稍等一会儿的时候，我看到那里有 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：

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

二、填空题

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

.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

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 后再取数组中的最小值

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

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

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

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事件的用法和区别