文档章节

怒刷web前端笔试面试题(一)

yifon
 yifon
发布于 2015/03/29 02:08
字数 4019
阅读 53
收藏 1
点赞 0
评论 0

1.有这么一段HTML,请挑毛病:

<P>&nbsp;&nbsp;哥写的不是HTML,是寂寞。<br><br>&nbsp;&nbsp;我说:<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#























© 著作权归作者所有

共有 人打赏支持
yifon

yifon

粉丝 10
博文 37
码字总数 29078
作品 0
广州
程序员
【干货分享】面试小技巧

纪念一下第一份面试经历 美团面试主要就是分为笔试和面试,笔试以后我恬不知耻地去霸面了(其实也不觉得有什么恬不知耻,权当考察去了)但其实笔试完没多久后我就接到了约面试时间的电话了。...

路过全世界
2017/04/26
0
0
前端笔试、面试

让 BAT 的 Offer 不再难拿 随着各大公司春招的开始,很多小伙伴都行动起来了,我有幸能够加入百度并和大家分享自己的经验心得。由于我面试的都是比较大的公司,所以自然也是做了这方面的准备...

掘金官方
01/11
0
0
2018年互联网技术岗(数据分析)暑期实习面试经验

此经验帖适合想找互联网相关工作的人,如数据分析、算法工程师、数据挖掘工程师等。或者是想进入BAT等互联网公司的人,我会介绍他们暑期实习招聘流程及笔面试经验等,暑期实习往往是有转正机...

你的社交帐号昵
05/22
0
0
鹅厂奋战历程简录

从开始准备到最后尘埃落定,和鹅厂总共纠缠了近10个月,所幸最终拿到Offer,也算万事完满。 2015.12 12月中旬,和一读研学长讨论今后出路。本觉得以自己的水平万不可眼界过高放眼鹅厂这种互联...

sun511230
2017/05/25
0
0
华为2018届校园招聘笔试题目以及相应代码分享 软件开发岗位

华为2018届校园招聘笔试 时间20170712 笔试题目 01 括号匹配 //01 括号匹配 define CRTSECURENOWARNINGS /*括号匹配 给定一个字符串,里边可能包含“()”、“[]”、“{}”三种括号,请编写程...

lizi_stdio
2017/08/03
0
0
小米Java程序员第二轮面试10个问题,你是否会被刷掉?

近日,w3cschool app开发者头条上分享了一篇“小米java第二轮面经”,有很多的java程序员表示非常有兴趣。 下面w3cschool就和各位分享小米java第二轮面经(华为java工程师笔试面试题可以看文章...

W3Cschool
2017/10/31
0
0
腾讯暑期实习产品策划&运营岗笔经面经

先介绍一下本人情况:硕士在读,非985,211,鹅厂面试止步于集体面后的单面 鹅厂的暑期实习先是笔试,而后再是面试 笔试客观题大致分为分四类:语言推理、数字分析、图形推理和性格测试。 主...

牛客网
05/28
0
0
前端相关整理

整理一下最近在网上收集的前端面试相关资料,包括预备知识、书籍、面试考点、面经等。前端方面资料其实太多太多,就光从知乎、前端乱炖、w3cplus 等网站就能找到很多,所以针对细节不发散,仅...

Seas0n_
2016/03/01
106
0
Appstore排名前十的程序员应用软件

程序员又名程序猿,苦逼劳累的代名词,曾经一个朋友这么开玩笑说,如果你是富二代,你当程序员就是脑残,如果你是穷二代,当程序员的话,死的时候一定是趴键盘。 程序员   哦,可怜的程序员...

程序员客栈
2016/05/14
4.1K
1
2014年计算机求职总结--准备篇

版权所有,转载请注明出处,谢谢! http://blog.csdn.net/walkinginthewind/article/details/13000431 找工作是一个长期准备的过程,突击是没什么效果的。准备时间越长,准备就越充分,就越容...

u011729265
2013/10/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring Boot 整合 MyBatis/通用Mapper/PageHelper分页插件

整合MyBatis 整合通用Mapper 1. POM依赖配置 <properties><mapper.starter.version>2.0.3-beta1</mapper.starter.version></properties><!-- 通用Mapper --><dependency><groupId>t......

OSC_fly
11分钟前
0
0
CentOS7 双网卡绑定

环境 操作系统 CentOS7.5,禁用 NetworkManager 服务 网卡 eth0 网卡 eth1 绑定网卡 bond0 网卡 eth0 配置 修改 /etc/sysconfig/network-scripts/ifcfg-eth0 TYPE=EthernetBOOTPROTO=noneD......

Colben
12分钟前
0
0
zk实战--rpc框架集群化

在看此篇内容时需要浏览下面内容 netty实战--手写rpc框架 前文功能简介以及功能扩充 利用netty来实现一个点对点的rpc调用。客户端和服务端都是靠手写地址进行socket同学的,无法1对多,也无法...

xpbob
29分钟前
10
0
springboot 发送邮件

获取授权码 添加配置 # 账号和密码spring.mail.username=aaa@qq.comspring.mail.password=bbb# 服务器地址spring.mail.host=smtp.qq.comspring.mail.properties.mail.smtp.ssl.en...

阿豪boy
29分钟前
0
0
如何使用GNU Ring?

文章名:如何使用GNU Ring? 作者:冰焰火灵X 1079092922@qq.com 文章许可:CC BY-SA 4.0 ##1. 安装 下载GNU Ring 点击左边选择你的系统版本(这里以 GNU/Linux 为例,我使用的是Mint 18.3)...

ICE冰焰火灵X
32分钟前
4
0
深入理解springMVC

什么是spring MVC Spring MVC属于SpringFrameWork的后续产品,已经融合在Spring Web Flow里面。Spring 框架提供了构建 Web 应用程序的全功能 MVC 模块。使用 Spring 可插入的 MVC 架构,从而...

Java填坑之路
37分钟前
1
0
《射雕英雄传》书摘

1. 我虽是个飘泊江湖的贫家女子,可不是低三下四、不知自爱之人。你如真心爱我,须当敬我重我。我此生决无别念,就是钢刀架颈,也决意跟定了你。将来……将来如有洞房花烛之日,自然……自能...

k91191
48分钟前
0
0
解决:modal中datePicker 选中时,会触发modal的hidden.bs.modal事件

最近项目中发现了一个bug,具体表现为选中模态框上datepicker组件上的日期时,会触发模态框的关闭事件,导致数据编辑无法正常进行。网上搜索了下,解决方法如下: $('.datepicker').on('hid...

Funcy1122
52分钟前
0
0
Redis分布式锁的正确实现方式

前言 分布式锁一般有三种实现方式: 1.数据库乐观锁 2.基于Redis的分布式锁; 3.基于Zookeeper的分布式锁。本篇博客将介绍第二种方式,基于Redis实现分布式锁。虽然网上已经有各种介绍Redis...

大海201506
今天
2
0
ClassNotFoundException: javax.el.ELManager

这个是因为tomcat7中的el-api2.2,有些版本太低,建议升级tomcat到8.0,利用el-api3.0就会解决这个问题。

无语年华
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部