JavaScript面试问题.docx

∙ 在JS里通过onclick绑定：

xxx.onclick = test

∙ 通过事件添加进行绑定：

addEventListener（xxx, ‘click’, test）

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

∙“事件冒泡”：

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

∙“事件捕捉”：

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

∙“DOM事件流”：

三个阶段：

事件捕捉，目标阶段，事件冒泡

7.什么是Ajax和JSON，它们的优缺点。

Ajax是异步JavaScript和XML，用于在Web页面中实现异步数据交互。

优点：

∙　可以使得页面不重载全部内容的情况下加载局部内容，降低数据传输量

∙　避免用户不断刷新或者跳转页面，提高用户体验

缺点：

∙　对搜索引擎不友好（

∙　要实现ajax下的前后退功能成本较大

∙　可能造成请求数的增加

∙　跨域问题限制

JSON是一种轻量级的数据交换格式，ECMA的一个子集

优点：

轻量级、易于人的阅读和编写，便于机器（JavaScript）解析，支持复合数据类型（数组、对象、字符串、数字）

 8.看下列代码输出为何？

解释原因。

JavaScript

1

2

3

vara;

alert（typeofa）;//undefined

alert（b）;//报错

解释：

Undefined是一个只有一个值的数据类型，这个值就是“undefined”，在使用var声明变量但并未对其赋值进行初始化时，这个变量的值就是undefined。

而b由于未声明将报错。

注意未申明的变量和声明了未赋值的是不一样的。

 9.看下列代码,输出什么？

解释原因。

JavaScript

1

2

vara=null;

alert（typeofa）;//object

解释：

null是一个只有一个值的数据类型，这个值就是null。

表示一个空指针对象，所以用typeof检测会返回”object”。

 10.看下列代码,输出什么？

解释原因。

JavaScript

1

2

3

4

5

6

7

8

9

varundefined;

undefined==null;//true

1==true;  //true

2==true;  //false

0==false;  //true

0=='';    //true

NaN==NaN;  //false

[]==false;//true

[]==!

[];  //true

∙undefined与null相等，但不恒等（===）

∙一个是number一个是string时，会尝试将string转换为number

∙尝试将boolean转换为number，0或1

∙尝试将Object转换成number或string，取决于另外一个对比量的类型

∙所以，对于0、空字符串的判断，建议使用 “===” 。

“===”会先判断两边的值类型，类型不匹配时为false。

那么问题来了，看下面的代码，输出什么，foo的值为什么？

JavaScript

1

2

3

varfoo="11"+2-"1";

console.log（foo）;

console.log（typeoffoo）;

执行完后foo的值为111，foo的类型为String。

 11.看代码给答案。

JavaScript

1

2

3

4

5

vara=newObject（）;

a.value=1;

b=a;

b.value=2;

alert（a.value）;

答案：

2（考察引用数据类型细节）

12.已知数组var stringArray = [“This”, “is”, “Baidu”, “Campus”]，Alert出”This is Baidu Campus”。

答案：

alert（stringArray.join（“”））

已知有字符串foo=”get-element-by-id”,写一个function将其转化成驼峰表示法”getElementById”。

JavaScript

1

2

3

4

5

6

7

8

functioncombo（msg）{

    vararr=msg.split（"-"）;

    for（vari=1;i

        arr[i]=arr[i].charAt（0）.toUpperCase（）+arr[i].substr（1,arr[i].length-1）;

    }

    msg=arr.join（""）;

    returnmsg;

}

（考察基础API）

13.var numberArray = [3,6,2,4,1,5];（考察基础API）

1） 实现对该数组的倒排，输出[5,1,4,2,6,3]

2） 实现对该数组的降序排列，输出[6,5,4,3,2,1]

JavaScript

1

2

3

4

5

6

7

8

functioncombo（msg）{

    vararr=msg.split（"-"）;

    for（vari=1;i

        arr[i]=arr[i].charAt（0）.toUpperCase（）+arr[i].substr（1,arr[i].length-1）;

    }

    msg=arr.join（""）;

    returnmsg;

}

14.输出今天的日期，以YYYY-MM-DD的方式，比如今天是2014年9月26日，则输出2014-09-26

JavaScript

1

2

3

4

5

6

7

8

9

10

11

vard=newDate（）;

//获取年，getFullYear（）返回4位的数字

varyear=d.getFullYear（）;

//获取月，月份比较特殊，0是1月，11是12月

varmonth=d.getMonth（）+1;

//变成两位

month=month<10?

'0'+month:

month;

//获取日

varday=d.getDate（）;

day=day<10?

'0'+day:

day;

alert（year+'-'+month+'-'+day）;

15.将字符串”{$id}{$name}”中的{$id}替换成10，{$name}替换成Tony（使用正则表达式）

答案：

”{$id}{$id}_{$name}”.replace（/{\$id}/g, ’10’）.replace（/{\$name}/g, ‘Tony’）;

16.为了保证页面输出安全，我们经常需要对一些特殊的字符进行转义，请写一个函数escapeHtml，将<, >, &, “进行转义

JavaScript

1

2

3

4

5

6

7

8

9

10

11

12

13

14

functionescapeHtml（str）{

returnstr.replace（/[<>”&]/g,function（match）{

    switch（match）{

                  case“<”:

                      return“<”;

                  case“>”:

                      return“>”;

                  case“&”:

                      return“&”;

                  case“\””:

                      return“"”;

      }

  }）;

}

17.foo=foo||bar，这行代码是什么意思？

为什么要这样写？

答案：

if（!

foo） foo = bar; //如果foo存在，值不变，否则把bar的值赋给foo。

短路表达式：

作为”&&”和”||”操作符的操作数表达式，这些表达式在进行求值时，只要最终的结果已经可以确定是真或假，求值过程便告终止，这称之为短路求值。

18.看下列代码，将会输出什么?

（变量声明提升）

JavaScript

1

2

3

4

5

6

varfoo=1;

function（）{

    console.log（foo）;

    varfoo=2;

    console.log（foo）;

}

答案：

输出undefined和2。

上面代码相当于：

JavaScript

1

2

3

4

5

6

7

varfoo=1;

function（）{

    varfoo;

    console.log（foo）;//undefined

    foo=2;

    console.log（foo）;//2;  

}

函数声明与变量声明会被JavaScript引擎隐式地提升到当前作用域的顶部，但是只提升名称不会提升赋值部分。

19.用js实现随机选取10–100之间的10个数字，存入一个数组，并排序。

JavaScript

1

2

3

4

5

6

7

8

9

variArray=[];

funtiongetRandom（istart,iend）{

        variChoice=istart-iend+1;

        returnMath.floor（Math.random（）*iChoice+istart;

}

for（vari=0;i<10;i++）{

        iArray.push（getRandom（10,100））;

}

iArray.sort（）;

20.把两个数组合并，并删除第二个元素。

JavaScript

1

2

3

4

vararray1=['a','b','c'];

varbArray=['d','e','f'];

varcArray=array1.concat（bArray）;

cArray.splice（1,1）;

21.怎样添加、移除、移动、复制、创建和查找节点（原生JS，实在基础，没细写每一步）

1）创建新节点

createDocumentFragment（）    //创建一个DOM片段

createElement（）   //创建一个具体的元素

createTextNode（）   //创建一个文本节点

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

appendChild（）      //添加

removeChild（）      //移除

replaceChild（）      //替换

insertBefore（）      //插入

3）查找

getElementsByTagName（）    //通过标签名称

getElementsByName（）     //通过元素的Name属性的值

getElementById（）        //通过元素Id，唯一性

22.有这样一个URL：

 b:

’2′, c:

”, d:

’xxx’, e:

undefined}。

答案：

JavaScript

1

2

3

4

5

6

7

8

9

functionserilizeUrl（url）{

    varresult={};

    url=url.split（"?

"）[1];

    varmap=url.split（"&"）;

    for（vari=0,len=map.length;i

        result[map[i].split（"="）[0]]=map[i].split（"="）[1];

    }

    returnresult;

}

23.正则表达式构造函数varreg=newRegExp（“xxx”）与正则表达字面量varreg=//有什么不同？

匹配邮箱的正则表达式？

答案：

当使用RegExp（）构造函数的时候，不仅需要转义引号（即\”表示”），并且还需要双反斜杠（即\\表示一个\）。

使用正则表达字面量的效率更高。

邮箱的正则匹配：

JavaScript

1

varregMail=/^（[a-zA-Z0-9_-]）+@（[a-zA-Z0-9_-]）+（（.[a-zA-Z0-9_-]{2,3}）{1,2}）$/;

24.看下面代码，给出输出结果。

JavaScript

1

2

3

4

5

for（vari=1;i<=3;i++）{

  setTimeout（function（）{

      console.log（i）;    

  },0）;  

};

答案：

444。

原因：

Javascript事件处理器在线程空闲之前不会运行。

追问，如何让上述代码输出123？

JavaScript

1

2

3

4

5

6

7

8

9

for（vari=1;i<=3;i++）{

  setTimeout（（function（a）{  //改成立即执行函数

      console.log（a）;    

  }）（i）,0）;  

};

1          //输出

2

3

25.写一个function，清除字符串前后的空格。

（兼容所有浏览器）

使用自带接口trim（），考虑兼容性：

JavaScript

1

2

3

4

5

6

7

8

9

if（!

String.prototype.trim）{

String.prototype.trim=function（）{

returnthis.replace（/^\s+/,""）.replace（/\s+$/,""）;

}

}

//testthefunction

varstr="\t\nteststring".trim（）;

alert（str=="teststring"）;//alerts"true"

26.Javascript中callee和caller的作用？

答案：

caller是返回一个对函数的引用，该函数调用了当前函数；

callee是返回正在被执行的function函数，也就是所指定的function对象的正文。

那么问题来了？

如果一对兔子每月生一对兔子；一对新生兔，从第二个月起就开始生兔子；假定每对兔子都是一雌一雄，试问一对兔子，第n个月能繁殖成多少对兔子？

（使用callee完成）

JavaScript

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

varresult=[];

functionfn（n）{  //典型的斐波那契数列

  if（n==1）{

        return1;

  }elseif（n==2）{

          return1;

  }else{

        if（result[n]）{

                returnresult[n];

        }else{

                //argument.callee（）表示fn（）

                result[n]=arguments.callee（n-1）+arguments.callee（n-2）;

                returnresult[n];

        }

  }

}

中级Javascript：

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

∙考察点1：

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

∙考察点2：

是否知道如何判断一个变量是什么类型的

∙考察点3：

递归算法的设计

JavaScript

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

//方法一：

Object.prototype.clone=function（）{

        varo=this.constructor===Array?

[]:

{};

        for（vareinthis）{

                o[e]=typeofthis[e]==="object"?

this[e].clone（）:

this[e];

        }

        returno;

}

//方法二：

  /**

    *克隆一个对象

    *@paramObj

    *@returns

    */

    functionclone（Obj）{  

        varbuf;  

        if（ObjinstanceofArray）{  

            buf=[];                    //创建一个空的数组

            vari=Obj.length;  

            while（i--）{  

                buf[i]=clone（Obj[i]）;  

            }  

            returnbuf;    

        }elseif（ObjinstanceofObject）{  

            buf={};                  //创建一个空对象

            for（varkinObj）{          //为这个对象添加新的属性

                buf[k]=clone（Obj[k]）;  

            }  

            returnbuf;  

        }else{                        //普通变量直接赋值

            returnObj;  

        }  

    }

2.如何消除一个数组里面重复的元素？

JavaScript

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

vararr=[1,2,3,3,4,4,5,5,6,1,9,3,25,4];

        functiondeRepeat（）{

            varnewArr=[];

            var