葡萄娱乐官方2016年BAT公司普遍的Web前端面试题整理。前端HR熬夜整理,2017年BAT面试题特别全集,程序员收藏了,只发一样潮!

【转】2016年BAT公司大的Web前端面试题整理

原文http://www.cnblogs.com/jacksoft/p/5647750.html

1.JavaScript凡是一模一样帮派怎么的言语,它有哪些特色?

莫标准答案。

2.JavaScript的数据类型都来什么?

中心数据列:String,boolean,Number,Undefined

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

这就是说问题来了,如何判定有变量是否为数组数据类型?

  • 方一.论断该是否具“数组性质”,如slice()方法。可自己叫该变量定义slice方法,故有时会失效
  • 措施二.obj instanceof Array 于少数IE版本中无科学
  • 方法三.道简单都有漏洞,在ECMA
    Script5挨定义了初方式Array.isArray(),
    保证其兼容性,最好的计如下:  
1
2
3
4
5
6
if(typeof Array.isArray==="undefined")
{
  Array.isArray = function(arg){
        return Object.prototype.toString.call(arg)==="[object Array]"
    }; 
}

3.已知晓ID的Input输入框,希望改文本框的背景颜色,怎么开?(原生JS)

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

4.期待取得到页面被拥有的checkbox怎么开?(原生JS)**

葡萄娱乐官方 1

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

葡萄娱乐官方 2

5.Html风波绑定有几乎种植艺术?

  •  直接以DOM里绑定事件:<div onclick=”test()”></div>
    这种措施叫做原生事件还是性质事件
  •  在JS里通过onclick绑定:xxx.onclick = test
  •  Dom标准通过波添加进行绑定:addEventListener(“click”,test, false)
    //第三只参数为是否支持事件捕捉
  • IE事件:attachEvent(“onclick”,test)

那么问题来了,Javascript的事件流模型都发啊?

  • “事件捕捉”:事件由最无具体的节点先接,然后逐级为下,一直顶最好切实的
  • 目标事件
  • “事件冒泡”:事件开始由于最实际的要素接受,然后逐级提高传播
  • “DOM事件流”:三单等级:事件捕捉,目标等,事件冒泡
  • IE事件流:目标事件及波冒泡

阻碍事件冒泡的方式:

葡萄娱乐官方 3

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

葡萄娱乐官方 4

拦事件之默认行为:

葡萄娱乐官方 5

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

葡萄娱乐官方 6

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) 同类别的体制,后面的会面盖前的。
百度视频部门一道面试题是这般的:

葡萄娱乐官方 7

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

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

葡萄娱乐官方 8

8.什么添加、移除、移动、复制、创建同搜索节点

1)创建新节点

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

createElement()   //创建一个切实的要素

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

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

appendChild()      //添加

removeChild()      //移除

replaceChild()      //替换

insertBefore()      //插入

3)查找

getElementsByTagName()    //通过标签号

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

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

9.所以js写一个刚刚则相当配标签中是否含有一个class(百度面试题)

葡萄娱乐官方 9

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

葡萄娱乐官方 10

10.事变循环绑定,输出结果(考察闭包)

葡萄娱乐官方 11

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

葡萄娱乐官方 12

经闭包封装后的代码:

葡萄娱乐官方 13

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

葡萄娱乐官方 14

闭包我所知的有限独作用:

a.通过闭包可以把有些变量传递出,就是经过闭包可以看函数内部的变量,比如下面的代码:

葡萄娱乐官方 15

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

           return num++;
    } 

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

葡萄娱乐官方 16

通过闭包就可以拜函数内部的片段变量,并且实现数量增长。

b.用闭包可以免空间污染,闭包内部的变量都只好于里边用,这样有效避免与标变量的歪曲。(个人了解)

11.js数组去重。

葡萄娱乐官方 17

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//打印新数组

葡萄娱乐官方 18

12.少独div标签,如何控制标签左边固定,右边自适应,左边div标签的增幅为100px(滴滴面试题)

葡萄娱乐官方 19

//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;}

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

葡萄娱乐官方 20

滴滴面试起新咨询我,现在来并排的老三单Div框,如何贯彻三只div都起适应,我当下便不灵了,这个考察之是display:table的利用

葡萄娱乐官方 21

<!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>

葡萄娱乐官方 22

13.兑现一个函数clone,可以本着JavaScript中的5栽要的数据类型(包括Number、String、Object、Array、Boolean)进行价值复制

  • 考察点1:对于核心数据类和援数据类型在内存中存放的是价值还是指针这同一区分是否清楚
  • 考察点2:是否知情怎么样判断一个变量是呀种的
  • 考察点3:递归算法的计划

葡萄娱乐官方 23

// 方法一:
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;   
        }   
    }

葡萄娱乐官方 24

14.接续的应用

葡萄娱乐官方 25

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();

葡萄娱乐官方 26

15.求评价以下代码并给起改善意见

葡萄娱乐官方 27

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);
      });
   }  
}

葡萄娱乐官方 28

评价:

  •  不应当在if和else语句子被宣示addListener函数,应该提前优先声明,定义全局变量;
  •  不需要动用window.addEventListener或document.all来进行检测浏览器,应该使力量检测;
  •  由于attachEvent在IE中起this指为问题,所以调用它时时索要处理一下

改良如下:

葡萄娱乐官方 29

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;
      }
}

葡萄娱乐官方 30

16.对作用域上下文和this的明,看下列代码:

葡萄娱乐官方 31

var User = {
  count: 1,

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

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

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

 

 

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前端课程’关注后重操旧业‘给我资料’可以取一模仿完整的学视频