前端笔试题总结

1、异步执行函数

实现函数asyncEach,依次执行函数func1,func2,func3的异步控制

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

代码实现

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机制,一个事件可以被多个订阅,每个订阅能依次收到事件消息,参考用例:

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:

<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。方法原型描述如下

/**
*@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实现对象的克隆

/*克隆对象*/
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()  

原文地址:https://www.cnblogs.com/WaTa/p/5903963.html