怒刷web前端笔试面试题（一）
1.有这么一段HTML，请挑毛病：
<P> 哥写的不是HTML，是寂寞。<br><br> 我说：<br>不要迷恋哥，哥只是一个传说
考点1：html和 xhtml的区别
这行代码在html 4.01 strict下是完全正确的，在xhtml 1.0 strict下是错误一堆的。所以明显是一个考点。在xhtml下所有标签是闭合的，p,br需要闭合, 标签不允许大写，P要小写。同时nbsp和br必须包含在容器里。html下这些都不是错。p在html里是可选闭合标签，是可以不用闭合的。
考点2：考样式分离
用nbsp控制缩进是不合理的。应该用CSS干这事。所以应该删掉nbsp
考点3：合理使用标签
br是强制折行标签，p是段落。原题用连续的br制造两个段落的效果，效果是达到了，但显然用的不合理，段落间距后期无法再控制。正确的做法是用两个p表现两个段落。“我说”后面是正常的文字折行用br是合理的。
对原题改进的结果：
html 4.01:
<p>哥写的不是HTML，是寂寞。<p>我说：<br> 不要迷恋哥，哥只是一个传说
xhtml 1.0:
<p>哥写的不是HTML，是寂寞。</p><p>我说：<br /> 不要迷恋哥，哥只是一个传说</p>
2.写出Math Array String的方法
（一）Math对象的方法：
(1).min()和max() :分别用于确定一组数值中的最小值和最大值。
//多参,max var max=Math.max(1,24,55,3,4); alert(max); //多参，min var min=Math.min(1,33,4,2); alert(min); //参数为数组,max var values=[1,2,3,4,5,6]; var max=Math.max.apply(Math,values); alert(max);
(2).舍入方法：
Math.ceil()执行向上舍入，即它总是将数值向上舍入为最接近的整数；
Math.floor()执行向下舍入，即它总是将数值向下舍入为最接近的整数；
Math.round()执行标准舍入，即它总是将数值四舍五入为最接近的整数。
alert(Math.ceil(24.1)); //25 alert(Math.floor(23.9)); //23 alert(Math.round(25.4)); //25 alert(Math.round(28.6)); //29 alert(Math.round(25.5)); //26
(3)random()方法：
Math.random()方法返回大于等于0小于1的一个随机小数
下列公式可从某个整数范围内随机选择一个值：
值=Math.floor(Math.random()*可能的总数+第一个可能的值)
alert(Math.floor(Math.random()*10+1)); //1-10
(4)其它方法：
Math.abs(num) :返回num的绝对值；
Math.exp(num) :返回Math.E的num次幂；
Math.log(num) :返回num的自然对数；
Math.pow(num,power) :返回num的power次幂；
Math.sqrt(num) :返回num的平方根；
Math.acos(x) :返回x的反余弦值；
Math.asin(x) :返回x的反正弦值；
Math.atan(x) :返回x的反正切值；
Math.atan2(y,x) :返回y/x的反正切值；
Math.cos(x) :返回x的余弦值；
Math.sin(x) :返回x的正弦值；
Math.tan(x) :返回x的正切值
（二）Array对象的方法
（1）Array.isArray()检测数组：确定某个对象是不是数组
//支持Array.isArray()方法的浏览器有IE9+、Firefox 4+、Safari 5+、Opera 10.5+和Chrome
if(Array.isArray(value)){
//对数组执行的操作
}
/*对于不支持的浏览器，由于在任何值上调用Object原生的toString()方法，都会返回一个[object NativeConstructorName]格式的字符串。
每个类在内部都有一个[Class]属性，这个属性中就指定了上述字符串中的构造函数
故考虑浏览器的兼容性可以使用函数判断
*/
function isArray(value){
return Object.prototype.toString.call(value)=="[object Array]";
}
（2）转换方法：
toLocaleString(): 经常返回与toString()和valueOf()相同的值，但也不同的。（下面说明）
valueOf(): 返回的还是数组
toString(): 返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串
var colors=["blue","red"]; alert(colors.toString());//blue,red alert(colors.valueOf());//blue,red alert(colors); //blue,red 直接将数组传给alert()，由于alert()要接收字符串参数，所以它会在后台调用toString()方法，会得到与直接调用toString()相同的方法
var person1={
toLocaleString:function(){
return "Wang";
},
toString:function(){
return "Ying";
}
};
var person2={
toLocaleString:function(){
return "June";
},
toString:function(){
return "Red";
}
};
var person=[person1,person2];
alert(person); //Ying,Red 将数组直接传给alert()，将调用toString()方法
alert(person.toLocaleString()); //Wang,June 这就是toLocaleString()唯一区别的地方了，它会调用数组每一项的toLocaleString()
alert(person.toString()); //Ying,Red
join() 方法：可以使用不同的分隔符来构建字符串
var colors=["Wang","Ying","June"];
alert(colors.join("+"));
注意：如果数组中的某一项的值是null或者undefined，那么该值在join()、toLocaleString()、toString()、valueOf()方法返回的结果中以空字符串表示。
（3）栈方法-后进先出
push(): 可以接收任意数量的参数，把他们逐个添加到数组末尾，并返回修改后数组的长度；
pop(): 从数组末尾移除最后一项，减少数组的length值，然后返回移除的项
var colors=new Array();
var count=colors.push("Wang","Ying");
alert(count);//2
count=colors.push("June");
alert(count);//3
var item=colors.pop();
alert(item);//June
alert(colors.length);//2
（4） 队列方法-先进先出，队列在列表的末端添加项，从列表的前端移除项
shift(): 它能够移除数组中的第一项并返回该项，同时将数组长度减1
var colors=new Array();
var count=colors.push("Wang","Ying");
alert(count); //2
count=colors.push("June");
alert(count); //3
var item=colors.shift();
alert(item); //Wang
alert(colors.length);//2
unshift(): 与shift()的用途相反，它能在数组前端添加任意个项并返回新数组的长度。同时使用unshift()和pop()方法，可以从相反的方向来模拟队列，即在数组的前端添加项，从数组末端移除项
var colors=new Array();
var count=colors.push("Wang","Ying");
alert(count); //2
count=colors.unshift("Jun");
alert(count); //3
var item=colors.pop();
alert(item); //Ying
alert(colors.length); //2
（5）重排序方法：
sort(): 按升序排列数组项。为了实现排序，sort()方法会调用每个数组项的toString()转型方法，然后比较得到的字符串，以确定如何排序，即使数组中的每一项都是数值，sort()方法比较的也是字符串：
var values=[0,1,5,10,15]; values.sort(); alert(values); //0,1,10,15,5 结果不符合期望
sort()方法可以接收一个比较函数作为参数，以便我们指定哪个值位于哪个值的前面。
比较函数接收两个参数，如果第一个参数应该位于第二个之前就返回负数，如果两个参数相等则返回0，如果第一个参数应该位于第二个之后则返回一个正数。
function compare(value1,value2){
if(value1<value2)
return -1;
else if(value1>value2)
return 1;
else
return 0;
}
var values=[0,1,5,10,15];
values.sort(compare);
alert(values); //0,1,5,10,15
对于数值类型或者其valueOf()方法会返回数值类型的对象类型，可以使用更简单的比较函数：
function compare(value1,value2){
return value1-value2;
}
reverse(): 反转数组项的顺序
var values=[0,1,5,10,15]; values.reverse(); alert(values); //15,10,5,1,0
（6）操作方法：
concat(): 可以基于当前数组中的所有项创建一个新数组（这个方法会先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾）
var colors=["Wang","Ying","Jun"];
var colors2=colors.concat("Come","On");
alert(colors); //Wang,Ying,Jun
alert(colors2); //Wang,Ying,Jun,Come,On
slice(): 能够基于当前数组中的一或多个项创建一个新数组。
slice()可以接受一个或两个参数，即要返回项的起始和结束位置。
在只有一个参数的情况下，slice()方法将返回从该参数指定位置开始到当前数组末尾的所有项
如果有两个参数，该方法返回起始和结束位置之间的项（但不包括结束位置的项）
注意：slice()方法不会影响原始数组，如果slice()方法的参数中有一个负数，则用数组长度加上该数来确定相应的位置。如果slice()方法的参数中结束位置小于起始位置，则返回空数组
var colors=["Green","Red","Blue","Yellow"]; var colors2=colors.slice(1); alert(colors2); //Red,Blue,Yellow var colors3=colors.slice(1,3); alert(colors3); //Red,Blue var colors4=colors.slice(-3,-1); alert(colors4); //==slice(1,3)==>Red,Blue var colors5=colors.slice(-2,-3); alert(colors5); //==slice(2,1)==>空数组
splice(): 主要用途是向数组的中部插入项
1）删除：可以删除任意数量的项，只需指定2个参数：要删除的第一项的位置和要删除的项数。
2）插入：可以向指定位置插入任意数量的项，只需提供3个参数：起始位置、0（要删除的项数）和要插入的项。如果要插入多个项，可以再传入第四、第五，或任意项。
3）替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定3个参数：起始位置、要删除的项数和要插入的任意项，
var colors=["purple","orange","black","white"]; var removeItem=colors.splice(1,1); alert(removeItem);//orange alert(colors);//purple,black,white var insertItem=colors.splice(2,0,"yellow","grey"); alert(colors);//purple,black,yellow,grey,white var replaceItem=colors.splice(2,1,"blue","red"); alert(colors);//purple,blue,red,white
（7）位置方法：（这两个方法都返回要找的项的索引，若找不到则返回-1）
indexOf(): 要查找的项（可选）和表示查找起点位置的索引
lastIndexOf(): 从数组的末尾开始向前查找
（8）迭代方法：
every() ,filter() ,forEach() ,map() ,some()
（9）归并方法：
reduce(): 从数组的第一项开始逐步遍历到最后
reduceRight(): 从数组的最后一项开始，向前遍历到第一项
这两个方法都接收两个参数：一个在每一个项上调用的函数（可选）和作为归并基础的初始值。传给reduce()和reduceRight()的函数接收4个参数：前一个值、当前值、项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上。
var values=[1,2,3,4,5];
var sum=values.reduce(function(prev,cur,index,array){
return prev+cur;
});
alert(sum);//15
var sum2=values.reduceRight(function(prev,cur,index,array){
return prev+cur;
});
alert(sum2);//15
（三）String对象的方法
（1）字符方法：
charAt(): 以单字符字符串的形式返回给定位置的那个字符
charCodeAt(): 以字符编码的形式返回给定位置的那个字符
var stringValue="Happy new year!"; alert(stringValue.charAt(4)); //y alert(stringValue.charCodeAt(4)); //121
（2）字符串操作方法：
concat()： 用于将一或多个字符串拼接起来，返回拼接得到的新字符串
var stringValue="Happy ";
var result=stringValue.concat("New Year!");
alert(result);//Happy New Year!
alert(stringValue);//Happy
slice():
substr(): 第二个参数指定的是返回的字符个数
substring():
以上三个方法都会返回被操作字符串的一个子字符串，而且也都接收一个或两个参数。第一个参数指定字符串的开始位置，第二个参数（在指定情况下）表示子字符串到哪里结束。若无指定第二个参数，则将字符串的长度作为结束位置。
var stringValue="Happy New Year!"; alert(stringValue.slice(4,9));//y New alert(stringValue.substr(4,9));//y New Yea alert(stringValue.substring(4,9));//y New
当参数中出现负值时：
slice()：将传入的负值与字符串的长度相加
substr()：将负的第一个参数加上字符串的长度，而将负的第二个参数转换为0
substring()：会把所有负值参数转换为0
var stringValue="Happy New Year!";//15 alert(stringValue.slice(-9,-4));//slice(6,11) New Y alert(stringValue.substr(-9,-4));//substr(6,0) 空 alert(stringValue.substring(-4,-9));//substring(0,0) 空 alert(stringValue.substring(3,-4)); //substring(3,0)==substring(0,3) Hap
（3）字符串位置方法：
indexOf()
lastIndexOf()
（4）trim()方法，创建一个字符串的副本，删除前置及后缀的所有空格，然后返回结果
var stringValue=" Happy New Year! ";//15 alert(stringValue.trim());//"Happy New Year!" alert(stringValue);//" Happy New Year! "
（5）字符串大小写转换方法
toLowerCase()
toUpperCase()
toLocaleLowerCase()
toLocaleLowerCase()
后两种是针对特定地区的实现。对有些地区来说，针对地区的方法与其通用方法得到的结果相同，但少数语言（如土耳其语）会为Unicode大小写转换应用特殊的规则，这时候就必须使用针对地区的方法来保证实现正确的转换。
（6）字符串的模式匹配方法
match()：本质上与调用RegExp的exec()方法相同。match()方法只接受一个参数，要么是一个正则表达式，要么是一个RegExp对象。
var text="cat,bat,sat,fat"; var pattern=/.at/g; //g表示全局模式，查找字符串中所有以at结尾的单词 var matches=text.match(pattern); alert(matches); //cat,bat,sat,fat alert(matches[0]); //cat
search(): 这个方法的唯一参数与match()方法的参数相同，返回字符串中第一个匹配项的索引（始终是从头到尾查找）；如果没有找到，则返回-1
var text="cat,bat,sat,fat"; alert(text.search(/at/)); //1
replace(): 替换字符串，这个方法接受两个参数：第一个参数可以是一个RegExp对象或者一个字符串，第二个参数可以试一个字符串或者一个函数。如果第一个参数是一个参数，那么只会替换第一个子字符串。要想替换掉所有子字符串，唯一的办法就是提供一个正则表达式，而且要指定全局（g）标志：
var text="cat,bat,sat,fat";
var result=text.replace("at","ing");
alert(result); //cing,bat,sat,fat
result=text.replace(/at/g,"ing");
alert(result); //cing,bing,sing,fing
split(): 这个方法可以基于指定的分隔符将一个字符串分割成多个字符串，并将结果放在一个数组中。分隔符可以是字符串，也可以试一个RegExp对象。split()方法可以接受可选的第二个参数，用于指定数组的大小，以便确保返回的数组不会超过既定大小。
var colorText="red,blue,green,yellow";
var colors1=colorText.split(",");
var colors2=colorText.split(",",2);
var colors3=colorText.split(/[^\,]+/);
alert(colors1);
alert(colors2);
alert(colors3);
（7）localeCompare()方法：
1.如果字符串在字母表中应该排在字符串参数之前，则返回一个负数；
2.如果字符串等于字符串参数，则返回0；
3.如果字符串在字母表中应该排在字符串参数之后，则返回一个正数。
var stringValue="yellow";
alert(stringValue.localeCompare("brick")); //1
alert(stringValue.localeCompare("yellow"));//0
alert(stringValue.localeCompare("zoo")); //-1
（8）fromCharCode()：接收多个字符编码，然后将它们转换成一个字符串
alert(String.fromCharCode(104,101,108,108,111)); //hello
3.反转字符串
var string1="abcdefg";
alert(string1); //abcdefg
var string2=string1.split("").reverse().join("");
alert(string2); //gfedcba
4.把字符串的单词放到数组中
var string1="Happy, new year!"; alert(string1); var string2=string1.replace(/[^\w]/,' ').split(/\s+/); alert(string2); //去掉了字符串中的字符，\w==[a-zA-Z0-9_]
5.表格的的语义化标签
<caption>表格的标题;
<thead>表格的表头;
<th> 表的某一列的列头
6.遍历表格, 把td内容连接
<!DOCTYPE html>
<html>
<head>
<title>遍历表格, 把td内容连接</title>
<meta charset='utf-8'>
</head>
<body>
<table>
<caption>体检表</caption>
<thead>
<tr>
<th>身高</th>
<th>体重</th>
<th>减肥</th>
</tr>
</thead>
<tbody>
<tr>
<td>100</td>
<td>90</td>
<td>900</td>
</tr>
<tr>
<td>abd</td>
<td>dfd</td>
<td>345</td>
</tr>
</tbody>
</table>
<input type="button" id="tdText" value="td的所有内容连接起来">
<script type="text/javascript">
document.getElementById("tdText").onclick=function(){
var tdItem=document.getElementsByTagName("td");
var stringValue;
var stringArray=new Array();
for(var i=0;i<tdItem.length;i++)
stringArray.push(tdItem[i].innerHTML);
stringValue=stringArray.join("");
alert(stringValue);
}
</script>
</body>
</html>
7.设计一套方案判断css加载完成
(1).通过setTimeout轮询的方式来判断DOM节点是否加载完毕
(2).Fackbook则是通过在动态创建的CSS样式中包含一个固定的样式，例如#loadcssdom，loadcssdom就是一个高度为1px样式。然后动态创建一个DOM对象，添加这个loadcssdom样式。然后也是setTimeout轮询loadcssdo是否已经有1px的高度了。
http://www.bitscn.com/school/Javascript/201407/303574.html
8.json类型转成字符串返回后怎么转换成对象?
JSON.parse()
stringify()：把JavaScript对象序列化成JSON字符串
parse()：把JSON字符串解析为原生JavaScript值
var book={
title:"Professional JavaScript",
authors:[
"Nicholas C. Zakas"
],
edition:3,
year:2011
};
var jsonText=JSON.stringify(book);
alert(book);
alert(jsonText);
alert(JSON.parse(jsonText));
ie怎么处理?
ie6,7 引入json.js
它的原理是什么?
可以使用 window.eval() 或 new Function(){} 的方式解析 JSON 格式字符串
http://www.cnblogs.com/duanhuajian/p/3392856.html#