前端笔试面试题之二（2015阿里前端笔试）

@author: 周丹

@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属性有关

扫描二维码关注公众号，回复： 6835493 查看本文章

　　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>

前端面试题大合集