2022年阿里巴巴前端工程师面试题（求职面试回答资料）

1、 2022年阿里巴巴前端工程师面试题第1题： 问答题 请列举7种以上常用的HTML标签，说明其语义。 1.div标签，是一个块元素，就像一个大盒子，可以放各式各样的东西，如：图片 2.p标签，也是一个块元素，它通常是用来放一段话的 3. h1,h2h6标签，也是一个块元素，常用来放标题 4.span标签，是一个行内元素，常用来处理一段话中的某几个字符 5.img标签，用来加载图片的标签 6.table标签，用来创建表格的标签 7.br标签，用来换行的标签 8.hr标签，用来画线的标签 9.a一个点击跳转的超链接标签 10.ul一个用来做列表的标签 第2题： 请说明下面各种状况的执行结果，并注明

2、产生对应结果的理由。 function doSomething() alert(this); element.onclick = doSomething，点击element元素后。 element.onclick = function() doSomething()， 点击element元素后。 直接执行doSomething()。 解析： 弹出element object，通过函数赋值方式，this直接指向element对象 弹出window object，this是写在doSomething这个函数里面的，而这种方式的大事绑定写法并没有将element对象传递给this，而在默认状况下th

3、is指向window 弹出window object，没有绑定对象的状况下this默认指向window 第3题： 请用JavaScript语言实现 sort 排序函数，要求：sort(5, 100, 6, 3, -12) / 返回 -12, 3, 5, 6, 100。 假如你有多种解法，请阐述各种解法的思路及优缺点。（仅需用代码实现一种解法，其它解法用文字阐述思路即可） function sort(arr) for(var i=0;iarr.length-1;i+) for(var j=0;jarr.length-i-1;j+) if(arrjarrj+1) var hand=arrj; ar

4、rj=arrj+1; arrj+1=hand; return arr; 第4题： 请依据下面的HTML和CSS代码，画出布局示意图 divid=page divclass=main divclass=sub/div /div divclass=nav/div /div styletype=text/css #pagewidth:520px; .navwidth:200px;float:right; .mainwidth:200px;float:left;padding-left:110px; .subwidth:100px;float:left;margin:10px010px-100px;

5、.mainborder:1pxsolid#000; .nav,.subborder:1pxdashed#000;height:300px; .subheight:280px; /style 第5题： 阅读以下JavaScript代码： if (window.addEventListener) var addListener = function(el, type, listener, useCapture) el.addEventListener(type, listener, useCapture); ; else if (document.all) addListener = functi

6、on(el, type, listener) el.attachEvent(on + type, function() listener.apply(el); ); ; 请阐述 a) 代码的功能; b) 代码的优点和缺点; c) listener.apply(el) 在此处的作用; d) 假如有可改进之处，请给出改进后的代码，并说明理由。 a) 功能：大事注册 b) 优点：跨扫瞄器，特性探测，性能优化。缺点：document.all c) 作用：使得IE中listener的this 为 el，与其它扫瞄器全都 d) 改进：document.all改成window.attachEvent; us

7、eCapture的默认 第6题： 请编写一个JavaScript 函数toRGB，它的作用是转换CSS中常用的颜色编码。 要求： alert(toRGB(#0000FF); / 输出 rgb(0, 0, 255) alert(toRGB(invalid); / 输出 invalid alert(toRGB(#G00); / 输出 #G00 function toRGB(color) var regex = /#(0-9a-fA-F2)(0-9a-fA-F2)(0-9a-fA-F2)$/ match = color.match(regex) return match ? rgb(+parseIn

8、t(match1, 16)+,+parseInt(match2, 16)+,+parseInt(match3, 16)+): color 第7题： 尝试实现解释部分的Javascript代码，可在其他任何地方添加更多代码（如不能实现，说明一下不能实现的缘由）： var Obj = function(msg) this.msg = msg; this.shout = function() alert(this.msg); this.waitAndShout = function() /隔五秒钟后执行上面的shout方法 var Obj = function(msg) this.msg = msg

9、; this.shout = function() alert(this.msg); this.waitAndShout = function() var that = this; setTimeout(that.shout, 5000); /隔五秒钟后执行上面的shout方法 return this; Obj(shouting).waitAndShout(); 第8题： 请编写一个JavaScript函数，它的作用是校验输入的字符串是否是一个有效的电子邮件地址。要求： a) 使用正则表达式。 b) 假如有效返回true ，反之为false。 var checkEmail = function

10、(email) var preg = (a-zA-Z|w-_.*a-zA-Z0-9)(w+.)+w+$，, pregObj =new RegExp(preg); return pregObj.test(email); 第9题： 请分别列出HTML、JavaScript、CSS、Java、php、python的解释代码形式。 !- HTML 解释 - / JavaScript 解释 /* * JavaScript 多行解释 */ /* CSS 解释 */ / Java 解释 /* * Java 多行解释 */ / php 单行解释 # php 单行解释 /* * php多行解释 */ # Pyt

11、hon 单行解释 Python 多行解释 第10题： 依据下图，编写HTML结构。要求：遵循xHTML 1.0规范且符合Web语义。 div class=item div class=item-pic a href=path/to/item img src=path/to/img alt=商品图片 / /a /div div class=item-desc a href=path/to/item/联想IdeaPad U130红色至尊 高性价比/a /div div class=item-price em￥8888.00/em /div /div 第11题： 请编写一段JavaScript脚本生

12、成下面这段DOM结构。要求：使用标准的DOM方法或属性。 div id=”example” p class=”slogan”淘！你喜爱/p /div window.onload = function() var div = document.createElement(div); div.id = example; var p = document.createElement(p); p.className = slogan; p.innerHTML = 淘！你喜爱; div.appendChild(p); document.body.appendChild(div); 第12题： 请用CSS

13、定义p标签，要求实现以下效果: 字体颜色在IE6下为黑色(#000000)；IE7下为红色(#ff0000)；而其他扫瞄器下为绿色(#00ff00)。 p color:#0f0; _color:#000;/*ie6*/ /*ie7*/ *+html p color:#f00; 第13题： 请简化以下的CSS代码，并给出简洁的说明。 div.container width: 500px; background-image: url(/img/sprite.png); background-repeat: no-repeat; background-position: 0px -78px; div

14、.container ul#news-list, div.container ul#news-list li margin: 0px; padding: 0px; div.container ul#news-list li padding-left: 20px; background-image: url(/img/sprite.png); background-repeat: no-repeat; background-position: -120px 0px; A font-size: 14px; font-weight：bold； line-height: 150%; color: #0

15、00000; div.container width: 500px; background: url(/img/sprite.png) no-repeat 0 -78px; #news-list, #news-list li margin: 0 padding: 0; #news-list li padding-left: 20px; background: url(/img/sprite.png) no-repeat -120px 0; A font: bold 14px/150%; color: #000; p class=MsoNormal 假如div.container和#news-l

16、ist li背景图合并，使用 p class=MsoNormal div.container,#news-list li background: url(/img/sprite.png); p class=MsoNormal 也正确。 /p 第14题： 请编写一个通用的大事注册函数（请看下面的代码）。 function addEvent(element, type, handler) / 在此输入你的代码，实现预定功能 function addEvent(element, type, handler) / 在此输入你的代码，实现预定功能 if (element.addEventListener

17、) element.addEventListener(type, handler, false); else if (element.attachEvent) /for IE element.attachEvnet(“on” + type, handler); else element“on” + type = handler; 第15题： 下面是个输入框 当没有猎取焦点时，显示灰色的提示信息：当用户输入时，隐蔽提示文字，且恢复为默认色：当输入框失去焦点，假如输入为空，需还原提示信息：要求： a) 写出HTML和CSS代码 b) 用JavaScript实现功能 !DOCTYPE htmlhtm

18、l lang=enheadmeta charset=UTF-8titleDocument/title/headstyle#contentcolor:grey;/style bodyinput type=text id=content value=请输入内容/bodyscriptvar input = document.getElementById(content);input.onfocus = function()if(this.value = 请输入内容)this.value = ;this.style.color = black;input.onblur = function()if(t

19、his.value = )this.style.color = grey; this.value = 请输入内容;/script/html 第16题： 请给JavaScript的String 原生对象添加一个名为trim 的原型方法，用于截取空白字符。要求 alert( taobao.trim(); / 输出 taobao alert( taobao .trim(); / 输出 taobao Stotype.trim = function() return this.replace(/s+|s+$/g, ); ; 第17题： 请编写一个JavaScript函数 parseQueryString

20、，它的用途是把URL参数解析为一个对象，如： var url = “http:/./index.php?key0=0key1=1key2=2” var obj = parseQueryString(url); alert(obj.key0) / 输出0 function parseQueryString ( name ) name = name.replace(/,).replace(/,); var regexS = ?+name+=(#*); var regex = new RegExp( regexS ); var results = regex.exec( window.locatio

21、n.href ); if( results = null ) return ; else return results1; 第18题： 请指出下面代码中不符合xHTML 1.0规范的地方，说明理由，并写出改善后的代码： h1p小明的表白/p/h1 dl dtpdiv小明说：/div/p/dt dd”淘宝网，i每天上/i。”/dd ddb”淘我喜爱！” /b/dd /dl 不合理的地方： 1、 h1元素包含p元素，理由：h1元素内不能包含其他块级元素； 2、 dt元素包含p元素和div元素，理由：dt元素内不能包含其他块级元素；3、 p元素包含div元素，理由：p元素内不能包含其他块级元素；4、

22、 i元素，理由：i表样式斜体，不符合语义化。5、 b元素，理由：b表样式粗体，不符合语义化。 第19题： 请把以下用于连接字符串的JavaScript代码修改为更有效率的方式 var htmlString = div class=”container” + ul id=”news-list”; for (var i = 0; i NEWS.length; i+) htmlString += lia href=” + NEWSi.LINK + + NEWSi.TITLE + /a/li; htmlString += /ul/div; var htmlString = div class=”container” + ul id=”news-list”; for (var i = 0; i NEWS.length; i+) var newsItem = NEWSi; htmlString += lia href=” + newsItem.LINK + + newsIte