2017年java中高级笔试面试题及答案

本文很多面试题是网友面试BAT亲身经历碰到的。整理分享出来希望更多的前端er共同进步吧，不仅适用于求职者，对于巩固复习js更是大有裨益。

　　中级Javascript：

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

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

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

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

1 // 方法一：

2 e = function(){ 3 var o = tructor === Array ? [] : {}; 4 for(var e in this){ 5 o[e] = typeof this[e] === "object" ? this[e]e() : this[e]; 6 } 7 return o; 8 } 9 10 //方法二：11 /**

12 * 克隆一个对象

13 * @param Obj

14 * @returns

15 */ 16 function clone(Obj) {

17 var buf;

18 if (Obj instanceof Array) {

19 buf = []; //创建一个空的数组 20 var i = th;

21 while (i--) {

22 buf[i] = clone(Obj[i]);

23 }

24 return buf;

25 }else if (Obj instanceof Object){

26 buf = {}; //创建一个空对象 27 for (var k in Obj) { //为这个对象添加新的属性 28 buf[k] = clone(Obj[k]);

29 }

30 return buf;

31 }else{ //普通变量直接赋值32 return Obj;

33 }

34 }

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

1 var arr=[1,2,3,3,4,4,5,5,6,1,9,3,25,4]; 2 function deRepeat(){ 3 var newArr=[]; 4 var obj={}; 5 var index=0; 6 var l=th; 7 for(var i=0;i

3.小贤是一条可爱的小狗(Dog)，它的叫声很好听(wow)，每次看到主人的时候就会乖乖叫一声(yelp)。从这段描述可以得到以下对象：

1 function Dog() {2 = function() {3 alert(’Wow’);4 }5 = function() {6 ();7 }8 }

小芒和小贤一样，原来也是一条可爱的小狗，可是突然有一天疯了(MadDog)，一看到人就会每隔半秒叫一声(wow)地不停叫唤(yelp)。请根据描述，按示例的形式用代码来实。(继承，原型，setInterval)

答案：

1 function MadDog() { 2 = function() { 3 var self = this;

4 setInterval(function() { 5 ();

6 }, 500); 7 } 8 } 9 otype = new Dog();

10 11 //for test12 var dog = new Dog();13 ();14 var madDog = new MadDog();15 ();

4.下面这个ul，如何点击每一列的时候alert其index?(闭包)

1

2

这是第一条

3

这是第二条

4

这是第三条

5

答案：

1 // 方法一：

2 var lis=lementById('2223')lementsByTagName('li'); 3 for(var i=0;i<3;i++) 4 { 5 lis[i]x=i; 6 lis[i]ick=function(){ 7 alert(x); 8 }; 9 }10 11 //方法二：12 var lis=lementById('2223')lementsByTagName('li');13 for(var i=0;i<3;i++)14 {15 lis[i]x=i;16 lis[i]ick=(function(a){17 return function() {18 alert(a);19 }20 })(i);21 }

5.编写一个JavaScript函数，输入指定类型的选择器(仅需支持id，class，tagName三种简单CSS选择器，无需兼容组合选择器)可以返回匹配的DOM节点，需考虑浏览器兼容性和性能。

/*** @param selector {String} 传入的CSS选择器。* @return {Array}*/

答案：(过长，点击打开)

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

1 if(ventListener){ 2 var addListener = function(el,type,listener,useCapture){ 3 ventListener(type,listener,useCapture); 4 }; 5 } 6 else if(){ 7 addListener = function(el,type,listener){ 8 chEvent("on"+type,function(){ 9 y(el);10 });11 }

12 }

评价：

不应该在if和else语句中声明addListener函数，应该先声明;

不需要使用ventListener或来进行检测浏览器，应该使用能力检测;

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

改进如下：

1 function addEvent(elem, type, handler){

2 　　if(ventListener){

3 　　　　ventListener(type, handler, false);

4 　　}else if(chEvent){

5 　　　　elem['temp' + type + handler] = handler;

6 　　　　elem[type + handler] = function(){

7 　　　　elem['temp' + type + handler]y(elem);

8 　　};

9 　　chEvent('on' + type, elem[type + handler]);

10 }else{

11 　　elem['on' + type] = handler;

12 　　}

13 }

7.给String对象添加一个方法，传入一个string类型的参数，然后将string的每个字符间价格空格返回，例如：

addSpace(“Hello World”) // -> ‘h e l l o w o r l d’

1 ify = function(){2 return t('')(' ');3 };

接着上述答题，那么问题来了

1)直接在对象的原型上添加方法是否安全?尤其是在Object对象上。(这个我没能答出?希望知道的说一下。)

2)函数声明与函数表达式的区别?

答案：在Javscript中，解析器在向执行环境中加载数据时，对函数声明和函数表达式并非是一视同仁的，解析器会率先读取函数声明，并使其在执行任何代码之前可用(可以访问)，至于函数表达式，则必须等到解析器执行到它所在的代码行，才会真正被解析执行。(函数声明提升)

8.定义一个log方法，让它可以代理的方法。

可行的方法一：

1 function log(msg)　{2 (msg);3 }4 5 log("hello world!") // hello world!6

如果要传入多个参数呢?显然上面的方法不能满足要求，所以更好的方法是：

1 function log(){2 y(console, arguments);3 };

那么问题来了，apply和call方法的异同?

答案：

对于apply和call两者在作用上是相同的，即是调用一个对象的一个方法，以另一个对象替换当前对象。将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

但两者在参数上有区别的。对于第一个参数意义都一样，但对第二个参数： apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入(从第二个参数开始)。 如 (func1,var1,var2,var3)对应的apply写法为：y(func1,[var1,var2,var3]) 。

9.在Javascript中什么是伪数组?如何将伪数组转化为标准数组?

答案：

伪数组(类数组)：无法直接调用数组方法或期望length属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。典型的是函数的argument参数，还有像调用getElementsByTagName,dNodes之类的`,它们都返回NodeList对象都属于伪数组。可以使用(fakeArray)将数组转化为真正的Array对象。

假设接第八题题干，我们要给每个log方法添加一个”(app)”前缀，比如’hello world!’ ->’(app)hello world!’。方法如下：

1 function log(){2 var args = (arguments); //为了使用unshift数组方法，将argument转化为真正的数组3 ift('(app)');4 5 y(console, args);6 };

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

1 var User = { 2 count: 1, 3

4 getCount: function() { 5 return t; 6 } 7 }; 8

9 (ount()); // what?10 11 var func = ount;

12 (func()); // what?

问两处console输出什么?为什么?

答案是1和undefined。

func是在winodw的上下文中被执行的，所以会访问不到count属性。

那么问题来了，如何确保Uesr总是能访问到func的上下文，即正确返回1。

答案：正确的方法是使用。兼容各个浏览器完整代码如下：

1 = || function(context){ 2 var self = this; 3

4 return function(){ 5 return y(context, arguments); 6 }; 7 } 8

9 var func = (User);10 (func());

11.原生JS的ad与Jquery的$(document)y(function(){})有什么不同?如何用原生JS实现Jq的ready方法?

ad()方法是必须等到页面内包括图片的所有元素加载完毕后才能执行。

$(document)y()是DOM结构绘制完毕后就执行，不必等到加载完毕。

1 /*

2 * 传递函数给whenReady()

3 * 当文档解析完毕且为操作准备就绪时，函数作为document的方法调用

4 */

5 var whenReady = (function() { //这个函数返回whenReady()函数

6 var funcs = []; //当获得事件时，要运行的函数

7 var ready = false; //当触发事件处理程序时,切换为true

8

9 //当文档就绪时,调用事件处理程序10 function handler(e) {11 if(ready) return; //确保事件处理程序只完整运行一次12 13 //如果发生onreadystatechange事件，但其状态不是complete的话,那么文档尚未准备好14 if( === 'onreadystatechange' && yState !== 'complete') {15 return;16 }17 18 //运行所有注册函数19 //注意每次都要计算th20 //以防这些函数的调用可能会导致注册更多的函数21 for(var i=0; i

如果上述代码十分难懂，下面这个简化版：

1 function ready(fn){ 2 if(ventListener) { //标准浏览器

3 ventListener('DOMContentLoaded', function() { 4 //注销事件, 避免反复触发

5 veEventListener('DOMContentLoaded',ee, false); 6 fn(); //执行函数

7 }, false); 8 }else if(chEvent) { //IE

9 chEvent('onreadystatechange', function() {10 if(yState == 'complete') {11 chEvent('onreadystatechange', ee);12 fn(); //函数执行13 }14 });15 }16 };

12.(设计题)想实现一个对页面某个节点的拖曳?如何做?(使用原生JS)

回答出概念即可，下面是几个要点

给需要拖拽的节点绑定mousedown, mousemove, mouseup事件

mousedown事件触发后，开始拖拽

mousemove时，需要通过ntX和clientY获取拖拽位置，并实时更新位置

mouseup时，拖拽结束

需要注意浏览器边界的情况

13.

1 function setcookie(name,value,days){ //给cookie增加一个时间变量

2 　　var exp = new Date();

3 　　ime(ime() + days*24*60*60*1000); //设置过期时间为days天

4 　　ie = name + "="+ escape (value) + ";expires=" + TString();

5 }

6 function getCookie(name){ 7 　　var result = ""; 8 　　var myCookie = ""+ie+";";

9 　　var searchName = "+name+"=";

10 　　var startOfCookie = xOf(searchName);

11 　　var endOfCookie;

12 　　if(satrtOfCookie != -1){

13 　　　　startOfcookie += th;

14 　　　　endOfCookie = xOf(";",startOfCookie);

15 　　　　result = (tring(startOfCookie,endOfCookie));

16 　　}

17 　　return result;

18 }

19 (function(){

20 　　var oTips = lementById('tips');//假设tips的id为tips

21 　　var page = {

22 　　check: function(){//检查tips的cookie是否存在并且允许显示

23 　　　　var tips = getCookie('tips');

24 　　　　if(!tips || tips == 'show') return true;//tips的cookie不存在

25 　　　　if(tips == "never_show_again") return false;

26 　　},

27 　　hideTip: function(bNever){

28 　　　　if(bNever) setcookie('tips', 'never_show_again', 365);

29 　　　　lay = "none";//隐藏

30 　　},

31 　　showTip: function(){

32 　　lay = "inline";//显示，假设tips为行级元素

33 　　},

34 　　init: function(){

35 　　　　var _this = this;

36 　　　　if(k()){

37 　　　　_Tip();

38 　　　　setcookie('tips', 'show', 1);

39 　　}

40 　　ick = function(){

41 　　　　_Tip(true);

42 　　};

43 　　}

44 　　};

45 ();

46 })();

14.说出以下函数的作用是?空白区域应该填写什么?

1 //define

2 (function(window){ 3 function fn(str){ 4 =str; 5 } 6

7 at = function(){ 8 var arg = ______; 9 return ace(_____,function(a,b){10 return arg[b]||"";11 });12 }13 = fn;14 })(window);15 16 //use17 (function(){18 var t = new fn('

{1}{2}

');19 (at('','Alibaba','Welcome'));20 })();

答案：访函数的作用是使用format函数将函数的参数替换掉{0}这样的内容，返回一个格式化后的结果：

第一个空是：arguments

第二个空是：/{(d+)}/ig

15.用面向对象的Javascript来介绍一下自己。