前端面试整理

说好的梅雨季呢，面试回来汗如雨下呀TAT… 在哪里跌倒，就在哪里爬起来。本文对于今天面试的问题，做下整理。

1.`box-sizing`都有哪些属性

box-sizing属性有content-box和border-box。我知道是有三个属性的，但是最后一个怎么也想不起来了，回来以后赶紧翻了一下，inherit结果是你啊，其实继承属性不讲也没关系的吧。泪奔TuT…

2.`HTML5`和`CSS3`的新特性

H5：更好的语义化标签、新增api特性、webstorage、websocket… C3：更多伪类/伪元素选择器、圆角、文字/元素阴影、线性渐变、2/3D旋转、缩放、动画…

3.各大浏览器内核

Webkit：Chrome、Sarafi Gecko：Firefox trident：IE 8-11

4.聊聊本地存储和缓存

cookie用于客户端和服务器端信息交互。 WebStorage包括localStorage、sessionStorage和globalStorage。 WebStorage相比cookie储存空间更大，接口更多，可操控性更强。 sessionStorage在会话结束后消失，而localStorage则会一直保留，除非手动删除或修改。 globalStorage和localStorage用法大致相同，不过一般我们使用localStorage。

5.说一下你了解的闭包

区别于可读取的变量作用域，JavaScript变量的作用域分为全局变量和局部变量。函数内部可以访问全局变量，但是函数外部是无法访问函数内部的变量的。
function a包裹function b，function b就是一个闭包，也可以说function b是function a的闭包。这时b可以访问a的作用域变量，但是反之则不行。
如果要访问闭包内的变量，只需要把闭包中的变量作为返回值return出去即可。
使用闭包的好处是让我们可以读取到函数内部的变量，并且在外部访问内部变量的时候，始终保存在内存中。
随之带来的坏处是在其调用完毕后不会被垃圾回收机制所回收，导致更多内存被消耗，造成性能问题和内存泄露。不过也有解决办法，在函数结束前将所调用变量删除就可以了。

6.常用的自动化工具

npm、webpack、Bower

7.数组去重，比如`['a','b','c','a','b','c']`

我的回答是对比法。循环每个元素，与除自身外的所有元素对比，如果没有重复，就把这个元素放到新的数组中。上代码：

Array.prototype.unique = function () {
  var res = [this[0]];
  for (var i = 1; i < this.length; i++) {
    var repeat = false;
    for (var j = 0; j < res.length; j++) {
      if (this[i] == res[j]) {
        repeat = true;
        break;
      }
    }
    if (!repeat) {
      res.push(this[i]);
    }
  }
  return res;
}

var arr = [1, 2, 3, 'a', 'b', 'c', 1, 2, 3, 'a', 'b', 'c']
console.log(arr.unique()); //[ 1, 2, 3, 'a', 'b', 'c' ]

然后面试的小哥哥说：如果有100个元素1000个元素呢？这样做性能太差了。是哦，数组是我弱项，每次被问到数组的问题我都要扑街。

回来以后，找了其他方法，排序对比法： 1.先用sort()对数组进行排序，这样相同的元素会排在相邻的位置。 2.把排序后的第一位放进新数组，然后与第二位开始对比，如果对比结果不同，就把第二位放入新数组中， 3.再用第二位和第三位对比，以此类推。这样性能就高出很多，差不多是这个样子：

Array.prototype.unique = function () {
  this.sort();
  var res = [this[0]];
  for (var i = 1; i < this.length; i++) {
    if (this[i] !== res[res.length - 1]) {
      res.push(this[i]);
    }
  }
  return res;
}

var arr = [1, 2, 3, 'a', 'b', 'c', 1, 2, 3, 'a', 'b', 'c']
console.log(arr.unique()); //[ 1, 2, 3, 'a', 'b', 'c' ]

还有一个方法有点意思：对象对比法 1.先创建一个存放结果的数组。 2.创建一个空对象。 3.循环数组元素，每次都与空对象对比，如果这个元素不重复，则把他放到结果数组中，同时把这个元素对位对象的一个属性，并赋值为1，存入第2步建立的对象中。 4.每次从原数组中循环出来的元素，到对象中去访问这个属性，如果能访问到，则说明重复。看代码：

Array.prototype.unique = function () {
  var res = [];
  var json = {};
  for (var i = 0; i < this.length; i++) {
    if (!json[this[i]]) {
      res.push(this[i]);
      json[this[i]] = 1;
    }
  }
  return res;
}

var arr = [1, 2, 3, 'a', 'b', 'c', 1, 2, 3, 'a', 'b', 'c']
console.log(arr.unique()); //[ 1, 2, 3, 'a', 'b', 'c' ]

确实第三种方法明显快了很多。

8.总结

成也Array，败也Array。每次都在数组上摔跟头，该长点心了呦。晚些时候好好补一番Array笔记。

1.box-sizing都有哪些属性

2.HTML5和CSS3的新特性