资源描述
必看前端笔试题.docx
《必看前端笔试题.docx》由会员分享，可在线阅读，更多相关《必看前端笔试题.docx（79页珍藏版）》请在冰豆网上搜索。
必看前端笔试题
初级Javascript：
1.JavaScript是一门什么样的语言，它有哪些特点？
没有标准答案。
2.JavaScript的数据类型都有什么？
基本数据类型：
String,boolean,Number,Undefined, Null
引用数据类型：
Object（Array,Date,RegExp,Function）
那么问题来了，如何判断某变量是否为数组数据类型？
∙方法一.判断其是否具有“数组性质”，如slice（）方法。
可自己给该变量定义slice方法，故有时会失效
∙方法二.objinstanceofArray在某些IE版本中不正确
∙方法三.方法一二皆有漏洞，在ECMAScript5中定义了新方法Array.isArray（）,保证其兼容性，最好的方法如下：
JavaScript
1
2
3
4
5
6
if（typeofArray.isArray==="undefined"）
{
Array.isArray=function（arg）{
returnObject.prototype.toString.call（arg）==="[objectArray]"
};
}
3.已知ID的Input输入框，希望获取这个输入框的输入值，怎么做？
（不使用第三方框架）
JavaScript
1
document.getElementById（“ID”）.value
4.希望获取到页面中所有的checkbox怎么做？
（不使用第三方框架）
JavaScript
1
2
3
4
5
6
7
8
vardomList=document.getElementsByTagName（‘input’）
varcheckBoxList=[];
varlen=domList.length; //缓存到局部变量
while（len--）{ //使用while的效率会比for循环更高
if（domList[len].type==‘checkbox’）{
checkBoxList.push（domList[len]）;
}
}
5.设置一个已知ID的DIV的html内容为xxxx，字体颜色设置为黑色（不使用第三方框架）
JavaScript
1
2
3
vardom=document.getElementById（“ID”）;
dom.innerHTML=“xxxx”
dom.style.color=“#000”
6.当一个DOM节点被点击时候，我们希望能够执行一个函数，应该怎么做？
∙ 直接在DOM里绑定事件：
∙ 在JS里通过onclick绑定：
xxx.onclick = test
∙ 通过事件添加进行绑定：
addEventListener（xxx, ‘click’, test）
那么问题来了，Javascript的事件流模型都有什么？
∙“事件冒泡”：
事件开始由最具体的元素接受，然后逐级向上传播
∙“事件捕捉”：
事件由最不具体的节点先接收，然后逐级向下，一直到最具体的
∙“DOM事件流”：
三个阶段：
事件捕捉，目标阶段，事件冒泡
7.什么是Ajax和JSON，它们的优缺点。
Ajax是异步JavaScript和XML，用于在Web页面中实现异步数据交互。
优点：
∙ 可以使得页面不重载全部内容的情况下加载局部内容，降低数据传输量
∙ 避免用户不断刷新或者跳转页面，提高用户体验
缺点：
∙ 对搜索引擎不友好（
∙ 要实现ajax下的前后退功能成本较大
∙ 可能造成请求数的增加
∙ 跨域问题限制
JSON是一种轻量级的数据交换格式，ECMA的一个子集
优点：
轻量级、易于人的阅读和编写，便于机器（JavaScript）解析，支持复合数据类型（数组、对象、字符串、数字）
8.看下列代码输出为何？
解释原因。
JavaScript
1
2
3
vara;
alert（typeofa）;//undefined
alert（b）;//报错
解释：
Undefined是一个只有一个值的数据类型，这个值就是“undefined”，在使用var声明变量但并未对其赋值进行初始化时，这个变量的值就是undefined。
而b由于未声明将报错。
注意未申明的变量和声明了未赋值的是不一样的。
9.看下列代码,输出什么？
解释原因。
JavaScript
1
2
vara=null;
alert（typeofa）;//object
解释：
null是一个只有一个值的数据类型，这个值就是null。
表示一个空指针对象，所以用typeof检测会返回”object”。
10.看下列代码,输出什么？
解释原因。
JavaScript
1
2
3
4
5
6
7
8
9
varundefined;
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。
那么问题来了，看下面的代码，输出什么，foo的值为什么？
JavaScript
1
2
3
varfoo="11"+2-"1";
console.log（foo）;
console.log（typeoffoo）;
执行完后foo的值为111，foo的类型为String。
11.看代码给答案。
JavaScript
1
2
3
4
5
vara=newObject（）;
a.value=1;
b=a;
b.value=2;
alert（a.value）;
答案：
2（考察引用数据类型细节）
12.已知数组var stringArray = [“This”, “is”, “Baidu”, “Campus”]，Alert出”This is Baidu Campus”。
答案：
alert（stringArray.join（“”））
已知有字符串foo=”get-element-by-id”,写一个function将其转化成驼峰表示法”getElementById”。
JavaScript
1
2
3
4
5
6
7
8
functioncombo（msg）{
vararr=msg.split（"-"）;
for（vari=1;i arr[i]=arr[i].charAt（0）.toUpperCase（）+arr[i].substr（1,arr[i].length-1）;
}
msg=arr.join（""）;
returnmsg;
}
（考察基础API）
13.var numberArray = [3,6,2,4,1,5];（考察基础API）
1） 实现对该数组的倒排，输出[5,1,4,2,6,3]
2） 实现对该数组的降序排列，输出[6,5,4,3,2,1]
JavaScript
1
2
3
4
5
6
7
8
functioncombo（msg）{
vararr=msg.split（"-"）;
for（vari=1;i arr[i]=arr[i].charAt（0）.toUpperCase（）+arr[i].substr（1,arr[i].length-1）;
}
msg=arr.join（""）;
returnmsg;
}
14.输出今天的日期，以YYYY-MM-DD的方式，比如今天是2014年9月26日，则输出2014-09-26
JavaScript
1
2
3
4
5
6
7
8
9
10
11
vard=newDate（）;
//获取年，getFullYear（）返回4位的数字
varyear=d.getFullYear（）;
//获取月，月份比较特殊，0是1月，11是12月
varmonth=d.getMonth（）+1;
//变成两位
month=month<10?
'0'+month:
month;
//获取日
varday=d.getDate（）;
day=day<10?
'0'+day:
day;
alert（year+'-'+month+'-'+day）;
15.将字符串”
| {$id} | {$name} |
”中的{$id}替换成10，{$name}替换成Tony（使用正则表达式）
答案：
”
| {$id} | {$id}_{$name} |
”.replace（/{\$id}/g, ’10’）.replace（/{\$name}/g, ‘Tony’）;
16.为了保证页面输出安全，我们经常需要对一些特殊的字符进行转义，请写一个函数escapeHtml，将<, >, &, “进行转义
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
functionescapeHtml（str）{
returnstr.replace（/[<>”&]/g,function（match）{
switch（match）{
case“<”:
return“<”;
case“>”:
return“>”;
case“&”:
return“&”;
case“\””:
return“"”;
}
}）;
}
17.foo=foo||bar，这行代码是什么意思？
为什么要这样写？
答案：
if（!
foo） foo = bar; //如果foo存在，值不变，否则把bar的值赋给foo。
短路表达式：
作为”&&”和”||”操作符的操作数表达式，这些表达式在进行求值时，只要最终的结果已经可以确定是真或假，求值过程便告终止，这称之为短路求值。
18.看下列代码，将会输出什么?
（变量声明提升）
JavaScr
升级会员 