- 相關(guān)推薦
2017年java中高級(jí)筆試面試題及答案
本文很多面試題是網(wǎng)友面試BAT親身經(jīng)歷碰到的。整理分享出來希望更多的前端er共同進(jìn)步吧，不僅適用于求職者，對于鞏固復(fù)習(xí)js更是大有裨益。
中級(jí)Javascript：
1.實(shí)現(xiàn)一個(gè)函數(shù)clone，可以對JavaScript中的5種主要的數(shù)據(jù)類型(包括Number、String、Object、Array、Boolean)進(jìn)行值復(fù)制
考察點(diǎn)1：對于基本數(shù)據(jù)類型和引用數(shù)據(jù)類型在內(nèi)存中存放的是值還是指針這一區(qū)別是否清楚
考察點(diǎn)2：是否知道如何判斷一個(gè)變量是什么類型的
考察點(diǎn)3：遞歸算法的設(shè)計(jì)
1 // 方法一：
2 Object.prototype.clone = function(){ 3 var o = this.constructor === Array ? [] : {}; 4 for(var e in this){ 5 o[e] = typeof this[e] === "object" ? this[e].clone() : this[e]; 6 } 7 return o; 8 } 9 10 //方法二：11 /**
12 * 克隆一個(gè)對象
13 * @param Obj
14 * @returns
15 */ 16 function clone(Obj) {
17 var buf;
18 if (Obj instanceof Array) {
19 buf = []; //創(chuàng)建一個(gè)空的數(shù)組 20 var i = Obj.length;
21 while (i--) {
22 buf[i] = clone(Obj[i]);
23 }
24 return buf;
25 }else if (Obj instanceof Object){
26 buf = {}; //創(chuàng)建一個(gè)空對象 27 for (var k in Obj) { //為這個(gè)對象添加新的屬性 28 buf[k] = clone(Obj[k]);
29 }
30 return buf;
31 }else{ //普通變量直接賦值32 return Obj;
33 }
34 }
2.如何消除一個(gè)數(shù)組里面重復(fù)的元素?
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=arr.length; 7 for(var i=0;i
3.小賢是一條可愛的小狗(Dog)，它的叫聲很好聽(wow)，每次看到主人的時(shí)候就會(huì)乖乖叫一聲(yelp)。從這段描述可以得到以下對象：
1 function Dog() {2 this.wow = function() {3 alert(’Wow’);4 }5 this.yelp = function() {6 this.wow();7 }8 }
小芒和小賢一樣，原來也是一條可愛的小狗，可是突然有一天瘋了(MadDog)，一看到人就會(huì)每隔半秒叫一聲(wow)地不停叫喚(yelp)。請根據(jù)描述，按示例的形式用代碼來實(shí)。(繼承，原型，setInterval)
答案：
1 function MadDog() { 2 this.yelp = function() { 3 var self = this;
4 setInterval(function() { 5 self.wow();
6 }, 500); 7 } 8 } 9 MadDog.prototype = new Dog();
10 11 //for test12 var dog = new Dog();13 dog.yelp();14 var madDog = new MadDog();15 madDog.yelp();
4.下面這個(gè)ul，如何點(diǎn)擊每一列的時(shí)候alert其index?(閉包)
1
2
這是第一條
3
這是第二條
4
這是第三條
5
答案：
1 // 方法一：
2 var lis=document.getElementById('2223').getElementsByTagName('li'); 3 for(var i=0;i<3;i++) 4 { 5 lis[i].index=i; 6 lis[i].onclick=function(){ 7 alert(this.index); 8 }; 9 }10 11 //方法二：12 var lis=document.getElementById('2223').getElementsByTagName('li');13 for(var i=0;i<3;i++)14 {15 lis[i].index=i;16 lis[i].onclick=(function(a){17 return function() {18 alert(a);19 }20 })(i);21 }
5.編寫一個(gè)JavaScript函數(shù)，輸入指定類型的選擇器(僅需支持id，class，tagName三種簡單CSS選擇器，無需兼容組合選擇器)可以返回匹配的DOM節(jié)點(diǎn)，需考慮瀏覽器兼容性和性能。
/*** @param selector {String} 傳入的CSS選擇器。* @return {Array}*/
答案：(過長，點(diǎn)擊打開)
6.請?jiān)u價(jià)以下代碼并給出改進(jìn)意見。
1 if(window.addEventListener){ 2 var addListener = function(el,type,listener,useCapture){ 3 el.addEventListener(type,listener,useCapture); 4 }; 5 } 6 else if(document.all){ 7 addListener = function(el,type,listener){ 8 el.attachEvent("on"+type,function(){ 9 listener.apply(el);10 });11 }
12 }
評(píng)價(jià)：
不應(yīng)該在if和else語句中聲明addListener函數(shù)，應(yīng)該先聲明;
不需要使用window.addEventListener或document.all來進(jìn)行檢測瀏覽器，應(yīng)該使用能力檢測;
由于attachEvent在IE中有this指向問題，所以調(diào)用它時(shí)需要處理一下
改進(jìn)如下：
1 function addEvent(elem, type, handler){
2 if(elem.addEventListener){
3 elem.addEventListener(type, handler, false);
4 }else if(elem.attachEvent){
5 elem['temp' + type + handler] = handler;
6 elem[type + handler] = function(){
7 elem['temp' + type + handler].apply(elem);
8 };
9 elem.attachEvent('on' + type, elem[type + handler]);
10 }else{
11 elem['on' + type] = handler;
12 }
13 }
7.給String對象添加一個(gè)方法，傳入一個(gè)string類型的參數(shù)，然后將string的每個(gè)字符間價(jià)格空格返回，例如：
addSpace(“Hello World”) // -> ‘h e l l o w o r l d’
1 String.prototype.spacify = function(){2 return this.split('').join(' ');3 };
接著上述答題，那么問題來了
1)直接在對象的原型上添加方法是否安全?尤其是在Object對象上。(這個(gè)我沒能答出?希望知道的說一下。)
2)函數(shù)聲明與函數(shù)表達(dá)式的區(qū)別?
答案：在Javscript中，解析器在向執(zhí)行環(huán)境中加載數(shù)據(jù)時(shí)，對函數(shù)聲明和函數(shù)表達(dá)式并非是一視同仁的，解析器會(huì)率先讀取函數(shù)聲明，并使其在執(zhí)行任何代碼之前可用(可以訪問)，至于函數(shù)表達(dá)式，則必須等到解析器執(zhí)行到它所在的代碼行，才會(huì)真正被解析執(zhí)行。(函數(shù)聲明提升)
8.定義一個(gè)log方法，讓它可以代理console.log的方法。
可行的方法一：
1 function log(msg) {2 console.log(msg);3 }4 5 log("hello world!") // hello world!6
如果要傳入多個(gè)參數(shù)呢?顯然上面的方法不能滿足要求，所以更好的方法是：
1 function log(){2 console.log.apply(console, arguments);3 };
那么問題來了，apply和call方法的異同?
答案：
對于apply和call兩者在作用上是相同的，即是調(diào)用一個(gè)對象的一個(gè)方法，以另一個(gè)對象替換當(dāng)前對象。將一個(gè)函數(shù)的對象上下文從初始的上下文改變?yōu)橛?thisObj 指定的新對象。
但兩者在參數(shù)上有區(qū)別的。對于第一個(gè)參數(shù)意義都一樣，但對第二個(gè)參數(shù)： apply傳入的是一個(gè)參數(shù)數(shù)組，也就是將多個(gè)參數(shù)組合成為一個(gè)數(shù)組傳入，而call則作為call的參數(shù)傳入(從第二個(gè)參數(shù)開始)。 如 func.call(func1,var1,var2,var3)對應(yīng)的apply寫法為：func.apply(func1,[var1,var2,var3]) 。
9.在Javascript中什么是偽數(shù)組?如何將偽數(shù)組轉(zhuǎn)化為標(biāo)準(zhǔn)數(shù)組?
答案：
偽數(shù)組(類數(shù)組)：無法直接調(diào)用數(shù)組方法或期望length屬性有什么特殊的行為，但仍可以對真正數(shù)組遍歷方法來遍歷它們。典型的是函數(shù)的argument參數(shù)，還有像調(diào)用getElementsByTagName,document.childNodes之類的,它們都返回NodeList對象都屬于偽數(shù)組�？梢允褂肁rray.prototype.slice.call(fakeArray)將數(shù)組轉(zhuǎn)化為真正的Array對象。
假設(shè)接第八題題干，我們要給每個(gè)log方法添加一個(gè)”(app)”前綴，比如’hello world!’ ->’(app)hello world!’。方法如下：
1 function log(){2 var args = Array.prototype.slice.call(arguments); //為了使用unshift數(shù)組方法，將argument轉(zhuǎn)化為真正的數(shù)組3 args.unshift('(app)');4 5 console.log.apply(console, args);6 };
10.對作用域上下文和this的理解，看下列代碼：
1 var User = { 2 count: 1, 3
4 getCount: function() { 5 return this.count; 6 } 7 }; 8
9 console.log(User.getCount()); // what?10 11 var func = User.getCount;
12 console.log(func()); // what?
問兩處console輸出什么?為什么?
答案是1和undefined。
func是在winodw的上下文中被執(zhí)行的，所以會(huì)訪問不到count屬性。
那么問題來了，如何確保Uesr總是能訪問到func的上下文，即正確返回1。
答案：正確的方法是使用Function.prototype.bind。兼容各個(gè)瀏覽器完整代碼如下：
1 Function.prototype.bind = Function.prototype.bind || function(context){ 2 var self = this; 3
4 return function(){ 5 return self.apply(context, arguments); 6 }; 7 } 8
9 var func = User.getCount.bind(User);10 console.log(func());
11.原生JS的window.onload與Jquery的$(document).ready(function(){})有什么不同?如何用原生JS實(shí)現(xiàn)Jq的ready方法?
window.onload()方法是必須等到頁面內(nèi)包括圖片的所有元素加載完畢后才能執(zhí)行。
$(document).ready()是DOM結(jié)構(gòu)繪制完畢后就執(zhí)行，不必等到加載完畢。
1 /*
2 * 傳遞函數(shù)給whenReady()
3 * 當(dāng)文檔解析完畢且為操作準(zhǔn)備就緒時(shí)，函數(shù)作為document的方法調(diào)用
4 */
5 var whenReady = (function() { //這個(gè)函數(shù)返回whenReady()函數(shù)
6 var funcs = []; //當(dāng)獲得事件時(shí)，要運(yùn)行的函數(shù)
7 var ready = false; //當(dāng)觸發(fā)事件處理程序時(shí),切換為true
8
9 //當(dāng)文檔就緒時(shí),調(diào)用事件處理程序10 function handler(e) {11 if(ready) return; //確保事件處理程序只完整運(yùn)行一次12 13 //如果發(fā)生onreadystatechange事件，但其狀態(tài)不是complete的話,那么文檔尚未準(zhǔn)備好14 if(e.type === 'onreadystatechange' && document.readyState !== 'complete') {15 return;16 }17 18 //運(yùn)行所有注冊函數(shù)19 //注意每次都要計(jì)算funcs.length20 //以防這些函數(shù)的調(diào)用可能會(huì)導(dǎo)致注冊更多的函數(shù)21 for(var i=0; i
如果上述代碼十分難懂，下面這個(gè)簡化版：
1 function ready(fn){ 2 if(document.addEventListener) { //標(biāo)準(zhǔn)瀏覽器
3 document.addEventListener('DOMContentLoaded', function() { 4 //注銷事件, 避免反復(fù)觸發(fā)
5 document.removeEventListener('DOMContentLoaded',arguments.callee, false); 6 fn(); //執(zhí)行函數(shù)
7 }, false); 8 }else if(document.attachEvent) { //IE
9 document.attachEvent('onreadystatechange', function() {10 if(document.readyState == 'complete') {11 document.detachEvent('onreadystatechange', arguments.callee);12 fn(); //函數(shù)執(zhí)行13 }14 });15 }16 };
12.(設(shè)計(jì)題)想實(shí)現(xiàn)一個(gè)對頁面某個(gè)節(jié)點(diǎn)的拖曳?如何做?(使用原生JS)
回答出概念即可，下面是幾個(gè)要點(diǎn)
給需要拖拽的節(jié)點(diǎn)綁定mousedown, mousemove, mouseup事件
mousedown事件觸發(fā)后，開始拖拽
mousemove時(shí)，需要通過event.clientX和clientY獲取拖拽位置，并實(shí)時(shí)更新位置
mouseup時(shí)，拖拽結(jié)束
需要注意瀏覽器邊界的情況
13.
1 function setcookie(name,value,days){ //給cookie增加一個(gè)時(shí)間變量
2 var exp = new Date();
3 exp.setTime(exp.getTime() + days*24*60*60*1000); //設(shè)置過期時(shí)間為days天
4 document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
5 }
6 function getCookie(name){ 7 var result = ""; 8 var myCookie = ""+document.cookie+";";
9 var searchName = "+name+"=";
10 var startOfCookie = myCookie.indexOf(searchName);
11 var endOfCookie;
12 if(satrtOfCookie != -1){
13 startOfcookie += searchName.length;
14 endOfCookie = myCookie.indexOf(";",startOfCookie);
15 result = (myCookie.substring(startOfCookie,endOfCookie));
16 }
17 return result;
18 }
19 (function(){
20 var oTips = document.getElementById('tips');//假設(shè)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 oTips.style.display = "none";//隱藏
30 },
31 showTip: function(){
32 oTips.style.display = "inline";//顯示，假設(shè)tips為行級(jí)元素
33 },
34 init: function(){
35 var _this = this;
36 if(this.check()){
37 _this.showTip();
38 setcookie('tips', 'show', 1);
39 }
40 oTips.onclick = function(){
41 _this.hideTip(true);
42 };
43 }
44 };
45 page.init();
46 })();
14.說出以下函數(shù)的作用是?空白區(qū)域應(yīng)該填寫什么?
1 //define
2 (function(window){ 3 function fn(str){ 4 this.str=str; 5 } 6
7 fn.prototype.format = function(){ 8 var arg = ______; 9 return this.str.replace(_____,function(a,b){10 return arg[b]||"";11 });12 }13 window.fn = fn;14 })(window);15 16 //use17 (function(){18 var t = new fn('
{1}{2}
');19 console.log(t.format('http://www.alibaba.com','Alibaba','Welcome'));20 })();
答案：訪函數(shù)的作用是使用format函數(shù)將函數(shù)的參數(shù)替換掉{0}這樣的內(nèi)容，返回一個(gè)格式化后的結(jié)果：
第一個(gè)空是：arguments
第二個(gè)空是：/{(d+)}/ig
15.用面向?qū)ο蟮腏avascript來介紹一下自己。
【java中高級(jí)筆試面試題及答案】相關(guān)文章：
java筆試題及答案08-20
經(jīng)典java筆試題及答案分享02-25
JAVA面試筆試題11-15
華為Java筆試題一11-21
中興筆試+面試題目11-21
java英文面試筆試題11-22
java面試筆試題分享11-18
筆試OQ答案共享11-21
企業(yè)Java面試筆試題范文09-27