前端面试碰到过的面试题和笔试题~

17年7月份毕业，然后在3 4月份面试找工作，面试过很多公司，也积累了一些经验，就收集了一些自己面试过程中经常遇到的js问题，包括算法题，还有基础题。然后挺感谢我自己在面试前，做的这些准备，所以让我在成都这个地方毕业就进入了一家大公司并且拿到了不错薪水，作为一个软萌妹纸，对这个工作还是挺满意的了。所以说，万事俱备，不怕找不到好工作的。下面就直接上干货，会结合着代码进行分析。
1、给一个字符串，判定该字符串中是否包含了指定的字符串或直接截取N长度的字符串
思路：
（1）、 indexOf(str) 方法可返回某个指定的字符串值在字符串中首次出现的位置,没有则返回-1
（2）、 substr(start, length) 从start位置截取length长度的字符串
（3）、 substring(start, stop) 从start位置截取到stop位置中间的字符串
代码：

   （1）
        var string = 'abcdefg', str1 = 'bcd'， str2 = 'fre'；

        string.indexOf(str1); // 结果是1  表示str1是string的子字符串，并且返回的是下标位置
        string.indexOf(str2); // 结果是-1 表示str2不是string的子字符串

   （2）  
        var string = 'abcdefg';

        string.substr(2,4); // 结果是cdef  从string的第2个下标开始向后截取4个字符

   （3） 
        var string = 'abcdefg';

        string.substring(2,4); // 结果是cde 从下标2的位置向后截取到下标为4的位置，截取数目为4-2=2个

2、实现字符串反转的函数，比如将abcdefg翻转为gfedcba
思路：
（1）、将字符串split()转为数组，reverse()倒叙之后，再join()拼接为字符串
（2）、借助中间变量和for循环，把最后一个存储为中间变量的第一个数据，倒数第二个数据是第二个数据，以此类推，第一个数据变为最后一个
（3）、利用折半的方法，直接将第一个和最后一个进行调换，第二个和倒数第二个进行调换
代码：

（1）
    var string = 'abcdefg';

    string.split('').reverse().join(''); // 结果是gfedcba

（2）
    function reverseStr (str) {
        var temp = '';
            for (var i = 0; i < str.length; i ++) {
                temp += str.charAt(str.length - i - 1);
            }
        return temp;
    }
（3）
    function reverseStr(str) {
        var arr = str.split('');
        for (var i = 0; i< arr.length / 2; i ++) {
            var temp = arr[i];
            arr[i] = arr[arr.length - i - 1];
            arr[arr.length - i -1] = temp;
        }
        return arr.join('');
    }

3、如果给10000个li添加点击事件，应该怎么做更加合理
思路：事件委托原理，即事件代理机制，也就是说，同一类的事件，可以委托给父级，只指定一个事件处理程序，就可以管理某一类型的所有事件。

代码：

<ul id="entrust"> 
    <li>测试1</li>
    <li>测试2</li>
    <li>测试3</li>
    <li>测试4</li>
    <li>测试5</li>
</ul>

function entrustParent(parent, type) { // 事件委托 type表示事件类型
  parent.addEventListener(type, function(evt) {
    var e = evt || window.evt; 
    console.log(e.target.innerHTML);
  });
}

entrust(document.getElementById('entrust'), 'click');

4、数组去重
思路：
（1）、原数组先排序，然后for循环一次，将i位置的元素与i+1位置的元素进行对比
（2）、创建一个新数组存放结果，创建一个空对象作为中间比对项目，for循环时，取一个元素与对象属性做对比，此时利用的是对象属性的唯一性
代码：

方法一：
var arr = [1,4,2,5,6,7,3,2,5,7,2,6,43,23,54,65,43,23,4,23,54,42,54,65,25,2,4,254];
function delRepeatNum(arr) {
  var str = arr.sort(), temp = [];
  for (var i = 0; i < str.length; i ++) {
    if (str[i] !== str[i+1]) {
      temp.push(str[i]);
    }
  }
  return temp;
}
console.log(delRepeatNum(arr)); // 结果是 [1, 2, 23, 25, 254, 3, 4, 42, 43, 5, 54, 6, 65, 7]
// 可能比较奇怪，因为sort()排序是按照字符编码来排序的,所以需要对sort限定一下排序规则
sort(function(a, b) { return a-b;}); // 从小到大排序
sort(function(a, b) { return b-a;}); // 从大到小排序 

方法二：
function DelRepeatNum(arr) {
  var temp = {}, result = [];
  for(var i = 0; i < arr.length; i ++) {
    if (!temp[arr[i]]) {
      temp[arr[i]] = arr[i];
      result.push(arr[i]);
    }
  }
  return result;
}

5、事件绑定的方法，至少回答三种
思路：首先弄明白，事件是什么，事件模型是什么，事件模型有哪些，事件绑定又是什么，事件绑定的方法有哪些？
回答：
（1）、事件，是javascript的一部分，事件使得客户端的 JavaScript 有机会被激活，并得以运行。在一个 Web 页面装载之后，运行脚本的唯一方式，就是响应系统或者用户的动作。可以想象一下，点击按钮，这就是一个事件。当我们与浏览器中 Web 页面进行某些类型的交互时，事件就发生了。
（2）、事件模型，在《JavaScript权威指南》这本书中有提到过，事件模型有4类，分别是
a. 原始事件模型:属性事件处理模式
b. 标准事件模型:DOM2对其作了标准化
c. IE事件模型(IE5.5\IE6)
d. Netscape事件模型

原始事件，也就是基本事件处理，我们通常使用的也就是这种， 其事件类型:分为”输入事件(如onclicki)”和”语义事件(如onsubmit)”；

DOM2事件模型，其复杂程度较高，它的事件传播过程如下，1）先由document向目标对象传播称之为：捕捉阶段；2）目标对象的事件处理程序运行，3）从目标对象向document起泡；

IE事件模型，其主要就是传播过程只起泡，不捕捉，阻止冒方法是event.cancelBubble = true;

Netscape4事件模型,主要就是只捕捉不起泡。
（3）、事件绑定，是指构造一个响应系统或者用户动作的 HTML 元素的过程。
（4）、事件绑定方法：
a. 绑定元素属性
最简单和向后兼容性最好的事件绑定方法是把事件绑定到元素标识的属性,事件属性名称由事件类型外加一个“on”前缀构成,比如onClick, onChange.

<button id="btn" onClick="clickMe()">click me</button>

function clickMe() {
  alert('测试');
}

b. 绑定对象属性
把脚本语句的方式把事件绑定到对象上，而不是绑定到元素标识的属性上；每一个负责事件响应的元素对象都为自己能够识别的事件设置了相应的属性；对象属性名称是元素标识属性的小写形式，比如onclick。

<button id="btn">click me</button>

function clickMe() {
  alert('测试');
}

document.getElementById('btn').onclick = clickMe;

c. 使用 IE5/Windows 的 attachEvent() 方法

<button id="btn">click me</button>

function clickMe() {
  alert('测试');
}

document.getElementById('btn').attachevent('onclick', clickMe);

d. 使用 W3C DOM 的 addEventListener() 方法

<button id="btn">click me</button>

function clickMe() {
  alert('测试');
}

document.getElementById('btn').addEventListener('click', clickMe);

6、如何阻止冒泡事件和默认，兼容多个浏览器
思路：我们知道，IE浏览器和其他浏览器阻止的方式不一样，cancelBubble用于ie的阻止冒泡事件，event.stopPropagation（）用于firefox和chrome等其他浏览器。event.preventDefault()方法是用于取消事件的默认行为，但此方法并不被ie支持，在ie下需要用window.event.returnValue = false; 来实现。

// 冒泡事件
function stopBubble(e) {
  if (e && e.stopPropagation) {
    e.stopPropagation();
  } else {
    window.event.cancelBubble = true;
  }
}
// 默认事件
function stopDefault(e) {
  if (e && e.preventDefault) {
    e.preventDefault();
  } else {
    window.event.returnValue = false;
  }
}

但是现在event.cancelBubble在新版本chrome,opera浏览器中已经支持，就差moz了。
7、什么是响应式布局，具体怎么实现呢？
答案：所谓的响应式，其实就是一个网站能够兼容多个终端–而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。坦白的说，就是同一个网页，展示在不同的设备上，都能够呈现出比较完美的效果。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，能够快捷解决多设备显示适应问题。
如何实现响应式，用css3就可以实现。css3，有一个新属性，媒体查询（@media）属性，用这个属性，可以根据不同的屏幕分辨率来展示不同的页面效果。具体属性实现可以参考w3c网站。
8、用js写一个计算当年还剩多少时间的倒计时程序
思路：其实就是对Date 属性的一些简单操作，然后需要每隔一秒执行一次就OK了，直接上代码。

function timeCounter() {
  var date = new Date();
  var year = date.getFullYear();
  var date2 = new Date(year,12,31,23,59,59);
  var time = (date2-date)/1000;
  var day = Math.floor(time/(24*60*60));
  var hour = Math.floor(time%(24*60*60)/(60*60));
  var minute = Math.floor(time%(24*60*60)%(60*60)/60);
  var second = Math.floor(time%(24*60*60)%(60*60)%60);
  var str = year + '年还剩' + day + '天' + hour + '时' + minute + '分' + second + '秒';
  console.log(str);
}

setInterval(timeCounter, 1000);