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(), 保证其兼容性，最好的方法如下：

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

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

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

直接在DOM里绑定事件：

这种方式称为原生事件或者属性事件

在JS里通过onclick绑定：xxx.onclick = test

Dom标准通过事件添加进行绑定：addEventListener("click",test, false) //第三个参数为是否支持事件捕捉

IE事件：attachEvent("onclick",test)

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

“事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的

目标事件

“事件冒泡”：事件开始由最具体的元素接受，然后逐级向上传播

“DOM事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡

IE事件流：目标事件和事件冒泡

阻止事件冒泡的方式：

阻止事件的默认行为：

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

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

再看下面的输出结果：

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

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

7.掌握样式的优先级。

!important > style(内联) > Id(权重100) > class(权重10) > 标签（权重1） 同类别的样式，后面的会覆盖前面的。

百度视频部门一道面试题是这样的：

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

1）创建新节点

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

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

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

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

appendChild() //添加

removeChild() //移除

replaceChild() //替换

insertBefore() //插入

3）查找

getElementsByTagName() //通过标签名称

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

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

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

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

通过闭包封装后的代码：

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

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

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

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

11.js数组去重。

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

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

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

考察点1：对于基本数据类型和引用数据类型在内存中存放的是值还是指针这一区别是否清楚

考察点2：是否知道如何判断一个变量是什么类型的

考察点3：递归算法的设计

14.继承的使用

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

评价：

不应该在if和else语句中声明addListener函数，应该提前先声明，定义全局变量；

不需要使用window.addEventListener或document.all来进行检测浏览器，应该使用能力检测；

由于attachEvent在IE中有this指向问题，所以调用它时需要处理一下

改进如下：

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

推荐下我自己的前端群：595549645，不管你是小白还是大牛，小编我都挺欢迎，不定期分享干货，包括我自己整理的一份2017最新的前端资料和零基础入门教程，欢迎初学和进阶中的小伙伴。

如果想看到更加系统的文章和学习方法经验可以关注我的微信公众号：‘web前端课程’关注后回复‘给我资料’可以领取一套完整的学习视频