2016年BAT公司常见的Web前端面试题整理

1.JavaScript是一门什么样的语言，它有哪些特点？

没有标准答案。

2.JavaScript的数据类型都有什么？

基本数据类型：String,boolean,Number,Undefined

引用数据类型：Object(Array,Date,RegExp,Function,Null)

那么问题来了，如何判断某变量是否为数组数据类型？

• 方法一.判断其是否具有“数组性质”，如slice()方法。可自己给该变量定义slice方法，故有时会失效
• 方法二.obj instanceof Array 在某些IE版本中不正确
• 方法三.方法一二皆有漏洞，在ECMA Script5中定义了新方法Array.isArray(), 保证其兼容性，最好的方法如下：　　

if(typeof Array.isArray==="undefined")
{
  Array.isArray = function(arg){
        return Object.prototype.toString.call(arg)==="[object Array]"
    };
}

3.已知ID的Input输入框，希望改变文本框的背景颜色，怎么做？(原生JS)

document.getElementById("id").style.backgroundColor = "red";

4.希望获取到页面中所有的checkbox怎么做？(原生JS)

var domList = document.getElementsByTagName(‘input’)
var checkBoxList = [];
var len = domList.length;　　//缓存到局部变量
while (len--) {　　//使用while的效率会比for循环更高
　　if (domList[len].type == ‘checkbox’) {
    　　checkBoxList.push(domList[len]);
　　}
}

5.Html事件绑定有几种方式？

• 直接在DOM里绑定事件：<div onclick=”test()”></div> 这种方式称为原生事件或者属性事件
• 在JS里通过onclick绑定：xxx.onclick = test
• Dom标准通过事件添加进行绑定：addEventListener("click",test, false) //第三个参数为是否支持事件捕捉
• IE事件：attachEvent("onclick",test)

那么问题来了，Javascript的事件流模型都有什么？

• “事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的
• 目标事件
• “事件冒泡”：事件开始由最具体的元素接受，然后逐级向上传播
• “DOM事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡
• IE事件流：目标事件和事件冒泡

阻止事件冒泡的方式：

stopPropagation : function(ev) {
      if (ev.stopPropagation) {
            ev.stopPropagation();
      } else {
            ev.cancelBubble = true;
      }
},

阻止事件的默认行为：

preventDefault : function(event) {
            if (event.preventDefault) {
                event.preventDefault();
            } else {
                event.returnValue = false;
            }
}

6.看下列代码，将会输出什么?(变量声明提升)

var a=1;
function a(){}
alert(a);//打印1

上面的代码经过变量提升后，等价于下面的代码

var a;function a(){}
a = 1;//只把声明提到最前面，赋值a=1;保留，函数声明也会提到最前面
alert(a);//打印

再看下面的输出结果：

var a=1;
var a=function (){}
alert(a);//打印a函数

此时打印a函数，不会打印1，因为下面是一个函数表达式，跟变量声明一样，只会把var a;提升到最前面，a=function(){}保留，会覆盖前面的a=1;因此打印函数。

此题目，我再百度面试的时候问到过。

7.掌握样式的优先级。
!important > style(内联) > Id(权重100) > class(权重10) > 标签（权重1） 同类别的样式，后面的会覆盖前面的。
百度视频部门一道面试题是这样的：

<style>
.red{color:red;}
.blue{color:blue;}
</style>

<p class="blue red"></p>
<!-- 此时显示蓝色，样式的显示跟class里面的先后顺序无关，都是类选择器，后面的会覆盖前面的，因此蓝色覆盖红色的 -->

8.怎样添加、移除、移动、复制、创建和查找节点

1）创建新节点

createDocumentFragment()    //创建一个DOM片段

createElement()   //创建一个具体的元素

createTextNode()   //创建一个文本节点

2）添加、移除、替换、插入

appendChild()      //添加

removeChild()      //移除

replaceChild()      //替换

insertBefore()      //插入

3）查找

getElementsByTagName()    //通过标签名称

getElementsByName()     //通过元素的Name属性的值

getElementById()        //通过元素Id，唯一性

9.用js写一个正则匹配标签中是否包含一个class(百度面试题)

function hasClassName(id,name){
    var cls = document.getElementById(id).className;
    var reg = new RegExp("(^|\\s)"+name+"($|\\s)","g")
    return reg.test(cls);
}
//正则的意思是：以名字开头或者以空格开头，最终以名字结束或者以空格结束。

10.事件循环绑定，输出结果（考察闭包）

var list = document.getElementsByTagName("a");//假设有10个a
for(var i=0;i<list.length;i++){
    list[i].onclick = function(i){
        return function(){
            alert(i);
        }
    }
}
//最终点击的时候，都打印10

通过闭包封装后的代码：

var list = document.getElementsByTagName("a");
for(var i=0;i<list.length;i++){
    list[i].onclick = (function(i){
        return function(){
            alert(i);
        }
    })(i)
}
//打印对应的索引

闭包我所知道的两个作用：

a.通过闭包可以把局部变量传递出来，就是通过闭包可以访问函数内部的变量，比如下面的代码：

function count(){
     var num = 1;
     return function(){

           return num++;
    } 

}
var countFn = count();
countFn();//输出1
countFn();//输出2
countFn();//输出3
countFn();//输出4

通过闭包就可以访问函数内部的局部变量，并且实现数量累加。

b.使用闭包可以避免空间污染，闭包内部的变量都只能在内部使用，这样有效避免和外部变量的混淆。（个人理解）

11.js数组去重。

var arr = [1,6,3,9,4,9,3,8,2];
var obj = {},newArr = [];
function delRepeat(){
    for(var i=0,j=arr.length;i<j;i++){
        if(!obj[arr[i]]){
            newArr.push(arr[i]);
            obj[arr[i]] = arr[i];
        }
    }
}

delRepeat();//删掉重复项
newArr//打印新数组

12.两个div标签，如何控制标签左边固定，右边自适应，左边div标签的宽度为100px（滴滴面试题）

//a. 左边左浮动，右边加个overflow:hidden;
       #lt{ float: left;width:100px; background: #ff0;}
       #rt{ overflow: hidden; background: #f0f;}
//b.左边左浮动，右边加个margin-left;
       #lt{ float: left; width:100px; background: #ff0;}

//以上两种方式都可以实现

滴滴面试起初问我，现在有并排的三个Div框，如何实现三个div都自适应，我当时就懵了，这个考察的是display:table的使用

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8"/>
    <title>等高布局</title>
    <style>
        html {
            font-size: 10px;;
        }
        body {
            font-size: 1.4rem;
        }
        .box {
            background-color: rgba(200,200,200,0.7);
            margin: 0 1rem;
            width: 33.33%;
            padding: 1rem;
        }
        .box:nth-child(2) {
            height: 5rem;
            background-color: rgba(200,210,230,0.7);
        }
        .accordant {
            display: table-row;
        }
        .table {
            width: 100%;
            display: table;
        }
        .table .accordant {
            display: table-row;
        }
        .table .accordant .box {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="table">
    <div class="accordant">
        <div class="box">
            <p>这是一个 Figure</p>
        </div>
        <div class="box">
            <p>这是一个 Figure</p>
        </div>
        <div class="box">
            <p>这是一个 Figure</p>
        </div>
    </div>
</div>
</body>
</html>

13.实现一个函数clone，可以对JavaScript中的5种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值复制

• 考察点1：对于基本数据类型和引用数据类型在内存中存放的是值还是指针这一区别是否清楚
• 考察点2：是否知道如何判断一个变量是什么类型的
• 考察点3：递归算法的设计

// 方法一：
Object.prototype.clone = function(){
        var o = this.constructor === Array ? [] : {};
        for(var e in this){
                o[e] = typeof this[e] === "object" ? this[e].clone() : this[e];
        }
        return o;
}

    //方法二：
    function clone(Obj) {
        var buf;
        if (Obj instanceof Array) {
            buf = [];                    //创建一个空的数组
            var i = Obj.length;
            while (i--) {
                buf[i] = clone(Obj[i]);
            }
            return buf;
        }else if (Obj instanceof Object){
            buf = {};                   //创建一个空对象
            for (var k in Obj) {           //为这个对象添加新的属性
                buf[k] = clone(Obj[k]);
            }
            return buf;
        }else{                         //普通变量直接赋值
            return Obj;
        }
    }

14.继承的使用

function Animal(name) {
    this.name = name;
    this.showName = function() {
        console.log(this.name);
    };
}
//第一种继承方式
function Cat(name) {
    Animal.call(this, name);//此处注意，call不能继承对象原型上的方法
}
//第二种继承方式
Cat.prototype = new Animal();//继承所有属性和方法

function Dog(name) {
    Animal.apply(this, name);//同Call一样
}
Dog.prototype = new Animal();

15.请评价以下代码并给出改进意见

if(window.addEventListener){
    var addListener = function(el,type,listener,useCapture){
        el.addEventListener(type,listener,useCapture);
  };
}
else if(document.all){
    var addListener = function(el,type,listener){
        el.attachEvent("on"+type,function(){
          listener.apply(el);
      });
   }
}

评价：

• 　不应该在if和else语句中声明addListener函数，应该提前先声明，定义全局变量；
• 　不需要使用window.addEventListener或document.all来进行检测浏览器，应该使用能力检测；
• 　由于attachEvent在IE中有this指向问题，所以调用它时需要处理一下

改进如下：

function addEvent(elem, type, handler){
　　if(elem.addEventListener){
　　　　elem.addEventListener(type, handler, false);
　　}else if(elem.attachEvent){
           elem.attachEvent('on' + type, handler);
　　}else{
　　     elem['on' + type] = handler;
      }
}

16.对作用域上下文和this的理解，看下列代码：

var User = {
  count: 1,

  getCount: function() {
    return this.count;
  }
};

console.log(User.getCount());  //

var func = User.getCount;
console.log(func());  // undefined