2017.02.18 这一周的面试

这一周又参加了几个面试，周二的时候是时速云，周三的时候是mico，周四是有田，周五本来还有一个，但是因为各种原因，没有参加。

这几个面试，除了有田明确的表示已经招到了一个全栈工程师不需要我之外，剩下的几个都没有回音，但是我估计也是没戏。除此之外，在拉钩和boss直聘上也是被拒一大堆，一般是要聊聊，但是亮出我没有经验的绝活之后，就都被委婉的拒绝了。

其实有田还是我比较想去的，虽然公司很小，业务发展我也不是特别看好，但是工作比较基础，我上手容易一点，感觉聊得还可以，但是无奈，还是能力差，没有成功。如此初级的岗位，能不能实现，实在也是挺受挫的。

目前下周约了一个面试，爱奇艺 ，估计也是为了凑人数。不准备这样投简历，白扯，加紧学习进度吧。

总结一下遇到的问题：

1 对于闭包的理解

闭包的目的有两个：①从外部得到函数内部的局部变量②让这些局部变量的值始终存在内存当中

function f1(){    var n=999;    function f2(){        alert(n);//获得f1的内部变量    }    return f2;}f1()();//f1()返回值是f2,需要对f2再次引用

闭包的定义：闭包(closure)是能读取他函数内部变量的函数（即定义在函数内部的函数），上面的例子中f2就是一个闭包，f2在f1内部需要作为返回值被输出。在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

f1()()的引用相当于一个全局变量，所以f2式中存在于全局变量中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。

使用闭包要注意：变量式中存在于内存中，内存消耗大。

思考题：

var name = "The Window";var object = {    name : "My Object",    getNameFunc : function(){        return function(){            return this.name;        };    }};alert(object.getNameFunc()());//结果 The Window

由于this始终表示对调用者的引用，object.getNameFunc()的返回值是object对象内部的匿名函数，这个匿名函数的调用者是window，所以this的指向就是window，最后最后一句相当于打印的就是window.name，结果是The Window

var name = "The Window";var object = {    name : "My Object",    getNameFunc : function(){        var that = this;        return function(){            return that.name;        };    }};alert(object.getNameFunc()());//结果My Object

that是对象内部的this的值，所以结果是My Object

2 flex布局的注意事项

1. Flex布局以后，子元素的float、clear和vertical-align属性将失效
2. flex内部的子元素（除了position:absolute或fixed）无论是display:block或者display:inline，都成为了伸缩项目
3. android浏览器4.4之前对于flex布局支持不好
4. flex-shrink属性用于设置或检索弹性盒的收缩比率，默认为1。不允许为负值，flex-shrink值为0时表示不收缩，保持自身
5. PC兼容性相对较差，IE要10，甚至11以上才有很好的兼容

3 函数式编程

函数式编程是一种编程模型，他将计算机运算看做是数学中函数的计算，并且避免了状态以及变量的概念。

4 递归

递归函数即自调用函数，在函数体内部直接或间接地自己调用自己，即函数的嵌套调用是函数本身。例如，下面的程序为求n!：

long fact(int n)     　　　　{     　　　　　if(n==1)     　　　　　return 1；     　　　　　return fact(n-1)*n

5 ios和Android兼容性

• 1 html5提供了自动调用拨号的标签，只要在a标签的href中添加tel:就可以了。
• 2 长时间按住页面出现闪退

element {  -webkit-touch-callout:none;}

• 3 iphone及ipad下输入框默认内阴影

Element{  -webkit-appearance:none;}

• 4 启动画面：iOS下页面启动加载时显示的画面图片，避免加载时的白屏。

<link rel="apple-touch-startup-image"href="start.png"/>

• 5 IOS键盘字母输入，默认首字母大写。解决方案，设置如下属性

<input type="text"autocapitalize="off"/>

6 rem

rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算

7 angular js

AngularJS是一个 MV* 框架，最适于开发客户端的单页面应用。它不是个功能库，而是用来开发动态网页的框架。它专注于扩展HTML的功能，提供动态数据绑定（data binding），而且它能跟其它框架（如jQuery）合作融洽。

8 轮播图工具swipe.js

swipe.js是一个轻量级的移动滑动组件，支持触摸移动，支持响应式页面。

http://www.cnblogs.com/youmeng/p/3376353.html

9 ES6的新特性

1. let定义块级作用域的变量，const声明不能改变的常量
2. class+extexnd+super

class Animal {    constructor(){//consttuctor是构造方法，其中定义的方法和属性是实例对象自己的        this.type = 'animal'//this代表实例对象    }    says(say){//constructor外定义的方法和属性则是所有实例对象可以共享的        console.log(this.type + ' says ' + say)    }}let animal = new Animal()//一个实例对象animal.says('hello') //animal says helloclass Cat extends Animal {//继承class Animal所有的属性和方法    constructor(){        super()//指代父类的this对象，必须调用，以子类获得this对象        this.type = 'cat'    }}let cat = new Cat()cat.says('hello') //cat says hello

ES6的继承机制，实质是先创造父类的实例对象this（所以必须先调用super方法），然后再用子类的构造函数修改this。
3. arrow function

function(x, y) {     x++;    y--;    return x + y;}//ES5(x, y) => {x++; y--; return x+y}//ES6

arrow function内的this对象，就是定义时所在的对象，而不是使用时所在的对象。并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，它的this是继承外面的，因此内部的this就是外层代码块的this。
4. template string（模版字符串拼接）
们要插入大段的html内容到文档中时，传统的写法非常麻烦

$("#result").append(  "There are <b>" + basket.count + "</b> " +  "items in your basket, " +  "<em>" + basket.onSale +  "</em> are on sale!");

要用一堆的’+’号来连接文本与变量，而使用ES6的新特性模板字符串“后，我们可以直接这么来写：

$("#result").append(`  There are <b>${basket.count}</b> items   in your basket, <em>${basket.onSale}</em>  are on sale!`);

用反引号（\）来标识起始，用${}来引用变量，而且所有的空格和缩进都会被保留在输出之中。
5. default, rest
default意思就是默认值。

调用animal()方法时忘了传参数，传统的做法就是加上这一句type = type || ‘cat’ 来指定默认值。

function animal(type){    type = type || 'cat'      console.log(type)}

ES6的解决方法：

function animal(type=“cat”){    console.log(type)}

rest语法也很简单：

function animals(...types){    console.log(types)}animals('cat', 'dog', 'fish') //["cat", "dog", "fish"]

而如果不用ES6的话，我们则得使用ES5的arguments。

10 bootstraps实现自适应的原理

响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

• 行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
• 使用行来创建列的水平组。
• 内容应该放置在列内，且唯有列可以是行的直接子元素。
• 预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。
• 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。

11 JS获取屏幕尺寸

Javascript:
- 网页可见区域宽： document.body.clientWidth
- 网页可见区域高： document.body.clientHeight
- 网页可见区域宽： document.body.offsetWidth (包括边线的宽)
- 网页可见区域高： document.body.offsetHeight (包括边线的高)
- 网页正文全文宽： document.body.scrollWidth
- 网页正文全文高： document.body.scrollHeight
- 网页被卷去的高： document.body.scrollTop
- 网页被卷去的左： document.body.scrollLeft
- 网页正文部分上： window.screenTop
- 网页正文部分左： window.screenLeft
- 屏幕分辨率的高： window.screen.height
- 屏幕分辨率的宽： window.screen.width
- 屏幕可用工作区高度： window.screen.availHeight
- 屏幕可用工作区宽度： window.screen.availWidth
jQuery

$(document).ready(function(){　　alert($(window).height()); //浏览器当前窗口可视区域高度　　alert($(document).height()); //浏览器当前窗口文档的高度　　alert($(document.body).height());//浏览器当前窗口文档body的高度　　alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin　　alert($(window).width()); //浏览器当前窗口可视区域宽度　　alert($(document).width());//浏览器当前窗口文档对象宽度　　alert($(document.body).width());//浏览器当前窗口文档body的宽度　　alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin　　})

12 H5的新特性

H5：
- 本地存储
- Doctype
- 绘图（canvas+svg）
- 多媒体
- 语义化标签

article：代表一个在文档，页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用。譬如论坛的帖子，博客上的文章，一篇用户的评论，一个互动的widget小工具。

section：元素代表文档中的“节”或“段”，“段”可以是指一篇文章里按照主题的分段；“节”可以是指一个页面里的分组。

aside：素被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名次解释等。（特殊的section）。在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏，

footer&header：页眉或者页脚

nav:元素代表页面的导航链接区域。用于定义页面的主要导航部分。

address：代表区块容器，必须是作为联系信息出现，邮编地址、邮件地址等等,

canvas：标签定义图形，比如图表和其他图像。这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。

video & audio：音频视频

details：标签定义元素的细节，用户可进行查看，或通过点击进行隐藏。与 legend 一起使用，来制作 detail 的标题。该标题对用户是可见的，当在其上点击时可打开或关闭 detail。

meter：标签定义度量衡。仅用于已知最大和最小值的度量。必须定义度量的范围，既可以在元素的文本中，也可以在 min/max 属性中定义。
通信websocket：WebSocket API最伟大之处在于服务器和客户端可以在给定的时间范围内的任意时刻，相互推送信息。WebSocket服务器和客户端可以彼此相互推送信息，允许跨域通信。解决了HTTP请求无法长久连接的问题。仅仅通过客户端和服务器的一次握手二者之间就建立了一个稳定的双向通道，省略了大量的无是指意义的头信息，节省了带宽。服务器可以自主向客户端推送信息，而不是非得等大搜客户端进行请求后才返回信息。

13 C3的新特性

• 圆角，阴影
• 媒体查询
• 旋转
• rgba
• nthchild等选择器
• min-width,min-height

14 HTML的lang属性

为元素指定lang属性，有助于语言合成工具与翻译软件确定语言，英文是en，中文是zh

15 HTML的书写顺序

class–id–name–data-*–src,href,for–title,alt–role

16 尽量避免使用JS生成标签，会减低性能

17 CSS书写顺序

positioning–box model–typographic(排版)–visual

18 less的嵌套要谨慎使用，只有在必须将样式显示在父元素内时，并且有多个需要嵌套的元素时才使用

19 js对象的拷贝

• 1 数组的浅拷贝

var array=[1,3,5];var array_new=array;console.log(array_new);//[1,3,5]array_new[0]=7;console.log(array);//[7,3,5]

浅拷贝更改其中一个，其他都会随之改变，可以理解为知识复制了一个指针给新的数组；

• 2 数组的深拷贝

方法①：.slice(a,b)方法，复制大于等于a，小于b的数组项目

arrayObject.slice(start,end)，返回一个新的数组。

start必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。

var array=[1,3,5];var array_new=array.slice(0,2);console.log(array_new);//[1,3]array_new[0]=7;console.log(array);//[1,3,5]

方法②：a.concat(b)，该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。将b连接到a后面，返回一个新的数组。

var array=[1,3,5];var array_new=array.concat();console.log(array_new);//[1,3,5]array_new[0]=7;console.log(array);//[1,3,5]

• 3 对象的浅拷贝，与数组的浅拷贝相同

var obj={    name:"zh",    age:23};var obj_new=obj;console.log(obj_new);//{name: "zh", age: 23}obj_new.name="joe";console.log(obj);//{name: "zh", age: 23}

• 4 对象的另一种浅拷贝：把对象的属性遍历一遍，赋给一个新的对象。

如果一个对象中的所有属性值都是简单的值类型，要复制它很简单

function easyCopy(obj){    var new_obj={};    for(var i in obj){        new_obj[i]=obj[i];    }    return new_obj;}var obj={    name:"zh",    age:23};var obj_new=easyCopy(obj);console.log(obj_new)//{name: "zh", age: 23}

但是，这样的拷贝有一个问题。那就是，如果父对象的属性等于数组或另一个对象，那么实际上，子对象获得的只是一个内存地址，而不是真正拷贝，因此存在父对象被篡改的可能。这样只是拷贝了基本类型的数据，也属于浅拷贝。

• 5 对象的深拷贝

所谓”深拷贝”，就是能够实现真正意义上的数组和对象的拷贝。它的实现并不难，只要递归调用”浅拷贝”就行了。

function deepCopy(p, c) {　　　　var c = c || {};　　　　for (var i in p) {　　　　　　if (typeof p[i] === 'object') {　　　　　　　　c[i] = (p[i].constructor === Array) ? [] : {};　　　　　　　　deepCopy(p[i], c[i]);　　　　　　} else {　　　　　　　　　c[i] = p[i];　　　　　　}　　　　}　　　　return c;　　}

也可以使用

• 6 当对象中不包含方法时，可以使用JSON对象的方法进行复制

var obj={    name:"zh",    age:[1,2,3]};var obj_new=JSON.parse(JSON.stringify(obj));console.log(obj_new);//{name: "zh", age: 23}obj_new.name="sb";console.log(obj_new);//{name: "sb", age: 23}console.log(obj);//{name: "zh", age: 23}

parse用于从一个字符串中解析出json对象，stringify()用于从一个对象解析出字符串

• 7 使用jQuery的extend方法

jQuery.extend( [deep], target, object1 [, objectN ] )

在默认情况下，通过$.extend()合并操作不是递归的（浅拷贝）;如果第一个对象的属性本身是一个对象或数组，那么它将完全用第二个对象相同的key重写一个属性。这些值不会被合并。然而，如果将 true 作为该函数的第一个参数，那么会在对象上进行递归的合并（深拷贝）。

浅拷贝（false 默认）：如果第二个参数对象有的属性第一个参数对象也有，那么不会进行相同参数内部的比较，直接将第一个对象的相同参数覆盖。

深拷贝（true）：如果第二个参数对象有的属性第一个参数对象也有，还要继续在这个相同的参数向下一层找，比较相同参数的对象中是否还有不一样的属性，如果有，将其继承到第一个对象，如果没有，则覆盖。

浅复制

var obj={    name:"zh",    age:[1,2,3]};var obj_new={};$.extend(obj_new,obj);console.log(obj_new);obj_new.age[0]="sb";console.log(obj.age[0]);//sb

深复制

var obj={    name:"zh",    age:[1,2,3]};var obj_new={};$.extend(true,obj_new,obj);console.log(obj_new);obj_new.age[0]="sb";console.log(obj.age[0]);//1

20 响应式布局应该注意

• 1 头部添加meta：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, minimal-ui">//让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求，但让viewport的宽度等于设备的宽度，这个应该是大家都想要的效果，如果你不这样的设定的话，那就会使用那个比屏幕宽的默认viewport，也就是说会出现横向滚动条。

view这一元数据属性会指示浏览器以怎样的大小来显示网页才能使其在视口中正确显示。未设置viewport的网页在桌面显示器是以全尺寸方式渲染（或显示），在手机端这个没有设置viewport的网页，会先像桌卖弄浏览器那样渲染页面，然后按比例缩小来适配手机视口。

大多数手机浏览器都会使用980像素这一默认视口尺寸渲染网页。这就导致未优化的网页的元素在手机上会很小，难以辨认。

对于响应式网站，我们不希望手机浏览器渲染页面如果它是显示在980像素宽的桌面显示器一样，我们希望它按移动设备真实的屏幕尺寸来渲染页面，因为我们的网页已经针对小屏幕进行了适应性设计，并不需要缩放。

比如，使用了bootstrap框架之后，对于小于768px的设备认为是超小设备（手机），设置了viewport后手机会按照实际设备宽度进行渲染，使用的样式也是作者意图的超小设备的样式，但是如果不设置viewport手机就会按照980px的宽度采用本不该采用的样式。

采用bootstrap并且设置viewprort的页面

采用bootstrap但未设置viewprort的页面

• 2 很多人常常使用initial-scale=1到非响应式网站上，这会让网站以100%宽度渲染而不会自动缩放，用户需要手动移动页面或者缩放。最差的是和initial-scale=1同时使用user-scalable=no或maximum-scale=1，这将使你的网站不能被缩放——用户不能放大/缩小网页来看到全部的内容。所以，请记住：如果你的网站不是响应式的，请不要使用initial-scale或者禁用缩放。

• 3 min-width和max-width这两个属性很靠谱。通过min-width的设置，我们可以在浏览器窗口或设备屏幕宽度高于这个值的情况下，为页面指定一个特定的样式表；max-width则反之。

• 4 媒体查询：头部添加link，不同屏幕分辨率使用不同的css样式：

<link media="only screen and (min-width: 980px)" rel="stylesheet" type="text/css" href="css/style1.css" /> //pc端样式<link media="only screen and (min-width: 640px) and (max-width:979px)" rel="stylesheet" type="text/css" href="css/style2.css" /> //ipad等中型屏幕的样式<link media="only screen and (min-width: 320px) and (max-width:639px)" rel="stylesheet" type="text/css" href="css/style3.css" /> //移动端样式

或者在同一个css文件里写不同分辨率所适配的样式，如下：

/* 当浏览器的可视区域小于980px */@media screen and (max-width: 980px) {#wrap {width: 90%; margin:0 auto;}#content {width: 60%;padding: 5%;}#sidebar {width: 30%;}#footer {padding: 8% 5%;margin-bottom: 10px;}}

• 5 流体布局（ fluid grids ）：float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。
• 6 模块尺寸尽量使用百分比
• 7 移动优先
• 8 为元素，尤其是图片，指定max-width(或min-width)
• 9 关闭iphone的自动拨打电话功能

element {  -webkit-touch-callout:none;}

• 10 隐藏不重要的内容和数据
• 11 点击区域不限于元素的视觉区域，便于用户点击。同时排版不受限制，可以达到原生App的视觉效果
• 12 相对大小的字体
• 13 不使用绝对宽度：由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。

21 不支持媒体查询怎么办

不支持Media Query, 可以使用media-queries.js或者respond.js来为IE添加Media Query支持。

<!--[if lt IE 9]><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->

22 怎么实现旋转抽奖的代码

• 1 使用css3的旋转属性transform属性来进行旋转。每次点击就旋转一定的度数，在项目中可以用旋转的度数来计算中的奖项。

• 2 使用canvas实现