2022年百度公司前端開發(fā)實習(xí)生面試題（應(yīng)聘 求職 面試準備資料）

1、 2022年百度公司前端開發(fā)實習(xí)生面試題第1題： 寫出javascript運行結(jié)果：alert(5+5); 結(jié)果：55 第2題： 寫出javascript運行結(jié)果：for(var i=0; i10; i+) alert(i); 結(jié)果：10 第3題： Cookie、sessionStorage、localStorage的區(qū)分 參考： 共同點：都是保存在掃瞄器端，且同源的。 區(qū)分：cookie數(shù)據(jù)始終在同源的http懇求中攜帶（即使不需要），即cookie在掃瞄器和服務(wù)器間來回傳遞。而sessionStorage和localStorage不會自動把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存。cookie數(shù)據(jù)還有

2、路徑（path）的概念，可以限制cookie只屬于某個路徑下。存儲大小限制也不同，cookie數(shù)據(jù)不能超過4k，同時由于每次http懇求都會攜帶cookie，所以cookie只適合保存很小的數(shù)據(jù)，如會話標(biāo)識。sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。數(shù)據(jù)有效期不同，sessionStorage：僅在當(dāng)前掃瞄器窗口關(guān)閉前有效，自然也就不行能長久保持；localStorage：始終有效，窗口或掃瞄器關(guān)閉也始終保存，因此用作長久數(shù)據(jù)；cookie只在設(shè)置的cookie過期時間之前始終有效，即使窗口或掃瞄器關(guān)閉。作用域不

3、同，sessionStorage不在不同的掃瞄器窗口中共享，即使是同一個頁面；localStorage 在全部同源窗口中都是共享的；cookie也是在全部同源窗口中都是共享的。Web Storage 支持大事通知機制，可以將數(shù)據(jù)更新的通知發(fā)送給監(jiān)聽者。Web Storage 的 api 接口使用更便利。 第4題： javascript中call()方法和apply()方法的區(qū)分。 參考：call()和apply()方法作用相同，動態(tài)轉(zhuǎn)變運行上下文，跨作用域調(diào)用函數(shù)或方法。 區(qū)分：唯一區(qū)分在于兩個方法的其次個參數(shù)，call()方法的其次個參數(shù)是依次給將要調(diào)用的函數(shù)或方法傳遞參數(shù)；而apply()

4、方法的其次個參數(shù)是數(shù)組或類數(shù)組（arguments）。 例子：foo.call(this, para1,para2,para3)等價于foo.apply(this,para1,para2,para3) 第5題： 什么是 “use strict”? 使用它的好處和壞處是什么？ 參考：”use strict”（嚴格模式） 是在ECMAScript5中提出來的，是為javascript定義了一種不同的解析與執(zhí)行模型。在嚴格模式下，ECMAScript3中一些不確定的行為將得處處理，而且對某些擔(dān)心全操作也會拋出錯誤。（參考javascript高級程序設(shè)計）嚴格模式分為全局嚴格模式和局部嚴格模式。 好處

5、：（1）、消退Javascript語法的一些不合理、不嚴謹之處，削減一些怪異行為; （2）、消退代碼運行的一些擔(dān)心全之處，保證代碼運行的平安； （3）、提高編譯器效率，增加運行速度； （4）、為將來新版本的Javascript做好鋪墊。 壞處：在一個全局環(huán)境下使用嚴格模式，會使得非嚴格模式下的代碼merge后可能消失問題。 第6題： 寫一段簡潔的正則表達式，匹配并取出字符串”https:/./s?cl=3”中的域名部分（注：域名部分非固定） 參考： 1 var str=https:/./s?cl=3; 2 3 var reg=/https:/(A-Za-z.+)/S+/; 4 5 var re

6、sult=reg.exec(str); 6 7 if(result) 8 9 alert(result1); 10 11 第7題： 用原生javascript編寫程序：創(chuàng)建一個ul無序列表元素添加到body中，ul下包含5個li元素，每個li元素包含一個text類型元素，text元素內(nèi)容可自定義。 參考： url=/url 1 !DOCTYPE HTML PUBLIC -/W3C/DTD HTML 4.01 Transitional/EN http:/./TR/html4/loose.dtd 2 html 3 head 4 meta http-equiv=Content-Type conten

7、t=text/html;charset=UTF-8 5 title2022百度實習(xí)筆試題7/title 6 script 7 window.onload=function() 8 var ulNode=document.createElement(ul); 9 var bodyNode=document.getElementsByTagName(body); 10 bodyNode0.appendChild(ulNode); 11 for(var i=0; i5; i+) 12 var liNode=document.createElement(li); 13 var textNode=doc

8、ument.createTextNode(li+i); 14 liNode.appendChild(textNode); 15 ulNode.appendChild(liNode); 16 17 18 /script 19 /head 20 body 21 22 /body 23 /html 第8題： 用HTML和css實現(xiàn)如下布局，只需寫出排版結(jié)構(gòu)及樣式，不要求把內(nèi)容一起寫上。 參考： !DOCTYPE HTML PUBLIC -/W3C/DTD HTML 4.01 Transitional/EN http:/./TR/html4/loose.dtd html head meta http-

9、equiv=Content-Type content=text/html;charset=UTF-8 title2022百度實習(xí)筆試題8/title style li list-style-type: none; .info float: left; margin: 0 20px 20px; /style /head body div ul lidiv style=margin: 20px;b精彩分類/b/div/li li divimg src=0000.png alt=捕食草 /div div pspan捕食草/spannbsp;nbsp;nbsp;nbsp;span所屬分類：草本植物/s

10、pan/p p是一種食蟲植物。/p /div /li li style=clear: both;/li li divimg src=0000.png alt=虎鯨 /div div pspan虎鯨/spannbsp;nbsp;nbsp;nbsp;nbsp;span所屬分類：海洋/span/p p是一種大型齒鯨。/p /div /li /ul /div /body /html （ps：這一題的確寫得很挫） 第9題： 【附加題】假設(shè)有一個基礎(chǔ)對象叫“動物”，擁有以下屬性：腿的數(shù)量、是否有尾巴，有另外一個對象叫“貓”，擁有“動物”對象的屬性，并增加一個屬性為：動物名稱，再增加一個方法，返回動物名稱+

11、腿的數(shù)量+是否有尾巴的描述，請使用javascript原型鏈繼承來創(chuàng)建以上2個對象。 參考： 原型鏈： 1 function Animal() 2 Atotype.leg=4; 3 Atotype.tail=true; 4 var animal=new Animal(); 5 function Cat() 6 Ctotype=animal; 7 C=cat; 8 Ctotype.getInfo=function() 9 return Animals name:+,number of leg:+this.leg+,has tail:+Boolean(this.tail); 10 ; 11 var cat=new Cat(); 12 cat.getInfo(); 復(fù)制代碼 構(gòu)造器： 1 function Animal(leg,tail) 2 this.leg=leg; 3 this.tail=tail; 4 5 6 function Cat(name,leg,tail) 7 Animal.call(this,leg,tail)