前端开发面试题总结（血泪换来的）
辞职之后最近在找前端开发的工作，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。以此类推到页面所有的元素。
