前端笔试题总结
1、异步执行函数
实现函数asyncEach,依次执行函数func1,func2,func3的异步控制
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | function func1(){ setTimeout( function (){console.log( "func1" )},Math.random()*1000) } function func2(){ setTimeout( function (){console.log( "func2" )},Math.random()*1000) } function func3(){ setTimeout( function (){console.log( "func3" )},Math.random()*1000) } asynEach(func1,func2,func3); //输出结果: func1 func2 func3 |
代码实现
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | var asyncGuid = 0, sto = window.setTimeout; window.setTimeout = function (fn) { sto(fn, asyncGuid++); } function asynEach() { [].slice.call(arguments).forEach( function (v) { setTimeout(v); }); } function func1(){ setTimeout( function (){console.log( "func1" )},Math.random()*1000) } function func2(){ setTimeout( function (){console.log( "func2" )},Math.random()*1000) } function func3(){ setTimeout( function (){console.log( "func3" )},Math.random()*1000) } asynEach(func1,func2,func3); |
2、事件管理器
实现事件管理器EventManager,实现sub/pub机制,一个事件可以被多个订阅,每个订阅能依次收到事件消息,参考用例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | EventManager.register( "event1" , function (){ console.log( "event1 triggerd" ); }) EventManager.register( "event1" , function (){ console.log( "event1_1 triggerd" ); }) EventManager.register( "event2" , function (){ console.log( "event2 triggerd" ); }) EventManager.triggerd( "event1" ); EventManager.triggerd( "event2" ); //输出结果是: event1 triggerd event1_1 triggerd event2 triggerd |
3、对比字符串的差异
实现函数diff,对比两个字符串str1和str2的差异,并列出一行为单位的添删的改动项
str1="dbccdef";
str2="abcdefg";
输出str2相对str1的变动,位置计数从0开始:
0:modify:d:a
2:delete:c
7:add:g
4、红楼梦
给出一张包含100个词的词库列表word_list(字符串数组),实现stat函数的统计《红楼梦》book_str(字符串)中出现的次数。
如果没有词库的情况下,查找使用频率最高的100个词,该怎么做?
5、在最新的chrome上实现如下需求,某些jsAPI想不起来可以用伪代码
原有HTML:
1 2 3 4 5 6 | <button type= "button" id= "block" >方块</button> <button type= "button" id= "circle" >正圆</button> <script> //实现代码 </script> |
需求:
实现一个画圆的类,方块类和正圆类继承画圆类。需要达到以下效果:
1)点击方块按钮,每在屏幕空白处点击鼠标,就在屏幕上生成一个100px的黑色方块,方块的中心坐标位于鼠标点击时候的坐标处,点击方块会console.log("Hello! I am block").
2) 点击正圆按钮,每在屏幕空白处点击鼠标,就在屏幕上生成一个100px的黑色正圆,正圆的中心坐标位于鼠标点击时候的坐标处,点击方块会console.log("Hello! I am circle"),再次点击会console.log("Goodby!")并以1秒的时间透明度渐变为0,然后消失。
6、利用原生的js实现一个事件绑定函数on,事件解绑函数off。方法原型描述如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | /** *@desc 绑定事件处理函数,当handler为空时解锁 *@param (HTMLElement) target DOM元素 *@param (String) eventName 事件类型名 *@param (Function) handler 事件处理函数 **/ function on(target,eventName,handler){ //todo } /** *@desc 解绑事件处理函数,当handler为空时解锁通过on绑定到同一元素同一事件类型的所有处理函数 *@param (HTMLElement) target DOM元素 *@param (String) eventName 事件类型名 *@param (Function) handler 事件处理函数 **/ function on(target,eventName,handler){ //todo } |
要求:
1>利用on给元素绑定事件时,要考虑调用on给同一个元素的相同事件类型绑定多个不同的事件处理函数,可能引起性能问题
2>给off()函数传递的handler为空时,要解绑之前通过on给元素绑定到同一事件类型的所有事件处理函数。
7、用原生的js实现对象的克隆
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | /*克隆对象*/ function concat(obj){ if (obj instanceof Object){ if (Object.create!=undefined){ return Object.create(obj); //html5规范中新增Object.create()方法 } else { var F = function (){ } F.prototype = obj; return new F(); } } else { return -1; } } var A = { "name" : "zhangtaifeng" , "age" : "21" } var B = concat(A); /*************对象B的原型是A*************/ B.job = "qianduankaifa" ; alert(B.name); |
对象B通过concat方法克隆了一个对象A()