2018京东前端笔试题
一、单选题+多选题
1、匹配页面中输入的字符串，范围需要是[0.5,500]，小数位后最多保留两位，以下正则表达式不能实现该需求的是（B）
A. (^[0]\.([5-9]\d?)$)|(((^[0-9])|(^[1-9]\d)|(^[1-4]\d{2}))(\.\d{1,2})?$)|(^500$)
B. (^[0].([5-9]\d?)$)|((0|(^[1-9]?\d?)|(^1-4{2}))(.\d{1,2})?$)|(^500$)
C. (^[0].([5-9]\d?)$)|((0|(0\d{0,2})|(^1-4{2}))(.\d{1,2})?$)|(^500$)
D. ^[0].([5-9]\d?)$)|(((^[0-9])|(^1-9{1})|(^1-4{2}))(.\d{1,2})?$)|(^500$)
2、HTTP的标准端口是（A）
A. 80
B. 21
C. 443
D, 8080
解析：HTTP服务器，默认端口号为80/tcp；HTTPS（securely transferring web pages）服务器，默认端口号为443/tcp 443/udp；Telnet（不安全的文本传送），默认端口号为23/tcp；FTP，默认的端口号为21/tcp；TFTP（Trivial File Transfer Protocol），默认端口号为69/udp；JBOSS，默认端口号为8080；TOMCAT，默认端口号为8080；Oracle XDB（XML 数据库），默认的端口号为8080；
3、有如下两个div
<div id="b1">XXXX</div>
<div id="b2"><img src="1.gif"/></div>
下面哪一项可以将b1显示在1.gif上面：（C）
A. #b1{position:absolute;z-index:-1;}
B. #b1{position:relative;z-index:1;}
C. #b1{position:absolute;z-index:1;}
D. #b1{position:relative;z-index:-1;}
4、下列关于软连接正确的是（C）
A.不能对目录创建软连接
B.不可以对不存在的文件创建软连接
C.保存了其代表的文件的绝对路径，是另外一种文件，在硬盘上有独立的区块，访问时替换自身路径
D.与普通文件没什么不同，inode都指向同一个文件在硬盘中的区块
解析： 软链接又叫符号链接，这个文件包含了另一个文件的路径名。可以是任意文件或目录，可以链接不同文件系统的文件。软链接文件只是其源文件的一个标记，当删除了源文件后，链接文件不能独立存在，虽然仍保留文件名，但却不能查看软链接文件的内容了。软链接不直接使用inode号作为文件指针，而是使用文件路径名作为指针（软链接：文件名 + 数据部分-->目标文件的路径名）。软链接有自己的inode，并在磁盘上有一小片空间存放路径名。因此，软链接能够跨文件系统，也可以和目录链接！ 其二，软链接可以对一个不存在的文件名进行链接，但直到这个名字对应的文件被创建后，才能打开其链接。
软连接可以对目录进行连接。软连接可以对一个不存在的文件名进行连接 。
硬链接： 与普通文件没什么不同，inode 都指向同一个文件在硬盘中的区块软链接： 保存了其代表的文件的绝对路径，是另外一种文件，在硬盘上有独立的区块，访问时替换自身路径。
5、打电话使用的数据传输方式是（），手机上网使用的数据传输方式是（B）
A.分组交换，电路交换
B.电路交换，电路交换
C.分组交换，分组交换
D.电路交换，分组交换
解析：电路交换(Circuit Switching)：独享连接，用之前要先建立一条路。建立这条路需要时间。例子：吃之前要预订，去到就可以上桌吃饭了。分组交换(packet switching)：按需使用。例子：不用预订，去到饭店可能可以直接上桌点餐，但也可能因为人多要排队等候。
6、关于HTTP的POST方法，以下描述错误的是（B）
A.POST方法在请求时会产生两个数据包
B.通过访问在浏览器的网址栏中输入的网址，能够发出POST请求
C.POST方法用于提交要被处理的数据
D.POST的请求参数是放在Repost Body中
解析：GET请求在URL中传送的参数是有长度限制的，而POST没有。
GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
GET参数通过URL传递，POST放在Request body中。
GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
GET请求只能进行url编码，而POST支持多种编码方式。
GET请求会被浏览器主动cache，而POST不会，除非手动设置。
GET产生的URL地址可以被Bookmark(书签)，而POST不可以。
GET在浏览器回退时是无害的，而POST会再次提交请求。
GET产生一个TCP数据包；POST产生两个TCP数据包。对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。
GET - 从指定的资源请求数据。POST - 向指定的资源提交要被处理的数据。
一般在浏览器输入一个网址访问网站都是GET请求
7、（多选）在日常生活中，随处都可以看到显示日期的地方，如果现在有一款网站，需要在顶部显示日期，怎样才能是日期显示的是正确的格式（？）
A.var reg = /^(\d{1,4})(-|\/)(\d{1,2})(\d{1,2})(\d{1,2}):(\d{1,2}):(\d{1,2})$/;
if(!reg.test(str)){
alert('日期格式不正确!');
}
B.var reg = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})(\d{1,2}):(\d{1,2}):(\d{1,2})$/;
if(!str.match(reg)){
alert('日期格式不正确!');
}
C.var reg = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})(\d{2}):(\d{2}):(\d{2})$/;
if(!reg.test(str)){
alert('日期格式不正确!');
}
D.var reg = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})(\d{2}):(\d{2}):(\d{2})$/;
if(!str.match(reg)){
alert('日期格式不正确!');
}
8、下列输出结果为
<!DOCTYPE html>
<html>
<body>
<p>hello<q>html</q></p>
</body>
</html>
输出：hello"html"
9、HTTP状态码403表示的含义是（D）
A. Unauthorized
B. Bad Gateway
C. Bad Request
D. Forbidden
解析：401 错误 - 未授权（Unauthorized）；502 Bad Gateway是指错误网关，无效网关；
400 Bad Request的意思是你的请求是无效的。
10、当在进行前端界面和后台服务进行交互时，常常需要从后台服务中获取一组数据，现在将要将一组数据放入到数组中，正确的是（C）
A.var arr = new array(); for(var i = 0;i < data.length; i++){ arr.shift(data[i]); }
B.var arr = new array(); for(var i = 0;i < data.length; i++){ arr.add(data[i]); }
C.var arr = new array(); for(var i = 0;i < data.length; i++){ arr.push(data[i]); }
D.var arr = new array(); for(var i = 0;i < data.length; i++){ arr.pop(data[i]); }
11、在开发中，往往会碰到需要对用户名进行修改的需求，那么，怎样才能将已经存在的用户名对其进行更改(D)
A.var val = document.getElementByName("us"); val.value = str;
B.var val = document.getElementByTagName("us"); val.value = str;
C.var val = document.getElementByTagClassName("us"); val.value = str;
D.var val = document.getElementById("us"); val.value = str;
解析：getElementById()方法——通过ID获取元素。标签的id属性值是唯一的。
getElementsByName()方法----返回带有指定名称的节点对象的集合。返回的是元素的数组。
getElementsByTagName()方法----返回带有指定标签名的节点对象的集合。返回元素的顺序是他们在文档中的顺序。Tagname是标签的名称，如p、a、img等标签名。
getElementByTagClassName()方法----使用指定的calss属性值返回相关元素的集合
12、在做移动开发的时候，页面上显示了一个数据列表，要求在页面的左侧显示数据的标题，右侧显示一张导航图标，该怎么来做（？）
A.<div>文本标题</div><div>图标</div>
B.<div style="display:box">文本标题</div><div style="display:box">图标</div>
C.<div style="float:left">文本标题</div><div style="float:left">图标</div>
D.<div style="float:left">文本标题</div><div style="float:right">图标</div>
13、（多选）已知message是一个字符串，以下VUE数据绑定写法能正确显示的是（AB）
A.{{message}}
B.{{message}}
C.{{message}}
D.{{message}}
解析：v-text：{{}}是v-text的简写形式。用于操作纯文本，将数据解释为普通文本。
v-bind：动态地绑定一个或多个特性，或一个组件 prop 到表达式。
v-html：指令可以更新元素的文档结构（innerHTML）,但是不支持数据绑定。
v-model：指令用于在表单控件元素上面创建双向数据绑定
14、下面关于angular、vue、react的说法正确的是（A）
A.都可以使用虚拟DOM
B.自身都有过滤器
C.都是MVVM模式
D.都默认使用双向数据绑定
解析：MVC的界面和逻辑关联紧密，数据直接从数据库读取。MVVM的界面与viewmodel是松耦合，界面数据从viewmodel中获取。所以angularjs更倾向于mvvm。自带过滤器。
react是单向数据绑定。angular、react和vue都使用虚拟DOM。
react专注的层面为View层，不包括数据访问层或者那种Hash路由（不过React 有插件支持），与Angularjs，Emberjs等大而全的框架不同，React专注的中心是Component，即组件。
15、（多选）下列关于Canvas和SVG图形的区别说法错误的是（BC）
A.SVG为了之后的操作，需要记录坐标，所以比较缓慢
B.Canvas和分辨率无关
C.Canvas绘制的形状都能被记忆和操作
D.Canvas不能使用绘制对象的相关事件处理，因为我们没有他们的参考
解析：SVG可缩放矢量图形（Scalable Vector Graphics）基于可扩展标记语言（XML），是一种和图像分辨率无关的矢量图形格式。Canvas 通过 JavaScript 来绘制 2D 图形，它是逐像素进行渲染的。
SVG这个就好像绘制和记忆，换句话说任何使用SVG绘制的形状都能被记忆和操作，浏览器可以再次显示；Canvas就像绘制和忘记，一旦绘制完成你不能访问像素和操作它
SVG对于创建图形例如CAD软件是良好的，一旦东西绘制，用户就想去操作它；Canvas在绘制和忘却的场景例如动画和游戏是良好的
SVG因为为了之后的操作，需要记录坐标，所以比较缓慢；Canvas因为没有记住以后事情的意向，所以更快
SVG我们可以用绘制对象的相关事件处理；Canvas我们不能使用绘制对象的相关事件处理，因为我们没有他们的参考
SVG分辨率无关；Canvas分辨率相关
16、若要设置一个表单不会因为屏幕的改变而影响表单显示，现要设置表单的最小宽度为76元素像素，所有元素靠左显示，并且表单距离屏幕有一定的距离，如何设置（？）
A.min-width:76dp; text-align:left; margin:1em;
B.min-width:76px; align:left; margin:1em;
C.min-width:76px; text-align:left; margin:1em;
D.min-width:76dp; align:left; margin:1em;
解析：
17、日期类转换到原始值能用什么方法（B）
A.String.toLowerCase()
B.valueOf()
C.String.toUpperCase()
D.toString()
解析：日期类的toString返回一个可被JS解析的日期和时间字符串。如果它返回一个原始值，js将其转换为字符串，并返回这个字符结果。
var date = new Date();date.toString(); // "Sat Nov 05 2016 14:41:43 GMT+0800 (中国标准时间)"
valueOf()如果存在任意原始值，就默认将对象转换为表示它的原始值。
18、下面是一段关于计算变量s的算法：1变量s的初值是0；2变量从1起循环到n，此时变量s的值由下面的式子表达式计算：3 s = s + (-1)*i; 4输出变量s的值。这个计算s值的算法中，s的代数式表示是（B）
A.1 - 2 + 3 - 4 + ... + (-1)n * (n-1)
B. -1 - 2 - 3 - 4 - ... - n
C. 1 - 2 + 3 - 4 + ... + (-1)n - 1 * n
D. 1 + 2 + 3 + 4 + ... + (n-1) + n
解析：示例代码如下：
function cal(){ var s = 0; for(var i = 0; i < 6; i++){ s = s + (-1)*i; } console.log(s); } cal();
19、字符串“ABCD”和字符串“DCBA”进行比较，如果让比较的结果为真，应选用关系运算符（D）
A. >=
B. >
C. =
D. <
解析：两个操作数都是字符串，则比较两个字符串对应的字符编码值（ASCII值）。"A"的码位值65，小于D
20、关于递归的说法不正确的是（B）
A.程序结构更简洁
B.递归法比递推法的执行效率更高
C.占用CPU的处理时间更多
D.要消耗大量的内存空间，程序执行慢，甚至无法执行
解析：递推法比递归算法效率更高。递推法是一种根据递推关系来一步步递推求解的问题求解策略。递归法是一种问题规模的递推，属于一种编程技术。
21、（多选）一台客户端有三百个客户与三百个客户端有三百的客户对服务器施压，有什么区别？（ABCD）
A. 300个用户在一个客户端上，需要更大的带宽
B. 线程之间可能发生干扰，而产生一些异常
C. 用户分布在不同的客户端上，需要考虑使用调度器来整体调配不同客户机上的用户
D. 所有用户在一个客户端上，不必考虑分布式管理的问题
解析：补充：300个用户在一个客户端上，会占用客户机更多的资源，而影响测试的结果。IP地址的问题，可能需要使用IP Spoof来绕过服务器对于单一IP地址最大连接数的限制。用户分布在不同的客户端上，需要考虑使用控制器来整体调配不同客户机上的用户。同时，还需要给予相应的权限配置和防火墙设置。
22、权重分别为9、3、2、8的结点，构造一棵哈夫曼树，该树的带权路径长度是（A）
A.40
B.45
C.36
D.46
解析：带权路径长度最小的二叉树就称为哈夫曼树或最优二叉树。
wpl = 叶子结点对应的权值*分支数 =根节点的权值
= 3 * 3 + 2 * 3 + 8 * 2 + 9 * 1 = 40
23、（多选）采用哪种遍历方法可唯一确定一棵二叉树（BC）
A.给定一棵二叉树的先序和后序遍历序列
B.给定一棵二叉树的后序和中序遍历序列
C.给定一棵二叉树的先序和中序遍历序列
D.给定先序、中序和后序遍历序列的任意一个即可
解析：先序+后序不能唯一确定一棵二叉树，其他两种组合先序+中序和中序+后序可以唯一确定一颗二叉树。由先序序列和后序序列不能唯一确定一棵二叉树，因无法确定左右子树两部分。反例：任何结点只有左子树的二叉树和任何结点只有右子树的二叉树，其前序序列相同，后序序列相同，但却是两棵不同的二叉树。
24、一棵二叉树的叶子结点有5个，出度为1的节点有3个，该二叉树的结点总个数是（B）
A.11
B.12
C.13
D.14
解析：二叉树总节点数 N = n0 + n1 + n2 。
二叉树性质：终端结点（叶子节点）个数n0 = 度为2的节点（有2个孩子）个数n2 + 1
即n0 = n2 + 1.
3个出度为1的结点。5个叶子结点。度为2的节点=5-1=4。所以总个数 = 3 + 5 +4= 12
25、（多选）关于虚拟DOM的说法错误的是（A）
A.现在的MVVM框架采用了虚拟DOM方式
B.首次渲染大量DOM时，由于多了一层虚拟DOM的计算，会比innerHTML插入慢
C.虚拟DOM最终表现在DOM上的修改只是变更的部分，可以保证非常高效的渲染
D.虚拟DOM并不是真正的DOM节点，而仅仅是Javascript对象
解析：虚拟DOM是在DOM的基础上建立了一个抽象层，对数据和状态所做的任何改动，都会被自动且高效的同步到虚拟DOM，最后再批量同步到DOM中。
在React中，render执行的结果得到的并不是真正的DOM节点，而仅仅是JavaScript对象，称之为虚拟DOM。
虚拟DOM具有批处理和高效的Diff算法，可以无需担心性能问题而随时“刷新”整个页面，因为虚拟DOM可以确保只对界面上真正变化的部分进行实际的DOM操作。
优点：最终表现在DOM上的修改只是变更的部分，可以保证非常高效的渲染。
缺点：首次渲染大量DOM时，由于多了一层虚拟DOM的计算，会比innerHTML插入慢。
26、http协议中使用GET方法时，参数是通过什么方式传递的（C）
A.请求的header中
B.GET请求无法传参
C.URL参数
D.请求的body中
27、电脑已经安装好vue-cli，下面可以创建一个项目的命令是（A）
A. vue init programName
B. vue install programName
C. vue run programName
D. vue creat programName
28、分析下面JavaScript的代码段：
var s1 = "qpzm";
var s2 = "qp"+"zm";
if( s1 == s2){
document.write("s1 == s2 return true");
}else{
document.write("s1 == s2 return false");
}
if(s1.equals(s2)){
document.write("s1.equals(s2) return true");
}else{
document.write("s1.equals(s2) return false");
}
请问运行完此函数，最后显示的结果是（D）
A. s1 == s2 return true；s1.equals(s2) return true
B. s1 == s2 return false
C. s1 == s2 return true； s1.equals(s2) return false
D. s1 == s2 return true
解析：“equals()”指的是两个对象的值相等。不能用于基本数据类型的变量，如果没有对equals()方法进行重写，则比较的是引用类型变量所指向的对象的地址。
==：如果比较的对象是基本数据类型;则比较的是值是否相等 。如果比较的是引用数据类型,则比较的是对象的地址值是否相等
String类型有两种内存方式： (1) String str = “string”; //是将变量值存放到常量池 (2) String str2 = new String(“string”);//是在堆内存中
29、在做页面框架布局时，经常会需要使页面中每个部分的内容所占的空间大小相同，如果要使用弹性盒子模型的概念来写一个相同比例空间的元素，该怎样来实现（？）
A. .flat{display:-webkit-box; position:relative; -webkit-box-flex:1; box-flex:1;}
B. .flat{display:-webkit-box; position:relative; -webkit-box-flex:1;}
C. .flat{position:relative; -webkit-box-flex:1; box-flex:1;}
D. .flat{display:-webkit-box; position:relative; box-flex:1;}
解析： box-flex是css3新添加的盒子模型属性，它的出现打破了我们经常使用的浮动布局，实现垂直等高、水平均分、按比例划分。它使元素实现水平分布，而且不需要使用浮动float属性就能实现水平布局。
30、有如下div
{
margin-top:20px;
margin-right:30px;
margin-bottom:40px;
margin-left:50px;
}
请问下列选项与该div实现了相同效果的是（A）
A. div{margin:20px 30px 40px 50px};
B. div{margin:20px 40px 50px 30px};
C. div{margin:20px 50px 40px 30px};
D. div{margin:20px 40px 30px 50px};
解析：margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。允许使用负值。四个属性顺序依次为：上、右、下、左（顺时针）
四、寻找中位数
题目描述：
数学课上，老师揪出了老是和旁边同学交头接耳的小Q，为此老师提出了一个问题看小Q是否对知识有所掌握。
老师给了小Q n个整数，要求小Q往其中加入一个数，但数列的中位数保持不变。
输入
第一行一个数 n（1≤n≤100）。
第二行n个数Ai，表示n个整数（1≤Ai≤100），保证互不相同。
输出
一个数，小Q需要加入的数。
如果是整数，直接输出。如果是小数，请不要输出多余的后缀0
样例输入
6
3 2 9 10 4 5
样例输出
4.5
Hint
输入样例2
5
3 2 9 10 11
输出样例2
9
样例解释
对于样例1：
原数列：2 3 4 5 9 10，中位数为4.5
新数列：2 3 4 4.5 5 9 10，中位数为4.5
程序：
va rline1 = read_line();
varline2 = read_line();
var strArr = line2.split(' ');
var input = newArray();
for(var i=0;i < strArr.length; i++) {
input.push(parseInt(strArr[i]));
}
input.sort(NumAscSort)
print(findMedian(input));
function NumAscSort(a,b)
{
return a - b;
}
function findMedian(ary) {
if (ary.length%2 == 0) {
var mid = ary.length/2;
return(ary[mid] + ary[mid-1])/2;
}
else{
var mid = Math.floor(ary.length/2);
return(ary[mid]);
}
}
五、修路
题目描述：
A国有n个城市，他们计划修建n-1条长度为1的道路连接两个城市，城市规划已经给出，最终使得n个城市互相连通，从i城市到j城市有且只有一条唯一路径。
有一家施工队计划承包两段道路的修建工作，要求这两段道路不经过相同的城市(包括路径端点)，他们可以获得的利润是两段道路长度的乘积，现在要使得利润最大化，问最大能获得多少利润。
输入
输入共有n行，第一行包含一个整数n，表示城市的数量。（n<=200）
接下来有n-1行，每行有两个整数,a,b,表示在a城市和b城市之间存在一条长度为1的道路。
输出
输出包含一行，表示最多可以获得的利润是多少
样例输入
4
1 2
2 3
3 4
样例输出
1
Hint
输入样例2
6
1 2
2 3
2 4
5 4
6 4
输出样例2
4
样例解释
样例2应该选取1-2-3和5-4-6,这样一来两条道路的长度都为2，利润最大为2*2=4.
程序：
