大旨数据类型,1.JavaScript是一门怎么的言语

【转】二零一四年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
    Script第55中学定义了新格局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.add伊夫ntListener或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

 

 

二零一六年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来开展检验浏览器,应该使用才干检验;

是因为attach伊芙nt在IE中有this指向难点,所以调用它时供给管理一下

校勘如下:

16.对效用域上下文和this的接头,看下列代码:

引入下自家自个儿的前端群:595549645,不管您是小白依然大咖,作者作者都挺招待,不定时共享干货,饱含作者本人收拾的一份2017最新的前端资料和零基础入门教程,款待初学和进级中的小友人。

一旦想看看越来越系统的篇章和读书情势经验得以关心自个儿的微信公众号:‘web前端课程’关怀后回复‘给自身资料’能够提取一套完整的求学录制