前端面试题集锦——程序题

43 阅读 0 评论 29 点赞

我是靠谱客的博主内向舞蹈，最近开发中收集的这篇文章主要介绍前端面试题集锦——程序题，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

程序题

1、看下列代码输出为何？解释原因。

var a;
alert(typeof a); // undefined
alert(b); // 报错

解释：Undefined是一个只有一个值的数据类型，这个值就是“undefined”，在使用var声明变量但并未对其赋值进行初始化时，这个变量的值就是undefined。而b由于未声明将报错。注意未申明的变量和声明了未赋值的是不一样的。

2、看下列代码,输出什么？解释原因。

var a = null;
alert(typeof a); //object

解释：null是一个只有一个值的数据类型，这个值就是null。表示一个空指针对象，所以用typeof检测会返回”object”。

3、看下列代码,输出什么？解释原因。

var 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的值为什么？

var foo = "11"+2-"1";
console.log(foo);
console.log(typeof foo);

执行完后foo的值为111，foo的类型为Number。

“11”+2的结果是字符串112，然后“112”-“1”的结果是数值111。

5、看代码给答案。

var 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”。

function 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]

function 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

var 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，将<, >, &, “进行转义

function escapeHtml(str) {
return str.replace(/[<>”&]/g, function(match) {
    switch (match) {
                   case “<”:
                      return “&lt;”;
                   case “>”:
                      return “&gt;”;
                   case “&”:
                      return “&amp;”;
                   case “””:
                      return “&quot;”;
      }
  });
}

12、foo =foo||bar ，这行代码是什么意思？为什么要这样写？

答案：if(!foo) foo = bar; //如果foo存在，值不变，否则把bar的值赋给foo。

短路表达式：作为”&&”和”||”操作符的操作数表达式，这些表达式在进行求值时，只要最终的结果已经可以确定是真或假，求值过程便告终止，这称之为短路求值。

13、看下列代码，将会输出什么?(变量声明提升)

var foo = 1;
(function(){
    console.log(foo);
    var foo = 2;
    console.log(foo);
})();

答案：输出undefined 和 2。上面代码相当于：

var foo = 1;
(function(){
    var foo;
    console.log(foo); //undefined
    foo = 2;
    console.log(foo); // 2;  
})();

函数声明与变量声明会被JavaScript引擎隐式地提升到当前作用域的顶部，但是只提升名称不会提升赋值部分。

14、用js实现随机选取10–100之间的10个数字，存入一个数组，并排序。

var 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、把两个数组合并，并删除第二个元素。

var 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}。

function 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、看下面代码，给出输出结果。

for(var i=1;i<=3;i++){
  setTimeout(function(){
      console.log(i);    
  },0);  
};

答案：4 4 4。

原因：Javascript事件处理器在线程空闲之前不会运行。追问，如何让上述代码输出1 2 3？

for(var i=1;i<=3;i++){
   setTimeout((function(a){  //改成立即执行函数
       console.log(a);    
   })(i),0);  
};
1           //输出
2
3

19、写一个function，清除字符串前后的空格。（兼容所有浏览器）

使用自带接口trim()，考虑兼容性：

if (!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完成）

var 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、请写出下面输出的值

function 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、请写出下面输出的值

Console.log(undefined || 1);//值___1__

Console.log(null || NaN);//值__NaN___

Console.log(0 && 1);//值__0___

Console.log(0 && 1 || 0);//值__0___

27、看下列代码，<p>标签内的文字是什么颜色的？红色

<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

var 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代码

#left {
color: white !important;
}

#container #left {
color: red;
}
#left {
color: green !important;
}
.container #left {
color: blue;
}

则在如下html中

<div class=”container” id=”container”>
<span id=”left”>left</span>
</div>

#left最终color属性值为？绿色

30、下面这段代码想要循环延时输出结果0 1 2 3 4，请问输出结果是否正确，如果不正确说明为什么，并修改循环内的代码使其输出正确的结果。

for (var i = 0; i < 5; ++i) {
setTimeout (function () {
console.log(i + ‘’);
},100*i);
}

不正确，先执行FOR循环。for循环完成后，在去执行setTimeout。但是这个时候I已经是5了，所以输入了5次5

for(var i = 0; i <5; ++i) {
var a = 0;
setTimeout (function () {
console.log(a++);
    },100*i);
}

31、完成函数showlmg()，要求能够动态根据下拉列表的选项变化，更新图片的显示

<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()函数的内容，要求能弹出对话框提示当前选中的是第几个单选框

<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、计算下面程序运行结果

var 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输出什么，并简述为什么？

function Foo() {
var i = 0;
return function () {
console.log(i++);
}
}
var f1 = Foo(),
f2 = Foo();
f1();
f1();
f2();
console.log(i);

0       //f1=Foo() 相当于f1赋值为函数Foo()的返回值f1=function（）{console.log(i++)}
1       //因为f1=了一个function所以有了作用域，f2和f1不同，不在一个内存中
0
报错  //i为Foo内部的变量全局不可访问，全局中没有i变量所以会报错

35、请写出下面输出的值

var num = 1;
var fun = function () {
console.log(num);//值___undefined___
var num = 2;
console.log(num);//值___2___
}
fun();

var num = 1;
function fun () {
console.log(num);//值___1____
num = 2;
console.log(num);//值___2____
}
fun();

36、写出以下程序执行的结果

var a = 10;
 a.pro = 10;
console.log(a.pro + a);//NAN

number对象不可以定义私有属性 namber+非数字和字符的值就等于NaN

var s = ‘hello’;
 s.pro = ‘world’;
 console.log(s.pro + s); //undefined

hello s位字符串，字符串不可以自定义属性，所以s.pro为undefined 字符串做加运算会强制拼接位字符串

console.log(typeof fn);
function fn() {};
var fn;
//function 函数提升优先于变量提升

var f = true;
If(f === true) {
var a = 10;
      }
function fn() {
var b = 20;
c = 30;
 }
fn();
console.log(a);
//10

37、请看如下的代码，写出结果

var 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选择器优先级关系

<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);}}

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)

if(form1.elements[i].type ==”text”)
form1.elements[i].value = “”;
}

if(forms[0].elements[i].type == “text”)
form[0].elements[i].value = “”;
}

form.elements[i].value = “”;

for(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)能正确实现以上功能

var str = form1.fname.value;
If(str.substr(0,4)!=”010-”||str.substr(4).length!=8||isNaN(parseFloat(str.substr(4))))
Alert(“无效的电话号码！”);

If(str.substr(0,4)!=”010-”&&str.substr(4).length!=8&&isNaN(parseFloat(str.substr(4))))
Alert(“无效的电话号码！”);

If(str.substr(0,3)!=”010-”||str.substr(3).length!=8||isNaN(parseFloat(str.substr(3))))
alert(“无效的电话号码！”);

If(str.substr(0,4)!=”010-”&&str.substr(4).length!=8&&isNaN(parseFloat(str.substr(4))))
alert(“无效的电话号码！”);

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、补充按钮事件的函数，确认用户是否退出当前页面，确认之后关闭窗口

<html>
<head>
<script type=”text/javasccript”>
Function closeWin() {
}
</script>
</head>
<body>
<input type=”button” value=”关闭窗口” ”closeWin()” />
</body>
</html>

58、请用JavaScript实现，控制一个文本框只能输入正整数，如输入不符合条件则文本全部字体标红，要求写出完整的文本框HTML代码和JavaScript逻辑代码？

<!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、请对以下代码进行优化

var 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保持不变，右边元素随浏览器大小自适应

<div class=”outer”>
<div class=”left”></div>
<div class=”right”></div>
</div>

最后

以上就是内向舞蹈为你收集整理的前端面试题集锦——程序题的全部内容，希望文章能够帮你解决前端面试题集锦——程序题所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：面试题
浏览次数：43 次浏览
发布日期：2023-12-09 22:30:34
本文链接：https://www.kaopuke.com/article/k-p-k_13_u_23_o_6_f2_14__7_g4.html

前端面试题集锦——程序题

概述

程序题

最后

评论列表共有 0 条评论

发表评论取消回复

前端面试题集锦——程序题

概述

程序题

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

发表评论取消回复