前端笔试面试题之二（2015阿里前端笔试）
程序员文章站
2022-06-27 21:51:37
@author: 周丹 @email: sharon_zd@qq.com @datetime: 2016/08/31 题目如有侵权行为,请联系删除; 答案仅供参考,如有不同意见,欢迎留言讨论; 转载请注明出处 @author: 周丹 @email: sharon_zd@qq.com @datetim ......
@author: 周丹
@email: sharon_zd@qq.com
@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
答案部分
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>
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 }
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");
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>