程序题
1、看下列代码输出为何?解释原因。
1
2
3
4var a; alert(typeof a); // undefined alert(b); // 报错
解释:Undefined是一个只有一个值的数据类型,这个值就是“undefined”,在使用var声明变量但并未对其赋值进行初始化时,这个变量的值就是undefined。而b由于未声明将报错。注意未申明的变量和声明了未赋值的是不一样的。
2、看下列代码,输出什么?解释原因。
1
2
3var a = null; alert(typeof a); //object
解释:null是一个只有一个值的数据类型,这个值就是null。表示一个空指针对象,所以用typeof检测会返回”object”。
3、看下列代码,输出什么?解释原因。
1
2
3
4
5
6
7
8
9
10var undefined; undefined == null; // true 1 == true; // true 2 == true; // false 0 == false; // true 0 == ''; // true NaN == NaN; // false [] == false; // true [] == ![]; // true
- undefined与null相等,但不恒等(===)
- 一个是number一个是string时,会尝试将string转换为number
- 尝试将boolean转换为number,0或1
- 尝试将Object转换成number或string,取决于另外一个对比量的类型
- 所以,对于0、空字符串的判断,建议使用
===
。===
会先判断两边的值类型,类型不匹配时为false。
4、看下面的代码,输出什么,foo的值为什么?
1
2
3
4var foo = "11"+2-"1"; console.log(foo); console.log(typeof foo);
执行完后foo的值为111,foo的类型为Number。
“11”+2的结果是字符串112,然后“112”-“1”的结果是数值111。
5、看代码给答案。
1
2
3
4
5
6var a = new Object(); a.value = 1; b = a; b.value = 2; alert(a.value);
答案:2(考察引用数据类型细节)
6、已知数组var stringArray = [“This”, “is”, “Baidu”, “Campus”]
,Alert出”This is Baidu Campus”。
答案:alert(stringArray.join(“”))
7、已知有字符串foo=”get-element-by-id”,写一个function将其转化成驼峰表示法”getElementById”。
1
2
3
4
5
6
7
8
9function combo(msg){ var arr=msg.split("-"); for(var i=1;i<arr.length;i++){ arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1); } msg=arr.join(""); return msg; }
(考察基础API)
8、var numberArray = [3,6,2,4,1,5]; (考察基础API)
-
实现对该数组的倒排,输出[5,1,4,2,6,3]
-
实现对该数组的降序排列,输出[6,5,4,3,2,1]
1
2
3
4
5
6
7
8
9function combo(msg){ var arr=msg.split("-"); for(var i=1;i<arr.length;i++){ arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1); } msg=arr.join(""); return msg; }
9、输出今天的日期,以YYYY-MM-DD的方式,比如今天是2014年9月26日,则输出2014-09-26
1
2
3
4
5
6
7
8
9
10
11
12var d = new Date(); // 获取年,getFullYear()返回4位的数字 var year = d.getFullYear(); // 获取月,月份比较特殊,0是1月,11是12月 var month = d.getMonth() + 1; // 变成两位 month = month < 10 ? '0' + month : month; // 获取日 var day = d.getDate(); day = day < 10 ? '0' + day : day; alert(year + '-' + month + '-' + day);
10、将字符串”<tr><td>{$id}</td><td>{$name}</td></tr>
”中的{$id}
替换成10,{$name}
替换成Tony (使用正则表达式)
答案:”<tr><td>{$id}</td><td>{$id}_{$name}</td></tr>”.replace(/{$id}/g, ’10’).replace(/{$name}/g, ‘Tony’)
;
11、为了保证页面输出安全,我们经常需要对一些特殊的字符进行转义,请写一个函数escapeHtml,将<
, >
, &
, “
进行转义
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15function escapeHtml(str) { return str.replace(/[<>”&]/g, function(match) { switch (match) { case “<”: return “<”; case “>”: return “>”; case “&”: return “&”; case “””: return “"”; } }); }
12、foo =foo||bar
,这行代码是什么意思?为什么要这样写?
答案:if(!foo) foo = bar;
//如果foo存在,值不变,否则把bar的值赋给foo。
短路表达式:作为”&&”和”||”操作符的操作数表达式,这些表达式在进行求值时,只要最终的结果已经可以确定是真或假,求值过程便告终止,这称之为短路求值。
13、看下列代码,将会输出什么?(变量声明提升)
1
2
3
4
5
6
7var foo = 1; (function(){ console.log(foo); var foo = 2; console.log(foo); })();
答案:输出undefined 和 2。上面代码相当于:
1
2
3
4
5
6
7
8var foo = 1; (function(){ var foo; console.log(foo); //undefined foo = 2; console.log(foo); // 2; })();
函数声明与变量声明会被JavaScript引擎隐式地提升到当前作用域的顶部,但是只提升名称不会提升赋值部分。
14、用js实现随机选取10–100之间的10个数字,存入一个数组,并排序。
1
2
3
4
5
6
7
8
9
10var iArray = []; funtion getRandom(istart, iend){ var iChoice = istart - iend +1; return Math.floor(Math.random() * iChoice + istart; } for(var i=0; i<10; i++){ iArray.push(getRandom(10,100)); } iArray.sort();
15、把两个数组合并,并删除第二个元素。
1
2
3
4
5var array1 = ['a','b','c']; var bArray = ['d','e','f']; var cArray = array1.concat(bArray); cArray.splice(1,1);
16、有这样一个URL:http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e,请写一段JS程序提取URL中的各个GET参数(参数名和参数个数不确定),将其按key-value形式返回到一个json结构中,如{a:’1′, b:’2′, c:”, d:’xxx’, e:undefined}。
1
2
3
4
5
6
7
8
9
10function serilizeUrl(url) { var result = {}; url = url.split("?")[1]; var map = url.split("&"); for(var i = 0, len = map.length; i < len; i++) { result[map[i].split("=")[0]] = map[i].split("=")[1]; } return result; }
17、正则表达式构造函数var reg=newRegExp(“xxx”)
与正则表达字面量var reg=//有什么不同?匹配邮箱的正则表达式?
答案:当使用RegExp()构造函数的时候,不仅需要转义引号(即”表示”),并且还需要双反斜杠(即表示一个)。使用正则表达字面量的效率更高。
邮箱的正则匹配:
var regMail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;
18、看下面代码,给出输出结果。
1
2
3
4
5
6for(var i=1;i<=3;i++){ setTimeout(function(){ console.log(i); },0); };
答案:4 4 4。
原因:Javascript事件处理器在线程空闲之前不会运行。追问,如何让上述代码输出1 2 3?
1
2
3
4
5
6
7
8
9for(var i=1;i<=3;i++){ setTimeout((function(a){ //改成立即执行函数 console.log(a); })(i),0); }; 1 //输出 2 3
19、写一个function,清除字符串前后的空格。(兼容所有浏览器)
使用自带接口trim(),考虑兼容性:
1
2
3
4
5
6
7
8
9
10if (!String.prototype.trim) { String.prototype.trim = function() { return this.replace(/^s+/, "").replace(/s+$/,""); } } // test the function var str = " tn test string ".trim(); alert(str == "test string"); // alerts "true"
20、.Javascript中callee和caller的作用?
答案:
caller是返回一个对函数的引用,该函数调用了当前函数;
callee是返回正在被执行的function函数,也就是所指定的function对象的正文。
21、如果一对兔子每月生一对兔子;一对新生兔,从第二个月起就开始生兔子;假定每对兔子都是一雌一雄,试问一对兔子,第n个月能繁殖成多少对兔子?(使用callee完成)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17var result=[]; function fn(n){ //典型的斐波那契数列 if(n==1){ return 1; }else if(n==2){ return 1; }else{ if(result[n]){ return result[n]; }else{ //argument.callee()表示fn() result[n]=arguments.callee(n-1)+arguments.callee(n-2); return result[n]; } } }
22、var a=[];a[0]=0;a[1]=1;a[4]=4;
请问a.length的值是多少?a[3]的输出结果是什么?
5 undefined
23、var a=[5,6];var b=a;b[0]="hello";alert(a[0]);
请问值是多少?
“hello”
24、typeof(null),typeof(undefined),typeof(NaN),typeof(NaN==NaN)
,说出上面代码执行结果?
object
undefined
number
boolean
25、请写出下面输出的值
1
2
3
4
5
6
7
8
9
10
11
12function doSomething(){ for(var i = 0; 4 > i; i++) { var k = 100; aMrg +=’,’ + (k + i); } } var k = 1,aMrg = k; doSomething(); aMrg +=k; log(aMrg);
1,100,101,102,1031
26、请写出下面输出的值
1
2
3
4
5
6
7
8Console.log(undefined || 1);//值___1__ Console.log(null || NaN);//值__NaN___ Console.log(0 && 1);//值__0___ Console.log(0 && 1 || 0);//值__0___
27、看下列代码,<p>
标签内的文字是什么颜色的?红色
1
2
3
4
5
6
7
8<style> .classA{color: blue}; .classB{color: red}; </style> <body> <p class=”classB classA”>123</p> </body>
28、你面前有一座高塔,这座高塔有N(N > 100
)个台阶,你每次只能往前迈1个或者2个台阶,请写出程序计算总共有多少种走法?
这个案例满足斐波那契定律 1,1,2,3,5,8,13,21, 34, 55, 89, 144
1
2
3
4
5
6
7
8
9
10var n1 = 1; var n2 = 1; var n3 = n1 + n2; for (var i = 3; i <= n; i++) { n3 = n1 + n2; n1 = n2;//往后推一项 n2 = n3;//往后推一项 } console.log(n3);
29、请阅读下面的CSS代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14#left { color: white !important; } #container #left { color: red; } #left { color: green !important; } .container #left { color: blue; }
则在如下html中
1
2
3
4<div class=”container” id=”container”> <span id=”left”>left</span> </div>
#left
最终color属性值为?绿色
30、下面这段代码想要循环延时输出结果0 1 2 3 4,请问输出结果是否正确,如果不正确说明为什么,并修改循环内的代码使其输出正确的结果。
1
2
3
4
5
6for (var i = 0; i < 5; ++i) { setTimeout (function () { console.log(i + ‘’); },100*i); }
不正确,先执行FOR循环。for循环完成后,在去执行setTimeout。但是这个时候I已经是5了,所以输入了5次5
1
2
3
4
5
6
7for(var i = 0; i <5; ++i) { var a = 0; setTimeout (function () { console.log(a++); },100*i); }
31、完成函数showlmg(),要求能够动态根据下拉列表的选项变化,更新图片的显示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19<body> <script type=”text/javascript”> Function showImg (oSel) { }; </script> <img id=”pic” src=”img1.jpg” width=”200” height=”200”> <br/> <selectid=”sel” ”showImg(this)”> <optionvalue=”img1”>城市生活</option> <optionvalue=”img2”>都市早报</option> <optionvalue=”img3”>青山绿水</option> </select> </body> varpic=document.getElementById('pic') function showImg (oSel) { pic.src=oSel.options[oSel.selectedIndex].value console.log(pic.src); };
答案说明:当select发生改变的时候调用showImg函数,实参为this(select对象本身),可以通过select对象的属性来为pic的src赋值实现图片切换
32、完成foo()函数的内容,要求能弹出对话框提示当前选中的是第几个单选框
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26<html> <head> <meat http-equiv=”Content-Type”content=”text/html; charset=utf-8”> </head> <body> <scripttype=”text/javascript”> functionfoo() { }; </script> <form name=”form1” ”retuen foo()”> <inputtype=”radio” name = “radioGroup”> <input type=”radio” name = “radioGroup”> <inputtype=”radio” name = “radioGroup”> <input type=”radio” name = “radioGroup”> </form> </body> </html> var a=document.getElementsByTagName('input') function foo() { for(var i=0;i<a.length;i++){ if(a[i].checked){ alert(i+1) } } }
题出的有问题,onsubmit只有在提交的时候才会触发这里面没有submit按钮,在提交事件触发的时候遍历哪个input表单是选中状态然后alert出来
33、计算下面程序运行结果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15var msg = ‘hello’; function great(name, attr) { name = ‘david’; var greating = msg + name + ‘!’; var msg = ‘您好’; For (var i = 0 ; i < 10;i++) { var next = msg + ‘您的id是’ + i*2 + i; } console.log(arguments[0]); console.log(arguments[1]); console.log(greating); console.log(next); } geat(‘Tom’);
答案:david //参数1
hellowworld 01.html:20 undefined //参数2 未传入为未定义
hellowworld 01.html:21 undefineddavid! //name虽然是参数,但是参数重新赋值为david了,msg因为变量声明提升,所以值为undefined
您好您的id是189//因为number+string=string,所以for循环最后一次声明next=****18+9
34、下面这段JS输出什么,并简述为什么?
1
2
3
4
5
6
7
8
9
10
11
12
13function Foo() { var i = 0; return function () { console.log(i++); } } var f1 = Foo(), f2 = Foo(); f1(); f1(); f2(); console.log(i);
1
2
3
4
50 //f1=Foo() 相当于f1赋值为函数Foo()的返回值f1=function(){console.log(i++)} 1 //因为f1=了一个function所以有了作用域,f2和f1不同,不在一个内存中 0 报错 //i为Foo内部的变量全局不可访问,全局中没有i变量所以会报错
35、请写出下面输出的值
a)
1
2
3
4
5
6
7
8var num = 1; var fun = function () { console.log(num);//值___undefined___ var num = 2; console.log(num);//值___2___ } fun();
b)
1
2
3
4
5
6
7
8var num = 1; function fun () { console.log(num);//值___1____ num = 2; console.log(num);//值___2____ } fun();
36、写出以下程序执行的结果
1)
1
2
3
4var a = 10; a.pro = 10; console.log(a.pro + a);//NAN
number对象不可以定义私有属性 namber+非数字和字符的值就等于NaN
2)
1
2
3
4var s = ‘hello’; s.pro = ‘world’; console.log(s.pro + s); //undefined
hello s位字符串,字符串不可以自定义属性,所以s.pro为undefined 字符串做加运算会强制拼接位字符串
3)
1
2
3
4
5console.log(typeof fn); function fn() {}; var fn; //function 函数提升优先于变量提升
4)
1
2
3
4
5
6
7
8
9
10
11
12var f = true; If(f === true) { var a = 10; } function fn() { var b = 20; c = 30; } fn(); console.log(a); //10
37、请看如下的代码,写出结果
1
2
3
4
5
6
7
8var a = 5,b = 3; function test() { alert(b++); var a = 4; alert(--a); alert(this.a); }
1)tese(),三次alert()的值依次是什么?335 435 535
2)new test(),三次alert()的值依次是什么? 33undefined 43undefined53undefined //this更改了指向原来是指向window 用了new关键字后指向test test木有a属性所以为undefined
38、p最后显示什么颜色。怎么让p的颜色变成黑色,并简要说明css选择器优先级关系
1
2
3
4
5
6
7
8
9<style> #classA{color:yellow}; p.classB(color:red); </style> <body> <p id=”classA” class=”classB”>123</p> </body> //p#classA{color:black}
39、关于正则表达式声明6位数字的邮编,一下代码正确的是©
A.var reg = /d6/;
B.var reg = d{6};
C.var reg = /d{6}/;
D.var reg = new RegExp (“d{6}”);
40、关于JavaScript里xml处理,一下说明正确的(A)
A.xml是种可扩展标记语言,格式更规范,是作为未来html的替代 //貌似XML是被替代的
B.Xml一般用于传输和存储数据,是对html的补充,两者的目的不同
C.在JavaScript里解析和处理xml数据时,因为浏览器的不同,其做法也不同
D.在IE浏览器里处理xml,首先需要创建ActiveXObject对象
41、请选择对javascript理解有误的(B)
A.javascript是网景公司开发的一种基于事件和驱动网页脚本语言
B.JScript是javascript的简称 //微软自己的浏览器才支持
C.FireFox和IE存在大量兼容性问题的主要原因在于他们对javascript的支持不同
D.AJAX技术一定要使用javascript技术
42、在Jquery中下面哪一个是用来追加到指定元素的末尾(B)
A.inserAfter()
B.Append()
C.appendTo()
D.After()
43、在javascript中定义变量var a=”35”,var b = “7”运算a % b 的结果为©
A.357
B.57
C.0
D.5
44、下面哪个属于javascript的字符型C
A.False
B.你好
C.“123”
D.Null
45、下面哪个属于javascript的布尔值©
A.1.2
B.”true”
C.false
D.null
46、请选择结果为真的表达式©
A.null instanceof Object
B.Null === undefined;
C.null == undefined
D.NaN == NaN
47、下列运算方式不属于逻辑运算的是(D)
A.!a
B.a&&b
C.a||b
D.a>b
48、声明一个对象,给它加上name属性和show方法显示其name值,以下代码中正确的是(D)
A.var obj = [name : “zhangsan” ,show: function(){alert(name);}];
B.Var obj = {name : “zhangsan”,show: “alert(this.name)”};
C.Var obj = {name : “zhangsan”,show: function () {alert(name);}};
D.Var obj = {name : “zhangsan”,show: function () {alert(this.name);}}
49、以下过于Array数组对象的说法不正确的是©
A.对数组里数据的排序可以用sort函数,如果排序效果非预期,可以给sort函数加一个排序函数的参数
B.reverse用于对数组数据的倒序排列
C.向数组的最后位置加一个新元素,可以用pop方法 //push吧
D.unshift方法用于向数组删除一个元素
50、要将页面的状态显示”已经选中该文本”,下列JavaScript语句正确的是(A)
A.window.status = “已经选中该文本”
B.Document.status = “已经选中该文本”
C.Window.screen = “已经选中该文本”
D.Document.screen = “已经选中该文本”
51、点击页面的按钮,使之打开一个新窗口,加载一个页面,以下JavaScript代码中可执行的是(D)
A.<input type=”button” value=”new””open(‘new.html’,’_blank’)”>
B.<input type=”button” value=”new””window.location=’new.html’;”>
C.<input type=”button” value=”new””location.assign(‘new.html’);”>
D.<form target=”_blank” action=”new.html”><input type=”submit” value=”new”></form>
52、下面的JavaScript语句中,实现检索当前页面中的表单元素中的所有文本框,并将它们全部清空(B)
A.
1
2
3
4if(form1.elements[i].type ==”text”) form1.elements[i].value = “”; }
B.
1
2
3
4if(forms[0].elements[i].type == “text”) form[0].elements[i].value = “”; }
C.
1
2form.elements[i].value = “”;
D.
1
2
3
4
5
6for(var j = 0;j <document.forms[i].elements.length;j++) { if(document.forms[i].elements[j].type== “text”) document.forms[i].elements[j].value= “”; } }
53、在表单(form1)中有一个文本框元素(fname),用于输入电话号码,格式如:010-82668155,要求前3位是010,紧接一个”-”,后面是8位数字。要求在提交表单时,根据上述条件验证该文本框中输入内容的有效性,下列语句中(A)能正确实现以上功能
A.
1
2
3
4var str = form1.fname.value; If(str.substr(0,4)!=”010-”||str.substr(4).length!=8||isNaN(parseFloat(str.substr(4)))) Alert(“无效的电话号码!”);
B.
1
2
3If(str.substr(0,4)!=”010-”&&str.substr(4).length!=8&&isNaN(parseFloat(str.substr(4)))) Alert(“无效的电话号码!”);
C.
1
2
3If(str.substr(0,3)!=”010-”||str.substr(3).length!=8||isNaN(parseFloat(str.substr(3)))) alert(“无效的电话号码!”);
D.
1
2
3If(str.substr(0,4)!=”010-”&&str.substr(4).length!=8&&isNaN(parseFloat(str.substr(4)))) alert(“无效的电话号码!”);
54、关于正则表达式声明6位数字的邮编,一下代码正确的是©
A.var reg = /d6/;
B.var reg = d{6};
C.var reg = /d{6}/;
D.var reg = new RegExp (“d{6}”);
55、下面关于cookie的说明正确的是(D)
A.Cookie设置的过期时间为3600s是指60分钟过期
B.Cookie设置的过期时间为3600s是指只要在间隔60分钟内有动作时就不过期
C.Cookie保存在服务器端
D.Cookie保存在用户本地
56、使用js代码实现,将下面段落中含有的链接替换成可直接点击打开的链接
<p id=”text”>
这个段落里有链接
比如:http://www.abc.comm/和https://www.github.com/
都是链接。
可是他们显示在网页中是,链接不可点,还得复制粘贴到地址栏打开,好麻烦
</p>
57、补充按钮事件的函数,确认用户是否退出当前页面,确认之后关闭窗口
1
2
3
4
5
6
7
8
9
10
11
12<html> <head> <script type=”text/javasccript”> Function closeWin() { } </script> </head> <body> <input type=”button” value=”关闭窗口” ”closeWin()” /> </body> </html>
58、请用JavaScript实现,控制一个文本框只能输入正整数,如输入不符合条件则文本全部字体标红,要求写出完整的文本框HTML代码和JavaScript逻辑代码?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="utf-8"> <title>只能输入正整数</title> </head> <body> <inputid="txt" type="text"> <script> var txt=document.getElementById('txt'); var color =window.getComputedStyle(txt,'').color txt.addEventListener('keyup',function() { var reg = newRegExp("^[0-9]*$");; console.log(reg.test(this.value)); if(reg.test(this.value)){ this.style.color=color; }else{ this.style.color='red'; } }); </script> </body> </html>
59、请对以下代码进行优化
1
2
3
4
5
6
7
8var wrap = document.getElementById(“wrap”); for(var i = 0; i < 10; i++) { var li = document.createElement(“li”); var text =document.createTextNode(“hello” + i); li.appendCChild(text); wrap.appendChild(li); }
60、请看下面的HTML,写出您的CSS使左边元素宽度为200px保持不变,右边元素随浏览器大小自适应
1
2
3
4
5<div class=”outer”> <div class=”left”></div> <div class=”right”></div> </div>
最后
以上就是内向舞蹈最近收集整理的关于前端面试题集锦——程序题的全部内容,更多相关前端面试题集锦——程序题内容请搜索靠谱客的其他文章。
发表评论 取消回复