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