前端笔试题汇总(一)

题目一 : 统计字符串中出现次数最多的字符

eg : var s = "abcdefghijklabcdaaaefadca" ; // 其中a出现次数最多,7次

拿到这个题目,会怎么做呢?

首先我想到两种思路:

  • 暴力查找,一个一个元素拿出来,再循环,得到次数放入json键值对中,再比较大小
  • 找到一个删除一个,利用正则表达式替换,长度之差便是其重复的次数

暴力查找:

var s = "abcdefghijklabcdaaaefadca";
var json = {};
var Max = {
    key:"",
    value:0
};
var arr = s.split("");
for(var i=0;i<arr.length;i++){
    json[s[i]] = 0;
    for(var j=0;j<arr.length;j++){
        if(s[i] == arr[j]){
            json[s[i]]++;
        }
    }
}
for(prop in json){
    if(json[prop] > Max.value){
        Max.key = prop;
        Max.value = json[prop]
    }
}
console.log(Max); //得出正确结果

正则法:

var s = "abcdefghijklabcdaaaefadca";
//用于存放各字母出现的次数
var json = {};
//用于存放出现次数为最大值的字母
var Max = {
    key:"",
    value:0
};
//正则替换,长度之差就是出现的次数
while(s){
    var len1 , len2;
    len1 = s.length;
    var first = s.charAt(0);
    s = s.replace(new RegExp(first,"g"),'');
    len2 = s.length;
    json[first] = len1-len2;
}
//找最大值
for(prop in json){
    if(json[prop] > Max.value){
        Max.key = prop;
        Max.value = json[prop]
    }
}
console.log(Max); //得出答案

这个题目还有一个好方法:

var s = "abcdefghijklabcdaaaefadca";
var json = {};
var Max = {
    key:"",
    value:0
};
for(var i=0;i<s.length;i++){
    if(!json[str.charAt(i)]){
        json[str.charAt(i)] = 1;   //不存在就自动创建,
    }else{
        json[str.charAt(i)]++;     //如果已经存在就加1.
    }
}
console.log(json);
//找最大值
for(prop in json){
    if(json[prop] > Max.value){
        Max.key = prop;
        Max.value = json[prop]
    }
}
console.log(Max); //得出答案

这种算法时间复杂度为O(n),可以说是很简单了!

题目二 : 求下面的输出值

function Show(){
    getName = function(){
        console.log(1);
    }
    return this;
}; 
Show.getName = function(){
    console.log(2);
};
Show.prototype.getName = function(){
    console.log(3);
};
var getName = function(){
    console.log("4");
}
function getName(){
    console.log(5);
};

求这些问题的解:
1、Show.getName();    
2、getName();        
3、Show().getName();   
4、getName();          
5、new Show.getName();  
6、new Show().getName();  
7、new new Show().getName();

这道题目考察的是Javascript基础,

首先要明白JS执行过程:

  1. 先提升(先提升函数,再提升变量,如果名字一样,变量提升会覆盖函数提升)
  2. 再执行,如果遇到闭包创建
  3. 在闭包空间中反复1和2
  4. 先定义(提升),在执行
  5. 变量提升
  6. 函数提升

本题目解答如下:

  1. 形如 func.method(函数名.属性),函数也是对象,发现Show.getName()有定义,就执行方法属性,输出2
  2. 根据JS执行过程,先提升函数getName(),再提升变量getName , 同名覆盖,就知道变量getName覆盖了其同名函数,执行变量getName,结果是 “4”
  3. 形如 func().method() ,意思是先执行 func() , 由 func() 的返回值执行method方法,所以先要知道 func() 返回值是什么? return this; this指什么呢? 谁调用指向谁,func是全局调用 , 所以this指向window ,Show()函数执行后,里面把getName的定义该变了,所以,window.getName() 输出是 1
  4. getName() , 在当前环境等同于 window.getName() ,输出是 1
  5. new Show.getName() 先执行show.getName()输出2 在new一下
  6. new Show().getName() 使用了new关键字,是把函数show当成了构造器,此时return没有作用,getName在构造器里没有,找原型对象 输出 3
  7. new new Show().getName() 就是在第六问基础之上输出 3 之后,在new一个

javascript所有的函数都可以使用 new func()关键字,表示生成一个对象。这点理解了,理解上面的就简单

Javascript 简单概念

1、 javascript的typeof返回哪些数据类型

  • object , number , function , boolean , undefind , string

2、 检测数组的几种方法 , 检测obj是否是数组类型

  • Array.isArray(obj);
  • obj instanceof Array
  • arr.constructor.name
  • toString.call()

3、传统事件绑定和符合W3C标准的事件绑定有什么区别?

传统事件绑定:

<div onclick=””>123</div>
<script>
   div1.onclick=function(){};
</script>
<button  onmouseover=””></button>
  • 如果说给同一个元素绑定了两次或者多次相同类型的事件,那么后面的绑定会覆盖前面的绑定
  • 不支持DOM事件流 事件捕获阶段è目标元素阶段=>事件冒泡阶段

符合W3C标准的事件绑定的方式 addEventListener/attachEvent
A、非IE浏览器:addEventListener

  • 如果说给同一个元素绑定了两次或者多次相同类型的事件,所以的绑定将会依次触发
  • 支持DOM事件流的
  • 进行事件绑定传参不需要on前缀
  • addEventListener(“click”,function(){},true);//此时的事件就是在事件捕获阶段执行
  • 第三个参数:代表是否在捕获阶段执行,默认值是false
  • ddEventListener(“click”,function(e){})
  • addEventListener(“click”,function(){},false) 事件在冒泡阶段执行

B、IE浏览器

  • ie9开始,ie11 edge:addEventListener
  • ie9以前 ie8:attachEvent/detachEvent
  • 进行事件类型传参需要带上on前缀
  • dom1.attachEvent(“onclick”,functioin(){});
    这种方式只支持事件冒泡,不支持事件捕获

4、call和apply的区别

call和apply相同点:
都是为了用一个本不属于一个对象的方法,让这个对象去执行

  • toString.call([],1,2,3)
  • toString.apply([],[1,2,3])
  • Object.call(this,obj1,obj2,obj3)
  • Object.apply(this,arguments)

区别:

  • call第二个参数开始接受一个参数列表
  • apply第二个参数开始接受一个参数数组

5、jQuery框架中$.ajax()的常用参数有哪些?

  • type

    1. 类型:String
    2. 默认值: "GET")。请求方式 ("POST" 或 "GET"), 默认为 "GET"。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。
  • url

  1. 类型:String
  2. 默认值: 当前页地址。发送请求的地址。
  • success
  1. 类型:Function 请求成功后的回调函数。
  2. 参数:由服务器返回,并根据 dataType 参数进行处理后的数据;描述状态的字符串。
    这是一个 Ajax 事件。
  • options
  1. 类型:Object
  2. 可选。AJAX 请求设置。所有选项都是可选的。
  • async
  1. 类型:Boolean
  2. 默认值: true。默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。
    注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
  • beforeSend(XHR)
  1. 类型:Function
  2. 发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。
    XMLHttpRequest 对象是唯一的参数。
  3. 这是一个 Ajax 事件。如果返回 false 可以取消本次 ajax 请求
  • cache
  1. 类型:Boolean
  2. 默认值: true,dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,132评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,802评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,566评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,858评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,867评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,695评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,064评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,705评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,915评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,677评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,796评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,432评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,041评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,992评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,223评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,185评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,535评论 2 343

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,598评论 18 139
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,577评论 18 399
  • HTML HTML5标签 媒体查询head部分写法 Doctype作用? 严格模式与混杂模式如何区分?它们有何意义...
    Mayo_阅读 637评论 0 8
  • 关于中东, 除了那些错综复杂的冲突和战争, 最引人臆想的就是这片土地遍地土豪何其壮观。 比如迪拜, 很多人潜意识里...
    毛依乐阅读 427评论 0 0
  • 刚到塞尔维亚首都贝尔格莱德,就从国内传来四川九寨沟7级地震的消息,63人受伤,5人死亡(均为游客)。心被紧...
    木子春桃阅读 486评论 3 2