前端笔试题总结-优快云博客

本文深入探讨了JavaScript编程中的关键技巧，包括异步控制、事件管理、字符串对比、对象克隆等，通过具体实例展示了如何在实际项目中有效运用这些技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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