前端试题大综合练习（七）

 

1、Ajax是什么？Ajax的交互模型？同步和异步的区别？如何解决跨域问题？
解：Ajax是"异步JS和XML"，是一个技术的组合；
主要用来实现客户端与服务器的异步交互效果，实现页面的局部刷新；
Ajax的实现过程：①创建XMLHttpRequest对象，即创建一个异步调用对象；②创建一个新的http请求，并指定请求的方法、URL以及验证信息；③设置响应http请求状态变化的函数；④发起http请求获取异步调用返回的数据，使用js和DOM实现局部刷新；
同步和异步的区别：同步，执行当前事件的时候，其他事件等待；异步，各自操作互不等待；
如何解决跨域问题：协议、域名、端口都相同才是同源，否则就是跨域。解决：动态创建script标签，并利用其src属性以访问JS文件的形式获取JS脚本，且JS脚本中的内容是回调函数的调用，参数是服务器返回的数据。那么就需要实现在页面中定义好回调函数，在该函数中处理返回的数据。
ajax实现过程代码：
var xhr=new XMLHttpRequest(); 
//创建XMLHttpRequest对象
xhr.onreadystatechange=function(){  
if (xhr.readyState===4) {
if (xhr.status>=200&&xhr.status<=300||xhr.status==304) {
//请求成功，处理数据
alert(xhr.responseText);
}else{
//请求失败
alert(xhr.status);
}
}
};
//设置响应http请求状态变化的函数
xhr.open('get','url','true'); 
//指定http请求，包括请求的方法、URL以及验证信息
//get或post，表示是否异步请求的布尔值
xhr.send(); 
//发起http请求
2、在JavaScript中，如何判断某变量是否为数组数据类型？
答案：①Array.isArray(arr)；②arr.constructor===Array③arr instanceof Array ④Object.prototype.toString.call(arr)==='[Object Array]'
3、以下哪一项不属于浏览器Response Headers字段：
Referer
Connection
Content-Type
Server
答案：A
常见的请求头和响应头字段：
请求:
Accept: */*(客户端能接收的资源类型)
Accept-Language: en-us(客户端接收的语言类型)
Connection: Keep-Alive(维护客户端和服务端的连接关系)
Host: localhost:8080(连接的目标主机和端口号)
Referer: http://localhost/links.asp(告诉服务器我来自于哪里)
User-Agent: Mozilla/4.0(客户端版本号的名字)
Accept-Encoding: gzip, deflate(客户端能接收的压缩数据的类型)
If-Modified-Since: Tue, 11 Jul 2000 18:23:51 GMT(缓存时间) 
Cookie(客户端暂存服务端的信息)
Date: Tue, 11 Jul 2000 18:23:51 GMT(客户端请求服务端的时间)  
响应：
HTTP/1.1(响应采用的协议和版本号) 200(状态码) OK(描述信息)     
Location:http://www.baidu.com(服务端需要客户端访问的页面路径)      
Server:apache tomcat(服务端的Web服务端名)     
Content-Encoding:gzip(服务端能够发送压缩编码类型)      
Content-Length: 80(服务端发送的压缩数据的长度) 
Content-Language: zh-cn(服务端发送的语言类型)      
Content-Type:text/html; charset=GB2312(服务端发送的类型及采用的编码方式)     Last-Modified:Tue, 11 Jul 2000 18:23:51 GMT(服务端对该资源最后修改的时间)     Refresh:1;url=http://www.it315.org服务端要求客户端1秒钟后，刷新，然后访问指定的页面路径)    
Content-Disposition: attachment;filename=aaa.zip服务端要求客户端以下载文件的方式打开该文件)     Transfer-Encoding:chunked(分块传递数据到客户端）       
Set-Cookie:SS=Q0=5Lb_nQ;path=/search(服务端发送到客户端的暂存数据)     
Expires:-1//3种(服务端禁止客户端缓存页面数据)     
Cache-Control:no-cache(服务端禁止客户端缓存页面数据)       
Pragma: no-cache(服务端禁止客户端缓存页面数据) 
Connection: close(1.0)/(1.1)Keep-Alive(维护客户端和服务端的连接关系)  
Date: Tue, 11 Jul 2000 18:23:51 GMT(服务端响应客户端的时间)   
注：在服务器响应客户端的时候，带上Access-Control-Allow-Origin头信息，解决跨域的一种方法。
3、关于IE的window对象表述正确的有： ()
window.opener属性本身就是指向window对象
window.reload()方法可以用来刷新当前页面
window.location=”a.html”和window.location.href=”a.html”的作用都是把当前页面替换成a.html页面
定义了全局变量g；可以用window.g的方式来存取该变量
答案：D
解：window.opener实际上就是window.open打开的窗体的父窗体，不是window对象；
location.reload用来刷新页面；
4、以下代码执行后，array的结果是？
var array=[-1,1,3,4,6,10]; 
array.sort((a,b)=>Math.abs(a-3)-Math.abs(b-3));
[10,-1,6,1,4,3]
[10,6,4,3,1,-1]
[3,4,1,6,-1,10]
[-1,1,3,4,6,10]
答案：C
解：此处按照数组每一项减3的绝对值大小从小到大排；
原来数组项  [-1,1,3,4,6,10]
每一项减3后 [-4,-2,0,1,3,7]
取绝对值后  [4,2,0,1,3,7]
排序后      [0,1,2,3,4,7]
对应于原始数组即[3,4,1,6,-1,10]
5、编写 JavaScript 函数实现网页背景色选择器，下列选项中正确的是()
function change(color){
window.bgColor=color;
}
function change(color){
document.bgColor=color;
}
function change(color){
body.bgColor=color;
}
function change(color){
form.bgColor=color;
}
答案：B
6、void();
上面表达式的结果是：
undefined
TypeError
null
SyntaxError
答案：D
解：void 作为运算符后面接的是表达式，void expression。而void(0)也是被当做void 0。如果直接void()，就会报错。
7、图片懒加载技术会让图片进入视野之后延迟一小段时间才让用户看到图片，体验不好。如何改进？
答案：个人认为在条件允许的情况下可以预加载；或者设置一张静态图片在没有加载完全的情况下显示也是可以的。预加载降低了性能提高了用户体验；懒加载提高了性能降低了用户体验。所谓预加载，就是多张图片用一个src加载。
8、给String对象定义一个repeat方法，满足以下要求：
console.log(‘hello’.repeat(3)); //hellohellohello
答案：
String.prototype.repeat=function(num){
var str='';
var temp=this.slice();
for(var i=0;i<num;i++){
str+=temp;
}
return str;

 

}

或者ES6新增了repeat()方法；

9、写出以下代码执行后 console.log 打印出的结果，并解释原因
var obj={
desc:'obj A',
print:function(msg){
return [this.desc,msg].join('');
}
};
var desc='lame';
var func=obj.print;
console.log(obj.print('awesome'));
var b=obj;
b.desc='obj B';
console.log(obj.print('wierd'));
console.log(func.call());
答案：
obj Aawesome
obj Bwierd
啥也不输出
解：console.log(obj.print('awesome'))此处this指的是调用print方法的对象obj。故输出obj Aawesome；
var b=obj;此处定义了b指向了obj，是地址引用；所以b.desc='obj B';即obj.desc='obj B'，所以console.log(obj.print('wierd'));输出obj Bwierd。
var func=obj.print;相当于定义了
func=function(msg){
return [this.desc,msg].join('');
}

 

于是console.log(func.call());用call方法修改了其作用域，this指的是window，但this.desc为undefined，且没有传入实参，即msg为undefined。相当于[undefined,undefined].join('')，所以结果啥也不输出。

 

如果直接访问desc,则结果为lame！