前端开发面试题总结（血泪换来的）

辞职之后最近在找前端开发的工作，1天面试3次特别累，做了很多面试题，我想通过总结一些给各位想找这方面工作的朋友，少走些弯路吧，很多面试题都是比较考基础的东西，包括一些新特性，还有一些声明提前的东西。问你做得项目如何完成，怎么去做得。差不多是这些了。进入正题！

1.JavaScript是一门什么样的语言，它有哪些特点？

（1）一门弱类型的语言，不用预编译，是边解析边执行的。（2）是运行在web客户端浏览器上的。

（3）由Dom，Bom，ecma组成的；（4）不需要提前声明变量的数据类型。

2.JavaScript的数据类型都有什么？

基本数据类型：String,boolean,Number,Undefined, Null

引用数据类型：Object(Array,Date,RegExp,Function)

3.表单中Readonly和Disabled的区别？

Readonly和Disabled是用在表单中的两个属性，它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别，总结如下：

Readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，包括select, radio, checkbox, button等。

但是表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，而readonly会将该值传递出去（这种情况出现在我们将某个表单中的textarea元素设置为disabled或readonly，但是submit button却是可以使用的）。

4.闭包是什么，有什么特性，对页面有什么影响?

闭包就是能够读取其他函数内部变量的函数。

5.什么是同源策略？

协议、域名、端口都一致的，http://127.0.0.1:8080/test1和http://localhost:8080/test1也不属于同源

6.jsonp的特点？

优点：1它的兼容性更好，2不受同源策略的限制。

缺点：1它只支持GET请求而不支持POST等其它类型的HTTP请求2会出现中文乱码。

3jsonp在调用失败的时候不会返回各种HTTP状态码。

7.跨域的几种方式？8.json和jsonp的区别？JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，用于在浏览器和服务器之间交换信息。

JSON是一种数据格式，JSONP是一种数据调用方式。

9.什么是Ajax，它们的优缺点？优点：(1)可以使得页面不重载全部内容的情况下加载局部内容，降低数据传输量(2)避免用户不断刷新或者跳转页面，提高用户体验

缺点：1.代码调试的难度增加  2.要实现ajax下的前后退功能成本较大 3.可能造成请求数的增加。4.跨域问题限制。

10.encodeURI和 encodeURIComponent 的作用基本功能都是把URI 非法字符转化成合法字符。

区别：传递参数时需要使用encodeURIComponent，这样组合的url才不会被#等特殊字符截断。（会对url里面的符号进行编码和空格，范围更大）

进行url跳转时可以整体使用encodeURI（会对中文和空格进行编码）

例如：Location.href="/encodeURI"("http://cang.baidu.com/do/s?word=百度&ct=21");

11.Ajax的实现步骤(面试题)？

*创建核心对象

*建立连接- open()

*发送请求数据- send()

*注册监听- onreadystatechange

*获取通信状态- readyState

*接收响应数据- status

var xhr=getxhr();

xhr.open(mothod, url);

xhr.send(null);

xhr.onreadystatechange=function(){

if(xhr.readyState==4&&xhr.status=200){

var data=xhr.responseText;

}

}

function getxhr(){

var xhr=null;

if(window.XMLHttpRequest){

xhr=new XMLHttpRequest();

}else{

xhr=newActiveXObject(‘Microsoft.XMLHttp’);

}

}

13.cookies和sessionStorage,localstorage的特点？

Cookies：存储在用户本地终端上的数据。每次请求http都会携带cookies；有性能的问题。

localStorage：没有存储时间的限制。

sessionStorage：当用户关闭浏览器窗口后，数据会被删除

14。数组转为json字符串？现代浏览器中提供了JSON.stringify()方法 将数组，对象转成json。

JSON.stringify 把一个对象转换成json字符串，

JSON.parse 把一个json字符串解析成对象。

15.html5增添了哪些新标签和api？

16.数组去重复？

方法1：var aa=[1,3,5,4,3,3,1,4];

var newaa=[];

for(var i=0;i

if(newaa.indexOf(aa[i])==-1){

newaa.push(aa[i]);

}

}

方法2：每次从原数组中取出一个元素，然后到对象中去访问这个属性，如果能访问到值，则说明重复。

var aa=[1,3,5,4,3,3,1,4];

Array.prototype.chongfu=function(){

var obj={},newaa=[];

for(var i=0;i

if(!obj[this[i]]){

newaa.push(this[i]);

obj[this[i]]=1;

}

}

return newaa;

}

aa.chongfu();

17.在数组中出现的次数最多的？

var str="Hello World"

function calc(str){

var hash=str.split("");

hash.sort();

str=hash.join("");

console.log(str);

hash=str. (/(.)\1*/gi);//返回一个数组

//return hash;

for(var i=0;i

console.log(

hash[i].charAt(0)+":"+hash[i].length);

}

}

console.log(calc(str));18.js 手写冒泡排序？var aa=[1222,33,5222,4,31,321,13,14];

function bubbleSort(){

var text=null;

for(var j=0;j

for(var i=0;i

if(aa[i]>aa[i+1]){

aa[i]+=aa[i+1];

aa[i+1]=aa[i]-aa[i+1];

aa[i]-=aa[i+1];

}

}

}

return aa;

}

bubbleSort(aa);

19.用过哪些框架，什么场景的选择，优缺点？  解决了兼容性问题！

Angular：优点---实现了数据，逻辑，表现的分离。缺点---提高了代码的复杂程度。

Bootstrap：优点---样式好，缺点--，数据不能定制，代码比较麻烦

20.常用的优化手段？

代码优化（css、html、js优化）

减少HTTP请求（雪碧图，文件合并…）

无阻塞（内联CSS，JS置后…）

缓存

预加载，懒加载。

绑定的事件处理函数的个数越少，页面运行效率就越高！

21.浏览器的兼容性？（前缀，后缀，条件注释）1.通过他的父对象的prototype对象进行添加属性和方法！

2.通过navigator.userAgent对不同版本引入不同的JS代码！

22.什么是闭包？怎么实现？

1.外层函数封装受保护的变量以及专门操作变量的内层函数

2.外层函数将操作变量的内层函数返回到外部

3.调用外层函数，获得内层函数的对象。

23.外框固定高度，内框（高度不定）垂直 水平居中？   (重点)方法一：position:absolute;

top:50%;left:50%;

transform:translate(-50%,-50%);

方法二：模拟表格：

子元素--display：inline-block；

父元素--display：table-cell；vertical-align：middle；text-align：center；

方法三：flex：

.div1{//父容器

display: flex;

height:150px;

justify-content:center; （水平居中）

align-items:center;  （垂直居中）

}

23.如何做移动端的适配？

如果加载页面的时候，使用JS根据屏幕的大小动态设置html标签的font-size，随着html标签font-size的值变化，div的1.2rem换算成px的值 也跟着变化，即实现了div随屏幕大小变化而变化，而CSS代码始终是width:1.2rem。以此类推到页面所有的元素。