前端面试整理
1，数组去重
function noRepeat(arr){
var resArr = [];
var obj = {};
for(var i=0,len=arr.length;i<len;i++){
if(!(obj[arr[i] + typeof arr[i]])){
resArr.push(arr[i]);
}
}
}
2，闭包的概念阐述
执行一个函数的时候就会产生一个封闭的作用域，这个封闭的作用域就是闭包，一般大家会认为;(function(){})()是闭包，但这只是闭包的一种形式。闭包的好处就是避免变量冲突，但是闭包的缺点是，如果闭包中有引用类型的数据被使用，那么整个闭包都无法释放，占用内存。
3，base64的优缺点
一般移动端的大的背景图会用base64,而且图片体积比较大的时候才会使用base64，如果图片比较小，那么base64编码后的字符串会比图片本身还要大，只有图片达到几百k左右的级别的时候，用base64编码就会大大缩小图片的体积
优点：能够减小图片的尺寸，同时还能够减少http请求数量，http请求是非常消耗服务器资源的
缺点：不能缓存
4，各种图片格式
jpg:一般能够把大的图片压缩小一点，就是压缩效率高
png:能够实现图片的透明效果，而jpg透明的部分是白色的，在ie下png24会自动加上背景色，但png8可能会模糊一些
gif:一般用作动态图，如loading图片
5，10000个不重复的数字取5000个不同的数字，要求多次操作均获得不同的结果
最佳的方案是从10000个数字中随机取出一个，然后把数组最后一个元素填充到取出的空缺处，这样数组长度变成9999，进行5000次即可。
上述方案比用splice删除数组中的一项要节省性能，这属于内存的知识，假如取出第10个数字，使用splice会使得后面的9990个数字都向前移动一个单位，导致时间复杂度特别高。
要有防止内存大规模迁移的思想。
6，求数组中最大的数字
var max = Math.max.apply(null,arr)
7，字符串反转
var reverseStr = str.split("").reverse().join("");
8，前端性能优化
js放下面，css放下面可能会闪，所以css放上面
移动端用base64处理大的背景图
用css sprite解决一些小的图片，减少http请求
代码压缩
做图片的延迟加载
用CDN服务器对网站的静态文件做负载均衡，在CDN后面加上?时间戳保证每次都是最新的文件
9，盒子模型
content+padding+border+margin
如果在移动端，这种盒子模型就不适合做开发了，最好用box-sizing:border-box;属性改变一下盒子模型，写了这个属性后，宽度会包括border，因为移动端主要用的是百分比，不可能通过像素精准控制，如果让两个占屏幕50%的div并排，而这两个div还有border和padding，原来的盒子模型就做不到。必须改为border-box才可以，用inline-block让两个div并排后，中间会有一个空白字符，可以用font-size:0来解决。
10，文档就绪函数$(document).ready()
用标准浏览器的DOMContentLoaded及IE的doScroll（dom没有加载完时，会抛出异常9）实现
11，原生js实现复制对象，扩展对象，类似jq中的extend()方法
function cloneObj(oldObj) { //复制对象方法
if (typeof(oldObj) != 'object') return oldObj;
if (oldObj == null) return oldObj;
var newObj = new Object();
for (var i in oldObj)
newObj[i] = cloneObj(oldObj[i]);
return newObj;
};
function extendObj() { //扩展对象
var args = arguments;
if (args.length < 2) return;
var temp = cloneObj(args[0]); //调用复制对象方法
for (var n = 1; n < args.length; n++) {
for (var i in args[n]) {
temp[i] = args[n][i];
}
}
return temp;
}
利用解构拷贝对象和数组
const obj = {a:1,b:2}
const cloneObj = {...obj}
obj === cloneObj //false
cloneObj //{a:1,b:2}
12，跨域
同源策略规定多个web资源的url中的scheme、hostname、port必须相同，只要有一项不同就属于跨域。由于同源策略的影响，XMLHttpRequest只可以发起操作同域下的请求。script元素可以作为一种ajax传输协议，浏览器会发出一个http请求到src属性所指向的url。服务器返回的数据需用javascript方法名加括号包裹住才行，返回的是一个jsonp数据(例如：functionname({"name":"a"}))，而不是一个普通的json数据。在请求的url后面加上?callback=functionname，并在window下有一个functionname的方法。
//实现一个简单的JSONP请求
//请求的url、包裹方法名称、回调函数
function JSONP(url,callbackName,callback){
//为本次请求创建一个唯一的callback名称
var cbnum="cb"+JSONP.count++; //计数器 生成一个唯一的名称
var cbname="JSONP."+cbnum; //作为JSONP方法的一个静态属性
if(url.indexOf("?")==-1){
url+="?"+callbackName+"="+cbname;
}else{
url+="&"+callbackName+"="+cbname;
}
JSONP[cbnum]=function(response){
try{
callback(response);
}catch (ex){
}finally{
//执行完毕之后就删掉，因为没什么用了
delete JSONP[cbnum];
script.parentNode.removeChild(script);
}
}
var script=document.createElement("script");
script.src=url;
document.body.appendChild(script);
}
//初始化用于创建唯一名称的计数器
JSONP.count=0;
//发起JSONP请求。
JSONP("http://suggestion.baidu.com/su?wd=xxx","cb",function(data){
//将百度返回的数据输出到控制台中
console.log(data)
});
跨域资源共享CORS，使用标准浏览器中的XMLHttpRequest对象及IE8-9中的XDomainRequest对象。设置XMLHttpRequest中的WithCredentials为true。服务器会在响应头设置Access-Control-Allow-Origin指定跨域请求源。
(function (global, undefined) {
//根据有无withCredentials来判断浏览器时候支持XMLHttpRequest跨域请求操作
var XMLHttpRequestCORS = (function () {
if (!('XMLHttpRequest' in global))
return false;
var a = new XMLHttpRequest();
return a.withCredentials !== undefined;
})(), request = function () {
//判断浏览器兼容性
if ('XDomainRequest' in global)
return new XDomainRequest();
//是否支持跨域请求
if ('XMLHttpRequest' in global && XMLHttpRequestCORS)
return new XMLHttpRequest();
return false;
};
var xhr = request();
if(xhr){
xhr.open("get", "http://localhost:1111");
xhr.onload = function () {
//onload方法表示请求已经完成，参见上面XMLHttpRequest的onload属性解释
console.log(this.responseText);
};
xhr.send();
}
})(window);
