2021年百度公司前端開發實習生面試題

第1題：

寫出javascript運行結果：alert(‘5’+5);

結果：’55’

第2題：

寫出javascript運行結果：for(var i=0; i<10; i++){} alert(i);

結果：10

第3題：

Cookie、sessionStorage、localStorage的區別

參考：

共同點：都是保存在瀏覽器端，且同源的。

區別：cookie數據始終在同源的http請求中攜帶（即使不需要），即cookie在瀏覽器和服務器間來回傳遞。而sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。cookie數據還有路徑（path）的概念，可以限制cookie只屬于某個路徑下。存儲大小限制也不同，cookie數據不能超過4k，同時因為每次http請求都會攜帶cookie，所以cookie只適合保存很小的數據，如會話標識。sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。數據有效期不同，sessionStorage：僅在當前瀏覽器窗口關閉前有效，自然也就不可能持久保持；localStorage：始終有效，窗口或瀏覽器關閉也一直保存，因此用作持久數據；cookie只在設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉。作用域不同，sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個頁面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知機制，可以將數據更新的通知發送給監聽者。Web Storage 的 api 接口使用更方便。

第4題：

javascript中call()方法和apply()方法的區別。

參考：call()和apply()方法作用相同，動態改變運行上下文，跨作用域調用函數或方法。

區別：唯一區別在于兩個方法的第二個參數，call()方法的第二個參數是依次給將要調用的函數或方法傳遞參數；而apply()方法的第二個參數是數組或類數組（arguments）。

例子：foo.call(this, para1,para2,para3)等價于foo.apply(this,[para1,para2,para3])

第5題：

什么是 “use strict”? 使用它的好處和壞處是什么？

參考：”use strict”（嚴格模式） 是在ECMAScript5中提出來的，是為javascript定義了一種不同的解析與執行模型。在嚴格模式下，ECMAScript3中一些不確定的行為將得到處理，而且對某些不安全操作也會拋出錯誤。（參考《javascript高級程序設計》）嚴格模式分為全局嚴格模式和局部嚴格模式。

好處：（1）、消除Javascript語法的一些不合理、不嚴謹之處，減少一些怪異行為;

?? （2）、消除代碼運行的一些不安全之處，保證代碼運行的安全；

?? （3）、提高編譯器效率，增加運行速度；

?? （4）、為未來新版本的Javascript做好鋪墊。

壞處：在一個全局環境下使用嚴格模式，會使得非嚴格模式下的代碼merge后可能出現問題。

?

第6題：

寫一段簡單的正則表達式，匹配并取出字符串”https://www.baidu.com/s?cl=3”中的域名部分（注：域名部分非固定）

參考：

1 var str="https://www.baidu.com/s?cl=3";

2

3 var reg=/https:\/\/([A-Za-z\.]+)\/\S+/;

4

5 var result=reg.exec(str);

6

7 if(result){

8

9 alert(result[1]);

10

11 }

第7題：

用原生javascript編寫程序：創建一個ul無序列表元素添加到body中，ul下包含5個li元素，每個li元素包含一個text類型元素，text元素內容可自定義。

參考：

[url=][/url]

1

2

3

4????

5????

6????

19

20

21????

22 免费 无码 国产在线观看观-亚洲精品乱码久久久久-久久精品无码一区二区国产-国产欧美一区二区精品久久久

23

第8題：

用HTML和css實現如下布局，只需寫出排版結構及樣式，不要求把內容一起寫上。

參考：

???

???

???

???

?

（ps：這一題確實寫得很挫）

第9題：

【附加題】假設有一個基礎對象叫“動物”，擁有以下屬性：腿的數量、是否有尾巴，有另外一個對象叫“貓”，擁有“動物”對象的屬性，并增加一個屬性為：動物名稱，再增加一個方法，返回動物名稱+腿的數量+是否有尾巴的描述，請使用javascript原型鏈繼承來創建以上2個對象。

參考：

原型鏈：

1 function Animal(){}

2 Animal.prototype.leg=4;

3 Animal.prototype.tail=true;

4 var animal=new Animal();

5 function Cat(){}

6 Cat.prototype=animal;

7 Cat.prototype.name='cat';

8 Cat.prototype.getInfo=function(){

9???? return "Animal's name:"+this.name+",number of leg:"+this.leg+",has tail:"+Boolean(this.tail);

10 };

11 var cat=new Cat();

12 cat.getInfo();

復制代碼

?

構造器：

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);

8???? this.name=name;

9???? this.getInfo=function(){

10???????? return "Animal's name:"+this.name+",number of leg:"+this.leg+",has tail:"+Boolean(this.tail);

11???? };

12 }

13

14 var cat=new Cat('cat',4,true);

15 cat.getInfo();

復制代碼

?