前端笔试面试题之二(2015阿里前端笔试)
@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
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.name)
9. 原型; 原型链; undefined; 添加该属性并赋值
10. 考察dom操作;排序等
展开查看html代码
展开查看css代码
展开查看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>
前端面试题大合集
前端笔试面试题之二(2015阿里前端笔试)相关推荐
- 前端经典面试题(二)-李游Leo-专题视频课程
前端经典面试题(二)-80人已学习 课程介绍 在鱼龙混杂的前端行业中,面试一直是一门非常重要的课程,尤其是笔试题. 本课程精选了14道出现率颇高的经典的前端面试题,从浅入深的了解认知这 ...
- 继鹅厂前端No.1离职后,据传阿里前端No.1近日毕业
上一篇:为什么互联网大厂一边裁员,一边招人? 继鹅厂前端No.1离职后,据传阿里前端No.1前天毕业 就在上个月,腾讯前端级别zui高专家,职级T13的前端级别黄希彤官宣被裁,其夫人在小红书还开设了专 ...
- 【前端】2015阿里前端实习生在线笔试题
网上找的题,自己做了做. ... 2015阿里巴巴前端实习生在线笔试题 1. (单项选择)对于下列程序运行结果,符合预期的是 function f1() { console.time('time sp ...
- 前端笔试面试题常见问题,5年前端汇总
这里将收集我做过的所有的前端面试笔试题,并根据自己的理解提供解答,以及一些关于前端找工作方面的经验等. 欢迎拍砖,一起刷题,涨姿势,get新技能,找到好工作. 前端笔试面试题部分 1.md C ...
- Web前端经典面试试题(二)
上次由于时间有限只分享了一部分的前端面试题,所以本篇继续分享前端经典面试试题 一. 栈和队列的区别? 栈的插入和删除操作都是在一端进行的,而队列的操作却是在两端进行的. 队列先进先出,栈先进后出. 栈 ...
- ajax小猿圈面试题,小猿圈之2019年前端JavaScript面试题(二)
小猿圈前端讲师今天继续给你总结js面试题,前面一篇文章咱们已经有一片js基础部分面试题,今天小猿圈web讲师为你讲解js前端应用设计问题,一定要好好看哦,为了能赢在其他人前面. JavaScript前 ...
- 前端 datatable 居中_Midway Serverless 如何让阿里前端提效 50%?
本项目 Github: https://github.com/midwayjs/midway, 开源是为了给前端和 的发展献一份力,还请到 Github 体验一下,并且帮忙点个 Star~ ♂️ 感 ...
- 前端笔试面试题之三(2015美的前端笔试)
前端笔试面试系列之三----2015美的前端笔试 @author: 周丹 @email: sharon_zd@qq.com @datetime: 2016/08/31 题目如有侵权行为,请联系删除; ...
- 软件测试常见笔试面试题(二)
本博客内容 一.什么是静态测试?动态测试? 二.什么是回归测试? 三.如果能够执行完美的黑盒测试,还需要进行白盒测试吗(黑盒和白盒的区别?) 四.软件测试分几个阶段?各阶段重点测试什么?各个阶段的含义 ...
最新文章
- (转)MSSQL中如何用SQL清除所有表的数据(downmoon)?
- 个人易遗忘的代码记录(6) 汉字转拼音
- 【机器学习算法专题(蓄力计划)】五、机器学习中的线性代数的基础操作
- Silverlight WCF RIA服务(十三)数据 3
- MFC实现图像灰度、采样和量化功能详解
- 飞鸽推广的超级商务微博的栏目介绍(二)
- 和朱晔一起复习Java并发(二):队列
- 安装xmanager linux系统,安装Xmanager登陆Linux操作系统[图文]
- zendstudio for mac破解版
- [JNI] 开发基础 (8)c语言typedef
- 基于spring websocket实现广播及点对点推送功能
- 计算机化学的dft的意义,第四章 密度泛函理论(DFT) 4.1 引言 4.2 DFT的优点 4.3 Hohenberg-Kohn定理 4.4 能量泛函公式...
- 计算机硬件4核是什么意思,8核,6核,4核和双核CPU是什么意思?
- Virtex6 PCIe 超简版基础概念学习(二)(转载)
- pdfjs转图片_Vue项目pdf(base64)转图片
- OpenStack Blazar 架构解析与功能实践
- web3.js基础知识简单汇总
- 本科计算机专业sci好写吗,保研经验:本科发表4篇SCI,横扫北大、清华、中科大、中科院、浙大17个OFFER!...
- 致读者:冰河技术微信公众号的重大调整!!
- Matlabe绘图plot求单调区间极大极小最值问题
热门文章
- crontab 日志_Nginx日志切割并计划任务自动上传到FTP服务器
- CTF入门--题目介绍
- YARN的服务库和事件库
- Hive 之 排序和reduce设置
- (60)FPGA比较器实现(function)
- 6 SystemVerilog语言编写售货机
- navmenu 收起没有动画 element_ABC360等3家英语动画片课程测评:用动画片学英语不靠谱?...
- 21 Qt中ui设计中的一些小知识点
- Java学习日报—泳道与Feign—2021/11/30
- 计算机应用基础的文档,计算机应用基础