前端筆試面試題之二（2015阿裡前端筆試）

@author: 周丹 @email: [email protected] @datetime: 2016/08/31 題目如有侵權行為,請聯繫刪除; 答案僅供參考,如有不同意見,歡迎留言討論; 轉載請註明出處 @author: 周丹 @email: [email protected] @datetim ...

@author: 周丹

@email: [email protected]

@datetime: 2016/08/31

題目如有侵權行為,請聯繫刪除;

答案僅供參考,如有不同意見,歡迎留言討論;

轉載請註明出處

題目部分

1. 輸出對象中值大於2的key的數組。期待輸出["c","d"]

1 var data = {a: 1, b: 2, c: 3, d: 4};
2 Object.keys(data).filter(function (x) {return ________ });

2. 下麵關於css佈局的描述,不正確的是?

　　a.塊級元素實際占用的寬度與它的width屬性有關

　　b.塊級元素實際占用的寬度與它的border屬性有關

　　c.塊級元素實際占用的寬度與它的padding屬性有關

　　d.塊級元素實際占用的寬度與它的background屬性有關

3.下麵關於html的描述不推薦的是?

　　a.在頁面頂部添加doctype聲明

　　b.在</head>...<body>中間插入HTML代碼

　　c.避免使用<font>標簽

　　d.使用<table>元素展現學生成績表等數據

4.下麵哪個屬性不會讓div脫離文檔流（normal flow）?

　　a. position:absolute;

　　b. position:fixed;

　　c. position:relative;

　　d. float:left

5.瀏覽器在一次HTTP請求中,需要傳輸一個4097位元組的文本數據給服務端,可以採用哪些方式?

　　a.存入indexDB

　　b.寫入cookie

　　c.放在url參數

　　d.寫入session

　　e.使用post

　　f.放在local storage

6.下列事件哪個不是由滑鼠觸發的事件?

　　a.click

　　b.contextmenu

　　c.mouseout

　　d.keydown

7.請實現一個fibonacci函數,要求其參數和返回值如下所示:
/**
* @desc: fibonacci
* @param: count{number}
* @return: result{number}第count個fibonacci值,計數從0開始
fibonacci數列為: {1,1,2,3,5,8,13,21,34……}
則getNthFibonacci(0)返回值為1, getNthFibonacci(4)返回值為5
*/
function getNthFibonacci(count){ }

8.填寫內容讓下麵代碼支持a.name="name1"; b.name="name2";

1 function obj(name){
2 __________________
3 }
4 obj.__________ = "name2";
5 var a = obj("name1");
6 var b = new obj;

9.javascript語言特性中,有很多方面和我們接觸的其他編程語言不太一樣,比如說,javascript語言實現繼承機制的核心就是_____,而不是java語言那樣的類式繼承。JavaScript解析引擎在讀取一個Object的屬性的值時,會沿著_____向上尋找, 如果最終沒有找到, 則該屬性值為_______; 如果最終找到該屬性的值, 則返回結果。與這個過程不同的是, 當JavaScript解析引擎執行給一個Object的某個屬性值賦值的時候,如果當前Object存在該屬性,則改寫該屬性的值,如果當前的Object本身並不存在該屬性, 則__________________.

10.頁面中如下格式的人員信息表格:

序號	姓名	年齡	籍貫
1	張三	24	北京
2	李斯	43	陝西
3	韓信	49	湖北
4	宋江	43	山東
5	李逵	38	青海
6	林沖	42	北京

表格每行的HTML結構為:

1 <tr>
2     <td><input type="checkbox"></td>
3     <td>2</td>
4     <td>李斯</td>
5     <td>43</td>
6     <td>陝西</td>
7 </tr>

假定表格的元素id為person-list,奇數行的class名為odd。請實現如下功能:

選中單選框,點擊刪除時對應行消失;
點擊排序時,按照升序對錶格中的每一行進行排序;
點擊篩選,籍貫處會變成一個下拉框,選項值為當前表格中鎖包含的省份名稱,選中某個省份,展示對應省份的人員信息

11. 實現如下頁面佈局。

logo 用戶名 content-自適應佈局 aside-定寬200px foot

答案部分

1. x > 'b'

1 var data = {a: 1, b: 2, c: 3, d: 4};
2 console.log(Object.keys(data));  //列印["a", "b", "c", "d"] ; Object.keys返回一個包含指定對象的所有非繼承可枚舉屬性名的數組
3 var array = Object.keys(data).filter(function (x) {    //filter返回的是調用的數組的一個子集
4     return x > 'b';
5 });
6 console.log(array);  //["c", "d"]

2. 預設w3c盒模型中，塊級元素實際占的寬度為 width+padding+border
在ie盒模型中，塊級元素實際占的寬度為 width（width的寬度已經包含了content和padding和border）
無論如何，都與background沒關係。應選D

3. B. 其中C選項,<font>用來規定文本的字體、字體尺寸、字體顏色。的確不贊成使用，應該用樣式替換它。

4. C

文檔流：即自上而下，從左至右
三種情況會脫離文檔流：float，fixed，absolute
absolute:對象脫離正常文檔流，使用top，right，bottom，left屬性進行絕對定位，層疊通過z-index屬性定義。
fixed:對象脫離正常文檔流，使用top，right，bottom，left等屬性以視窗為參考點進行定位，當出現滾動條時，對象不會隨著滾動。而其層疊通過z-index屬性定義。
relative：對象遵循正常文檔流，但將依據top，right，bottom，left等屬性在正常文檔流中偏移位置。而其層疊通過z-index屬性定義。 static：position預設值，無特殊定位，對象遵循正常文檔流。top，right，bottom，left等屬性不會被應用 z-index屬性：又稱為對象的層疊順序，它用一個整數來定義堆疊的層次，整數值越大，則被層疊在越上面，當然這是指同級元素間的堆疊，如果兩個對象的此屬性具有同樣的值，那麼將依據它們在HTML文檔中流的順序層疊，寫在後面的將會覆蓋前面的。需要註意的是，父子關係是無法用z-index來設定上下關係的，一定是子級在上父級在下。使用static定位或無position定位的元素z-index屬性是無效的。

5. 選e.

indexDB是html5的本地存儲，用作離線應用
cookie通過瀏覽器記錄信息確定用戶身份，最大為4k=4096b

url參數用的是get方法，最大2k=2048b
session是伺服器端使用的記錄客戶端狀態的機制
post傳輸數據足夠大
local Storage是html5本地存儲

6. 選d。

click 滑鼠左鍵點擊事件
contextmenu 滑鼠右鍵點擊事件
mouseout 滑鼠移出事件
keydown 鍵盤按下事件

7. 有三種實現方式, 推薦方法三。

 1 //純迴圈實現
 2 function getNthFibonacci(count){
 3     console.log('沒用遞歸called')
 4     var i=0, j=1, k=0;
 5     var x = 1;
 6     for(i=0,j=1,k=0; k < count;i=j,j=x,k++ ){
 7         x=i+j;
 8     }
 9     return x;
10 }
11 for(var i = 0;i<9;i++){
12     console.log(getNthFibonacci(i));
13 }
14 //遞歸實現
15 var getNthFibonacci2 = function (n) {
16     console.log('遞歸called');
17     return n < 2 ? 1 : getNthFibonacci2(n - 1) + getNthFibonacci2(n - 2);
18 };
19 for(var i = 0;i<9;i++){
20     console.log(getNthFibonacci2(i));
21 }
22 //記憶實現，減少函數調用次數。參考《JavaScript語言精粹》
23 var getNthFibonacci3 = function () {
24     console.log('記憶遞歸called');
25     var memo = [1, 1]; //使用一個數組保存我們的存儲結果，存儲結果可以隱藏在閉包里
26     var fib = function (n) {
27         var result = memo[n];
28         if (typeof result !== 'number') { //否則就進行計算，並存儲
29             result = fib(n - 1) + fib(n - 2);
30             memo[n] = result;
31         }
32         return result; //如果已經知道存儲結果，就立即返回這個存儲結果
33     };
34     return fib;
35 }();
36 for(var i = 0;i<9;i++){
37     console.log(getNthFibonacci3(i));
38 }

8. 考察this指向和原型鏈

 1 function obj(name){
 2     console.log(this);
 3     if(this === window){   //判斷通過何種方式調用。
 4         if(name){
 5             this.name = name;
 6         }else{
 7             this.name = 'name1';
 8         }
 9         return this;
10     }
11 }
12 obj.prototype.name = "name2";
13 var a = obj("name1");   //如果通過函數方式調用,this會指向window。
14 var b = new obj;        //如果通過new方式調用,this會指向實例化後的對象,obj{}
15 var c = obj();      //如果 函數調用的時候不帶參數,預設name為name1
16 console.log(a.name);
17 console.log(b.name);
18 console.log(c.na