一套前端笔试题

	今天学校组织了一场去兴盛优选的企业行。在现场做了一套前端面试题。在这里把这个卷子做个总结。

—————————————————————————————
第一题
说明CSS中常用的单位px、em、rem的区别？
答：px像素是绝对长度单位，代表具体的尺寸单位；
而em、rem是相对长度，是倍数的意思。em是相对于它的父元素的的font-size的倍数；rem是相对于根元素（即html标签）的font-size的倍数。

第二题
CSS中的选择器的类型以及权重，并举例？
（此题略，主要是能答出CSS3中的新的选择器，可能会有加分）

第三题
JS中的强制类型转换、隐式转换，说明并举例？
答：
强制转换类型：
①转换成string
toString方法（使用于字符型和布尔型,null和undefined不适用）：

var a = 123;
a = a.toString();
console.log(typeof(a));
var b = true;
b = b.toString();
console.log(typeof(b));

String()函数（所有类型都可用）

var a = 123;
a = String(a);
console.log(typeof(a));
var b = true;
b = String(b);
console.log(typeof(b));
var c = null;
c = String(c);
console.log(typeof(c));
var d = undefined;
d = String(d);
console.log(typeof(d));

隐式转换
用字符串拼接的方法
（原理：JS规定任何数据类型的变量与字符串拼接都会自动转化成字符串）

var a = 123;
a = a + '';
console.log(typeof(a));
var b = null + '';
console.log(typeof(b));
var c = undefined + '';
console.log(typeof(c));

②转换成Number型
Number()函数
(只有纯数字的字符串才能转成Number型，如果有非数字，则返回NaN。布尔值和NULL可以转换)

var a = "123";
a = Number(a);
console.log(typeof(a));
Number(true)   //1
Number(false)   //0
Number("")   //0
Number(null)   //0
Number(undefined)   //NaN
Number("任意字符串")   //NaN 
Number("2")   //2 

parseFloat()函数

       ParseFloat(true)   //NaN
       ParseFloat(false)   //NaN
       ParseFloatr("")   //NaN
       ParseFloat(null)   //NaN
       ParseFloat(undefined)   //NaN
       ParseFloat("abcd")   //NaN 
       ParseFloat("2.0")   //2  
       ParseFloat("2.0a")   //2
       ParseFloat("2.1")   //2.1   
       ParseFloat("2.1A")   //2.1         

（如果转换数字的时候小数点后面是0会自动省略(可以使用toFixed保留小数)直到碰到第一个不是数字和小数点的字符就不再继续读取）
parseInt()函数

ParseInt(true)   //NaN
ParseInt(false)   //NaN
ParseInt("")   //NaN
ParseInt(null)   //NaN
ParseInt(undefined)   //NaN
ParseInt("abcd")   //NaN 
ParseInt("2")   //2  
ParseInt("2a")   //2

Number可将undefined null 空字符串和true和false转换成数字,而parseFloat和parseInt并不能
NaN是number中的一个值,代表一切不是数字的值
如果将非字符串转换成数字,一般使用Number()(可以转换布尔和空字符串等),如果将字符串转换成数字,首选parse系列(可以将末尾的字符串清除)
③转成Boolean型
Boolean()

var a = 1;
a = Boolean(a);
console.log(typeof(a));

只有0,null,NaN undefined,false转换成false,其他均为true

第四题
flex布局实现分栏、瀑布流。
瀑布流的实现查到了一个讲的比较清楚的文章。连接如下：
瀑布流布局

第五题
说出Array数组对象的方法及作用
concat() 连接两个或多个数组，返回的是合并后的新数组，原数组不变。
join() 把数组中所有元素放进一个字符串中，并用括号中的符号作为分隔符
push() 向数组的末尾添加一个或多个元素（取决于括号里元素个数），返回的是添加元素后的新数组的长度。
slice(start,[end]) 返回从start到end（end可省略，省略时默认为到数组末尾）的元素
sort() 用于对数组排序（此方法括号内参数为一个函数，用于决定排序方式，省略时默认从小到大，但是是按字符编码的顺序，不一定是数学上的从小到大）
splice() 向数组中添加或删除一个或多个元素
pop() 删除并返回最后一个元素
shift() 删除并返回第一个元素
unshift() 向数组的开头添加一个或更多元素，返回新的长度

第六题
call、apply、bind三者的用法和区别？
答：作用：call、apply、bind可以将某个函数的this指向修改为传入这三个方法中的第一个参数。
区别：call、apply会立即执行，而bind返回的是函数，需要调用才会执行；
第二个参数是传入要执行的方法中的参数，call、bind是独立传递参数，apply是以数组传递参数的
使用场景：
1、需要改变某个函数的this指向时
2、当参数较少时可以使用call，参数较多可以使用apply以数组的方式传递
3、当需要重复调用时，可以使用bind新定义一个方法
原文参考连接：
call、apply、bind的用法和区别

第七题
用js/css至少2种方法实现GIF图
一、用css的动画来做
二、用定时器setInterval来做
（作者只能想到这两种方法）

第八题
两个页面之间通信的办法有哪些？
由于篇幅原因，此题建议参考下面链接
两个页面间通信的方式

第九题
说明跨域问题，以及解决办法？
详解链接：
跨域问题以及解决办法

第十题
说出常见的HTTP状态码，并说明它们的含义？
1** 信息，服务器收到请求，需要请求者继续执行操作
2** 成功，操作被成功接收并处理
3** 重定向，需要进一步的操作以完成请求
4** 客户端错误，请求包含语法错误或无法完成请求
5** 服务器错误，服务器在处理请求的过程中发生了错误
更加详细的状态码及含义连接：
HTTP状态码详解

最后还有个大题是使用canvas画布标签把给出的小的素材图片合成一张目的图片的马赛克大图。
（作者画布标签暂时还不是很会，没有解题思路Q-Q）