欢聚时代2017前端B卷

1、下面一段程序，最后输出i的值是多少？(     )

var i = 10;

for(var i = 0; i < 5; i++){

 i += 2;

}

console.log(i);

正确答案: D

10

12

5

6

2、面一段程序，最后输出foo的值是多少？(     )

(function(){

 var foo = 'bar';

 console.log(foo);

})();

正确答案: D 

程序报错

undefined

null

bar

3、下面哪些不是Javascript的基础数据类型？

正确答案: C E F H J

Undefined

Null

Array

String

Function

Date

Number

Object

Boolean

RegExp

4、下面对CDN表述错误的有那些？

正确答案: B D
CDN是一种分布式网络存储
CDN服务器质量比程序服务器要好，所以才速度快
可以使用CDN对抗DDOS攻击
CDN无法加速动态程序

解析：
CDN是一种内容分发网络

基本思路是：尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。
通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络。

CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。

其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。

5、在javascript里，下列选项中不属于数组方法的是

正确答案: A 

length()

sort()

concat()

reverse()

6、[“1", "2", "3"].map(parseInt)的执行结果是？

正确答案: D

["1", "2", "3"]

[1, 2, 3]

[0, 1, 2]

其他

解析：结果是[1,NaN,NaN]，见欢聚时代2017前端C卷

7、下面代码执行后，foo.x的值是 ？(     )

var foo = {n: 1};

var bar = foo;

foo.x = foo = {n: 2};

正确答案: D

1

2

程序报错

其他

解析：结果是undefined，见欢聚时代2017前端C卷

8、关于SVG和CANVAS，下面陈述正确的有?

正确答案: D F

SVG做动画性能要优于CANVAS

CANVAS做动画性能要优于SVG

SVG产生的dom数量比CANVAS要少

CANVAS产生的dom数量比SVG要少

CANVAS可以使用css设置动画样式

SVG可以使用css设置动画样式

解析：见欢聚时代2017前端C卷

9、下述可正确注释html代码的有？

正确答案: C

// <div></div>

# <div></div>

<!-- <div></div> -->

/* <div></div> */

10、下述片段中，el指向的dom是？ (     )

html:

<div id=”foo”>

<p id=”foo”></p>

</div>

javascript:

var el = document.getElementById('foo');

正确答案: C

<div id=”foo”></div>

<p id=”foo”></p>

无法获取值

11、前端页面分别由哪三层构成？

答案：结构HTML，表现CSS，行为JS

12、用CSSHack写出IE6、7、8下的width:10px？

参考答案

_width:10px\9;*width:10px;_width:10px;

13设置CSS属性float的值为（ ） 时可取消元素的浮动。

答案：none

14、内联元素和块元素的区别是 （ ） 。

答案：

内联元素不可设置宽高，占据行的一部分

块元素占据一行，可设置宽高

15、在页面的head标签内，使用（）可以让移动设备的页面宽度等于设备的宽度 。

答案：<meta name="viewport" content="width=device-width"/>

16、请写出获取客户端系统当前时间时间戳的代码：（ ） 。

答案：new Date().getTime()

17、使用 （ ） 可以将JSON格式的数据转换为字符串格式。

答案：JSON.stringify()

18、圆角的CSS3代码是： （ ） 。

答案：border-radius

19、Gecko、Webkit、Tridentr的私有样式前缀分别是（ ）。

答案：-moz、-webkit、-ms

20、请写出一个立即调用的匿名函数_（ ）_。

答案：

(function(){

    //......

})();

21、用CSS分别定义IE6、7、8的width属性，使其在IE6下的值为10px，IE7为20px，IE8为30px？

答案
:root { width: 10px\0; +width: 20px; _width: 10px; } 注意顺序不可颠倒

22、px、em、rem的区别是什么？

答案：

px的值是固定的。

 em的值不是固定的，em会继承父级元素的字体大小，并按值进行倍率计算。 

 rem和em的计算方法一致，但是rem会从html节点继承，rem是root em的缩写。

23、从视觉上隐藏一个dom元素，既不考虑隐藏后是否占位，说说你所知道的所有方法。

答案
display: none;

visibility: hidden;
position: absolute; left: -99999px; top: -99999px;

:root text-indent: -99999px;
width: 0; height: 0; overflow: hidden;
margin: -99999px 0 0 -99999px;
opacity: 0;
transform: scale(0);
transform: skew(90deg,0); 或 transform: skew(0,90deg);

javascript 可对 dom 设置 createShadowRoot()
Javascript 删除 dom 元素

24、有如下一段css和html结构，最终#box的宽度和高度分别是多少？

Html部分：

<div id="box"></div>

CSS部分：

#box { width: 100px; height: 50px; margin: 5px 2px 3px; padding:3px 2px 1px; border: 3px solid #000; }

答案：110px、60px
注意：不包括margin

25、说说你所知道解决跨域问题的方案，越多越好。

答案：

JSONP

Iframe框架

CORS

通过修改document.domain来跨子域

使用window.name来进行跨域

使用HTML5中新引进的 window.postMessage 方法来跨域传送数据

26、请写出一个让元素旋转一周的动画关键帧。

答案：
@keyframes myreverse

{

    from {transform: rotate(0deg);}

    to {transform: rotate(360deg);}

}

使用：animation:myreverse 10s; 

27、如果有以下数组（[0,2,3,4,4,0,2]），需要去重，请写出如何实现

答案

var del=function(arr){

    if (!arr||arr.length==0) {

        return [];

    }

    return Array.from(new Set(arr));

};

或者

var del=function(arr){
if (!arr||arr.length==0) {
return [];
}
return
arr.filter(function(item,index,arr){
return arr.indexOf(item)===index;
});

}

28、使用快速排序算法，对[3,23,66,32,2,77,45,87,64,34,33]进行由小到大的排序。

答案：

var quickSort=function(arr){
if (!arr||!arr.length) {
return [];
}
var midIndex=parseInt(arr.length/2);
var midValue=arr.splice(midIndex,1)[0];  //注意[0]
var left=[],right=[],item;
for(item of arr){
if (item<midValue) {
left.push(item);
}else{
right.push(item);
}
}
return quickSort(left).concat(midValue,quickSort(right));

}