2017年前端面试题整理

Javasript

1.请定义一个方法，传入一个string类型的参数，而后将string的每一个字符间加个空格返回

spacify('hello world') // => 'h e l l o  w o r l d'

function spacify(str) {
  return str.split('').join(' ');
}

先使用split把字符串分割成数组，而后使用join给每一个数组后面添加一个空格而且拼接成字符串

2.如何把这个方法放入 String 对象上面

'hello world'.spacify();

String.prototype.spacify = function(){
  return this.split('').join(' ');
};

3.函数声明和函数表达式的区别

1.函数声明建立的函数能够在定义以前就进行调用,而用函数表达式建立的函数不能在被赋值以前进行调用
 2.出现这个区别的缘由，如今这两种类型在Javascript function hoisting(函数提高）和运行时机（解析时/运行时）上的差别

4.e.target与e.currentTarget的区别

e.curretnTarge是指注册了事件监听器的对象，e.target是指对象里的子对象，实际触发这个事件的对象

5.在另外一个函数中保持this上下文有几种方法？

1.能够将this赋值给另一个变量上（self、_this、that），改变上下文以后继续引用它
2.使用Function.prototype.bind，bind()方法建立一个新的函数, 当被调用时，将其this关键字设置为提供的值，在调用新函数时，在任何提供以前提供一个给定的参数序列。
3.使用箭头函数

6.箭头函数与传统的JavaScript函数主要区别

1.对 this 的关联。函数内置 this 的值，取决于箭头函数在哪儿定义，而非箭头函数执行的上下文环境。
2.new 不可用。箭头函数不能使用 new 关键字来实例化对象，否则会报错。
3.this 不可变。函数内置 this 不可变，在函数体内整个执行环境中为常量。
4.没有arguments对象。更不能经过arguments对象访问传入参数。

7.截取和清空数组

var arr = [1, 2, 3, 4];
arr.length = 2;   //截取，arr = [1, 2];  
arr.length = 0;   //清空，arr will be equal to []

8.获取数组的最大最小值

var numbers = [1, 3, 5, -10];
var maxInNumbers = Math.max.apply(Math, numbers);   //5
var minInNumbers = Math.min.apply(Math, numbers);   //-10

9.Js中的new（）到底作了些什么？

1.建立一个空对象。
2.属性和方法被加入到 this 引用的对象中。
3.新建立的对象由 this 所引用，而且最后隐式的返回 this 。

var obj={};
obj.__proto__=fn.prototype;
fn.call(obj);

10.eval是作什么的？

它的功能是把对应的字符串解析成JS代码并运行；
应该避免使用eval，不安全，很是耗性能（2次，一次解析成js语句，一次执行）。

11.哪些操做会形成内存泄漏？

内存泄漏指任何对象在您再也不拥有或须要它以后仍然存在。
垃圾回收器按期扫描对象，并计算引用了每一个对象的其余对象的数量。若是一个对象的引用数量为 0（没有其余对象引用过该对象），或对该对象的唯一引用是循环的，那么该对象的内存便可回收。
setTimeout 的第一个参数使用字符串而非函数的话，会引起内存泄漏。
闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

12.call() 和 apply() 的区别和做用？

区别：apply()与call()做用没有区别，用法与call()方法稍有区别，就是call()的第二个参数(调用函数使用的参数)，是一个一个传入的；而apply()的第二个参数的值是使用数组的形式传入的
做用：在Javascript中，每一个函数都包含两个非继承而来的方法，call和apply。这两个方法的用途都是在特定的做用域中调用函数，实际上等于设置函数体内的this对象的值。

apply方法接收两个参数，第一个参数是在其中运行函数的做用域，第二个是一个参数数组或者arguments对象。
call方法与apply方法做用相同，第一个参数也相同，区别在于，其他的参数须要逐个列出。

apply(thisArg, argArray);
call(thisArg[,arg1,arg2…]);

是使用call仍是apply要看具体的状况。若是你知道全部参数或者参数的数量很少，可使用call；
若是参数的数量不肯定，或者数量很大，或者你收到的是一个数组或者是个arguments对象，则须要使用apply。

13.什么是闭包，闭包的特性，闭包的优势与缺点？

闭包 是指有权访问另外一个函数做用域中的变量的函数，建立闭包的最多见的方式就是在一个函数内建立另外一个函数，经过另外一个函数访问这个函数的局部变量

1.函数嵌套函数
2.函数内部能够引用外部的参数和变量
3.参数和变量不会被垃圾回收机制回收

优势是能够避免全局变量的污染，变量和方法私有化，不让外部修改这些属性
缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易形成内存泄露

Css

1.清除浮动有几种方式，浮动引发的问题

1.在全部浮动标签后面添加一个空标签，css clear:both 弊端添加了无心义的标签
2.使用overflow给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6
3.使用css伪类before，该方法只适用于非IE浏览器。具体写法可参照如下示例。使用中需注意如下几点。1、该方法中必须为须要清除浮动元素的伪对象中设置 height:0，不然该元素会比实际高出若干像素；
after{
  content:".";
  height:0;
  visibility:hidden;
  display:block;
  clear:both;
}

浮动元素引发的问题：
1.父元素的高度没法被撑开，影响与父元素同级的元素
2.与浮动元素同级的非浮动元素（内联元素）会跟随其后
3.若非第一个元素浮动，则该元素以前的元素也须要浮动，不然会影响页面显示的结构

2.IE 8如下版本的浏览器中的盒模型有什么不一样

IE8如下浏览器的盒模型中定义的元素的宽高不包括padding和border

3.CSS 选择符有哪些？哪些属性能够继承？优先级算法如何计算？

1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul > li）
6.后代选择器（li a）
7.通配符选择器（ * ）
8.属性选择器（a[rel = "external"]）
9.伪类选择器（a: hover, li:nth-child）

可继承的样式： font-size font-family color, text-indent;
不可继承的样式：border padding margin width height ;

!important >  id > class > tag

4.CSS3新增伪类有那些？

p:first-of-type 选择属于其父元素的首个 <p> 元素的每一个 <p> 元素。
p:last-of-type  选择属于其父元素的最后 <p> 元素的每一个 <p> 元素。
p:only-of-type  选择属于其父元素惟一的 <p> 元素的每一个 <p> 元素。
p:only-child    选择属于其父元素的惟一子元素的每一个 <p> 元素。
p:nth-child(2)  选择属于其父元素的第二个子元素的每一个 <p> 元素。
:enabled  :disabled 控制表单控件的禁用状态。
:checked        单选框或复选框被选中。

5.position的值， relative和absolute分别是相对于谁进行定位的？

absolute 
    生成绝对定位的元素， 相对于最近一级的 定位不是 static 的父元素来进行定位。

fixed （老IE不支持）
    生成绝对定位的元素，相对于浏览器窗口进行定位。 

relative 
    生成相对定位的元素，相对于其在普通流中的位置进行定位。 

static  默认值。没有定位，元素出如今正常的流中

6.CSS中 link 和@import 的区别是？

1.link属于HTML标签，而@import是CSS提供的; 
2.页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
3.import只在IE5以上才能识别，而link是HTML标签，无兼容问题; 
4.link方式的样式的权重 高于@import的权重.

7.href与src的区别

1.src 是指向物件的来源地址，是引入。在 img、script、iframe 等元素上使用。
2.href 是超文本引用，指向须要连结的地方，是与该页面有关联的，是引用。在 link和a 等元素上使用。
3.使用区别：src一般用做“拿取”（引入），href 用做 "连结前往"（引用）。

8.什么是盒子模型

一个是由content、padding、border、margin组成的元素就是盒子模型，用来设置元素在网页中的大小和位置。

9.transform属性里面有几种动画效果？（3种便可）

rotate（旋转）  scale（缩放）   translate（位移）

最近面试蛋疼不少都忘的差很少了，先温习到这，但愿对你们有帮助。