2017.03.07 前端面试之阿里彩票

应该是在决定入职简单之后，接到了阿里彩票的面试，在一个上午，虽然那几天身体不适，但是还是坚持翘班大老远去了在通州的阿里彩票去参加了面试。

面试结果当然是没有OK，原因一方面是因为自己水平不够，那时候对JS的学习还差的很远，另一方面是身体不舒服，走了那么远，身体更不舒服了，导致后来在家修养了小半个月才康复，真是一段不堪回首的经历。

去了之后还是有收获的，和面试官聊的还可以吧，后来还是征求他的同意将笔试的题目拍照拍了下来，现在再回过头来看这些笔试题，有一些还是做不出来/(ㄒoㄒ)/~~， 有一些已经是小意思了

还有就是这些题其实都是考虑对JS的一些基本概念的掌握和了解程度，都是实际编程中一不小心会出现坑的地方，应该尽量避免用题目中的方式进行编程，理解着费力，特别容易出现bug

1 用几个关键词描述眼中的前端工程师

我当时回答的HTML+CSS+JS+框架+交互，现在的话可能会加上优化、细致等吧

2 三行a、b、c的输出分别是什么？

 function fun(n,o){     console.log(o);     return {       fun : function(m){         return fun(m,n);       }     }   }    var a = fun(0); // undefined    a.fun(1); // 0    a.fun(2); // 0    a.fun(3); // 0    var b = fun(0).fun(1).fun(2).fun(3); // undefined, 0, 1, 2    var c = fun(0).fun(1); // undefined, 0    c.fun(2); // 1    c.fun(3); // 1

正确答案都已经写在代码的注释中了，当时我的答案真是一点边都不靠，对函数的调用理解差的很远，也可能因为紧张吧，一塌糊涂

3 看下面代码，输出的是什么？

var o = {      fn : function(){        console.log(fn)      }    };    o.fn() 

正确答案是报错，fn is not defined， 但是做错了，回答的object，现在回顾的时候还是做了，以为会打印出

function(){        console.log(this.fn)}

其实不是这样的，这道题考察的是作用域？因为fn压根就没有被定义，如果打印的是this.fn，我回顾时候的答案就对了，题目中的fn根本就没有定义

4 看下面代码的输出结果

(function(a){    console.log(a);    var a = 10;    function a(){}}(100))

结果应该是：

function a(){}

当时答题的时候错了，认为是100，现在回顾的时候又错了，以为是10，其实都不对。

这道题考察的是函数的作用域和函数声明的提前， 首先传入了a=100，如果是这样：

(function(a){    console.log(a);}(100))// 结果是100  

如果是这样：

(function(a){    var a = 10;    console.log(a);}(100))// 结果是10

如果是这样，结果是100，因为var a=1相当于两个语句，var a, a=10，声明变量会提前，但是赋值不会，所以结果是100

(function(a){    console.log(a);    var a = 10;}(100))// 结果是100 

如果是题目中那样，函数声明会被提前到作用域的最上方，所以输出了那样的结果。如果在函数声明语句后边再次打印a，打印的就是10了：

(function(a){    console.log(a); // function a(){}    var a = 10;    function a(){}    console.log(a) // 10}(100))

因为如果按照实际的声明提前之后的顺序重新书写折断代码是这样的：

(function(a){    var a;    a = function(){};    console.log(a); // function a(){}    a = 10;    console.log(a) // 10}(100))

5 看下面代码的输出结果

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

答案是3， 3，原因是setTimeout是一个异步函数（click）一样，会将里面的函数排在队列默认，等待for循环执行结束后再执行，此时循环结束i为3， 所以输出两次3

如果没有这个异步函数，比如：

for(var i=1; i<3; i++){    console.log(i);}//1, 2

结果就完全不同了。

当时虽然答对了，也看过相关的东西，但是理解的并不是很透彻，现在好一些。

6 将下面两个数组合并，删除第二项

var array1 = ['a', 'b', 'c'],    array2 = ['d', 'e', 'f'];

答案：

var array3 = array1.concat(array2);array3.splice(1, 1);console.log(array3)

当时答的不错，比现在还好，可能是当时刚刚总结过数组的方法吧

7 用原生代码实现一个无线页面的长按事件

当时根本没有思路，1是不懂怎么长按，2是不知道移动端的点击事件

现在也没怎么做过移动端，所以也不清楚，查了资料，

• touchstart:当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发。
• touchmove:当手指在屏幕上滑动时连续的触发。在这个事件发生期间，调用preventDefault()可阻止滚动。
• touchend:当手指从屏幕上移开时触发。
• touchcancel:当系统停止跟踪触摸时触发。关于此事件的确切触发事件，文档中没有明确说明。

以上事件的event对象上面都存在如下属性：
- touches:表示当前跟踪的触摸操作的Touch对象的数组。
- targetTouches:特定于事件目标的Touch对象的数组。
- changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组

每个Touch对象包含下列属性：
- clientX:触摸目标在视口中的X坐标。
- clientY:触摸目标在视口中的Y坐标。
- identifier：表示触摸的唯一ID。
- pageX：触摸目标在页面中的x坐标。
- pageY：触摸目标在页面中的y坐标。
- screenX:触摸目标在屏幕中的x坐标。
- screenY:触摸目标在屏幕中的y坐标。
- target:触摸的DOM节点坐标

有了事件之后，利用setTimeOut来执行长按，如果不足这个时间就取消掉这个延时函数，代码如下：

var x = document.getElementById('outer');var timeout =  null;x.addEventListener('touchstart', function(e){    timeout = setTimeout(test, 800)});x.addEventListener('touchend', function(e){    clearTimeout(timeout)});function test(){    alert(3)}

8 浏览器中设计的状态码有哪些？在header中与缓存有关的属性有哪些？

前一个问题还能凑合着答出了200和404， 后一个问题就压根没了解过

HTTP状态码：
1xx ： 这些状态代码表示临时的响应。客户端在收到常规响应之前，应准备接收一个或多个 1xx 响应。
- 100 - 继续。
- 101 - 切换协议。

2xx : 成功，这类状态代码表明服务器成功地接受了客户端请求。
- 200 - 确定。客户端请求已成功。
- 201 - 已创建。
- 202 - 已接受。
- 203 - 非权威性信息。
- 204 - 无内容。
- 205 - 重置内容。
- 206 - 部分内容。
- 207 - 多状态 (WebDAV)。

3xx ： 重定向，客户端浏览器必须采取更多操作来实现请求。例如，浏览器可能不得不请求服务器上的不同的页面，或通过代理服务器重复该请求。
- 301 - 已永久移动
- 302 - 对象已移动。
- 304 - 未修改。
- 307 - 临时重定向。

4xx ： 客户端错误，发生错误，客户端似乎有问题。例如，客户端请求不存在的页面，客户端未提供有效的身份验证信息。
- 400 - 错误的请求。
- 401 - 访问被拒绝。IIS 定义了几个不同的 401 错误，用于指示更为具体的错误原因。这些具体的错误代码在浏览器中显示，但不在 IIS 日志中显示
- 404 - 未找到。
- 405 - 用来访问本页面的 HTTP 谓词不被允许（方法不被允许）
- 406 - 客户端浏览器不接受所请求页面的 MIME 类型。
- 407 - 要求进行代理身份验证。
- 412 - 前提条件失败。
- 413 – 请求实体太大。
- 414 - 请求 URI 太长。
- 415 – 不支持的媒体类型。
- 416 – 无法满足请求的范围。
- 417 – 执行失败。
- 423 – 锁定的错误。

5xx ： 服务器错误 ， 服务器由于遇到错误而不能完成该请求。
- 500 - 内部服务器错误。
- 501 - 页眉值指定了未实现的配置。
- 502 - Web 服务器用作网关或代理服务器时收到了无效响应。
- 503 - 服务不可用。这个错误代码为 IIS 6.0 所专用。
- 504 - 网关超时。
- 505 - HTTP 版本不受支持。

与缓存有关的header：

Reauest hader：
- Cache-Control: max-age=0 以秒为单位
- If-Modified-Since: Mon, 19 Nov 2012 08:38:01 GMT 缓存文件的最后修改时间。
- If-None-Match: “0693f67a67cc1:0” 缓存文件的Etag值
- Cache-Control: no-cache 不使用缓存
- Pragma: no-cache 不使用缓存

Response hader：
- Cache-Control: public 响应被缓存，并且在多用户间共享，
- Cache-Control: private 响应只能作为私有缓存，不能在用户之间共享
- Cache-Control:no-cache 提醒浏览器要从服务器提取文档进行验证
- Cache-Control:no-store 绝对禁止缓存（用于机密，敏感文件）
- Cache-Control: max-age=60 60秒之后缓存过期（相对时间）
- Date: Mon, 19 Nov 2012 08:39:00 GMT 当前response发送的时间
- Expires: Mon, 19 Nov 2012 08:40:01 GMT 缓存过期的时间（绝对时间）
- Last-Modified: Mon, 19 Nov 2012 08:38:01 GMT 服务器端文件的最后修改时间
- ETag: “20b1add7ec1cd1:0” 服务器端文件的Etag值

9 JSON和JSONP的区别

JSON是数据格式，JSON是跨域的手段，全名叫做json with padding，很形象，就是把json对象用符合js语法的形式包裹起来以使其它网站可以请求得到，也就是将json数据封装成js文件；

10 罗列在开发过程中用到的组件包

当时不理解组件包是什么概念，现在想起来可能就是库、插件等吧，像是gulp、less、webpack、react，jQuery， bootstrap， ractive，Normalize.css， moment，lodash， animate.css，差不多也就这些了。

当时竟然只答了一个jQuery，服了自己了。

11 在使用webpack工具开发时，你常用哪些loader？

当时还没用过webpack，只能答没用过，现在可以扯一些了：

• babelLoader，转义ES6/ES7的语法， 转义react
• style-loader : 将css模块作为样式导入JSX文件
• cssLoader， 引入模块化CSS，加上独一无二的hash值
• react-hot-loader : 动态刷新和转义react组件中修改的部分,基于webpack-dev-server插件需先安装,然后在webpack.config.js中引用react-hot-loader
• urlLoader， fileLoader ： 防止超过大小限制的图片无法生成到目标文件夹中
  更多参考这里（http://www.cnblogs.com/hughes5135/p/6891784.html?utm_source=itdadao&utm_medium=referral）

回过头来看，自己确实还是又一些成长和提高的，当然距离有实力的前端工程师还有很长的距离。继续努力吧。