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

時間 2019-11-30

標籤前端筆試面試之二阿里欄目快樂工作简体版

原文原文鏈接

@author: 周丹javascript

@email: sharon_zd@qq.comcss

@datetime: 2016/08/31html

題目若有侵權行爲,請聯繫刪除;html5

答案僅供參考,若有不一樣意見,歡迎留言討論;java

轉載請註明出處node

題目部分

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

答案部分

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.name)

9. 原型; 原型鏈; undefined; 添加該屬性並賦值

10. 考察dom操做;排序等

 1 <table id="person-list">
 2     <thead>
 3     <tr>
 4         <td>
 5             <button id="remove">刪除</button>
 6         </td>
 7         <td>序號</td>
 8         <td>姓名</td>
 9         <td>年齡
10             <button id="sort">排序</button>
11         </td>
12         <td>籍貫
13             <button id="select">篩選</button>
14         </td>
15     </tr>
16     </thead>
17     <tbody>
18     <tr>
19         <td>
20             <input type="checkbox"/>
21         </td>
22         <td>1</td>
23         <td>張三</td>
24         <td>24</td>
25         <td>北京</td>
26     </tr>
27     <tr>
28         <td><input type="checkbox"/>
29         </td>
30         <td>2</td>
31         <td>李斯</td>
32         <td>43</td>
33         <td>陝西</td>
34     </tr>
35     <tr>
36         <td><input type="checkbox"/>
37         </td>
38         <td>3</td>
39         <td>韓信</td>
40         <td>49</td>
41         <td>湖北</td>
42     </tr>
43     <tr>
44         <td><input type="checkbox"/>
45         </td>
46         <td>4</td>
47         <td>宋江</td>
48         <td>43</td>
49         <td>山東</td>
50     </tr>
51     <tr>
52         <td><input type="checkbox"/>
53         </td>
54         <td>5</td>
55         <td>李逵</td>
56         <td>38</td>
57         <td>青海</td>
58     </tr>
59     <tr>
60         <td><input type="checkbox"/>
61         </td>
62         <td>6</td>
63         <td>林沖</td>
64         <td>42</td>
65         <td>北京</td>
66     </tr>
67     </tbody>
68 </table>

展開查看html代碼

 1 body {
 2     font-family: "arial", sans-serif;
 3 }
 4 #person-list {
 5     width: 80%;
 6     margin-left: 10%;
 7     margin-right: 10%;
 8 }
 9 #person-list thead {
10     font-weight: bold;
11 }
12 #person-list button {
13     background-color: transparent;
14     border: 0;
15     font-weight: bold;
16     font-size: small;
17     padding-left: 0;
18     color: #6ba9ee;
19 }
20 #person-list thead tr td {
21     border-bottom: 1px #ccc solid;
22 }
23 #person-list tbody tr td:nth-child(2) {
24     font-weight: bold;
25 }
26 #person-list tbody tr td {
27     border-top: 1px #ccc solid;
28     padding-top: 5px;
29     padding-bottom: 5px;
30 }
31 #person-list tbody tr:nth-child(2n+1) {
32     background-color: #eee;
33 }

展開查看css代碼

 1 var checks = document.getElementsByTagName('input');
 2 var tbody = document.getElementsByTagName("tbody")[0];
 3 var trs = tbody.getElementsByTagName("tr");
 4 var remove = document.getElementById("remove");
 5 var sort = document.getElementById("sort");
 6 var select = document.getElementById("select");
 7 
 8 remove.onclick = function(){
 9     //刪除選中行
10     for(var i = checks.length-1; i >= 0;i--){ //由於removeChild的時候，長度會變化，因此不能以小於length做爲判斷條件，應該從後往前掃描
11         if(checks[i].checked){
12             tbody.removeChild(checks[i].parentNode.parentNode);
13         }
14     }
15     //修改序號
16     for(var i = 0;i < trs.length; i++){
17         var td=trs[i].getElementsByTagName("td")[1];
18         td.innerHTML=i+1;
19         }
20         };
21 
22 sort.onclick=function(){
23     //循環遍歷，後面比它小的就插入到它前面去
24     for(var i=0;i < trs.length; i++){
25         var td=trs[i].getElementsByTagName("td")[3];
26         for(var j=i;j < trs.length;j++){
27             var tdd=trs[j].getElementsByTagName("td")[3];
28             if((td.innerHTML - tdd.innerHTML)>0){
29                 td.parentNode.parentNode.insertBefore(tdd.parentNode,td.parentNode);
30             }
31         }
32     }
33     //修改序號
34     for(var i=0;i < trs.length;i++){
35         var td=trs[i].getElementsByTagName("td")[1];
36         td.innerHTML=i+1;
37     }
38 };
39 
40 select.onclick=function(){
41     //若是已經篩選過，頁面中有下拉框了就不要再執行此函數了。
42     if(document.getElementsByTagName('select').length>0) return false;
43     var provinces = [];
44     //把全部的省份取出來，存放到數組裏
45     for(var i=0;i < trs.length;i++){
46         var td=trs[i].getElementsByTagName("td")[4];
47         var prov=td.innerHTML;
48         provinces.push(prov);
49     }
50     //去重
51     for(var j=0;j< provinces.length;j++){
52         for(var k=provinces.length;k>j;k--){ //同理，由於長度會發生變化，因此從後往前算
53             if(provinces[j] === provinces[k]){
54                 provinces.splice(k,1);
55             }
56         }
57     }
58     //建立selectElem下拉框元素，option爲省份
59     var selectElem = document.createElement("select");
60     for(var z = 0;z < provinces.length;z++){
61         var option=document.createElement("option");
62         option.innerHTML=provinces[z];
63         option.value=provinces[z];
64         selectElem.appendChild(option);
65     }
66     var childNodes=select.parentNode.childNodes;
67     //去掉籍貫兩個字
68     for(var x= 0; x< childNodes.length;x++){
69         if(childNodes[x].nodeType === 3){
70             childNodes[x].parentNode.removeChild(childNodes[x]);
71         }
72     }
73     //在按鈕以前插入select下拉框
74     select.parentNode.insertBefore(selectElem,select);
75     //監控下拉框的option的點擊事件，注意是下拉框的onchange，而不是option的onclick
76     selectElem.onchange = function(){
77         for(var i =0 ;i< trs.length;i++){
78             trs[i].style.display="none" ;
79             if(trs[i].getElementsByTagName("td")[4].innerHTML == selectElem.value){
80                 trs[i].style.display = "";
81             }
82         }
83     };
84 };
85 var checks = document.getElementsByTagName('input');
86 var tbody = document.getElementsByTagName("tbody")[0];
87 var trs = tbody.getElementsByTagName("tr");
88 
89 var remove = document.getElementById("remove");
90 var sort = document.getElementById("sort");
91 var select = document.getElementById("select");

展開查看js代碼

11. 考察頁面佈局

1 #head{border: green 1px solid;}
2 #head #logo{border: red 1px solid;height: 80px;width: 80px;margin-left: 10px;margin-top: 9px;}
3 #head #user{float: right;border: 1px black solid;width: 100px;margin-right: 10px;margin-bottom: 10px;}  /*右浮動*/
4 #head #user span{float: right;}  /*右浮動*/
5 #head:after{display: block;clear: both;content: '';visibility: hidden;height: 0;}  /*清除浮動*/
6 #container{position: relative;height: 300px;margin-top: 10px}    /*相對定位*/
7 #container #left{border: blue 1px solid;float: left;height: 300px;position: absolute;right: 310px;left: 0;}  /*絕對定位，左0右310，就能夠撐出寬度來*/
8 #container #right{width: 300px;border: red 1px solid;height: 300px;right: 0;position: absolute;}   /*絕對定位，右0，就能夠始終在最右邊*/
9 #footer{height: 50px;line-height: 50px;border: saddlebrown 1px solid;margin-top: 10px;text-align: center;}  /*line-height = height可使元素垂直居中*/

1 <div id="head">
2     <div id="logo">logo</div>
3     <div id="user"><span>用戶名</span></div>
4 </div>
5 <div id="container">
6     <div id="left">content-自適應佈局</div>
7     <div id="right">aside-定寬200px</div>
8 </div>
9 <div id="footer"><span>foot</span></div>