文章目录
1.说一下对cookie和Storage(localStorage和sessionStorage) 的认识和区别?
1、cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递,而sessionStorage和localStorage不会自动把数据发送给服务器,仅在本地保存。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下
2、存储大小限制也不同,cookie数据不能超过4K,同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据,如会话标识。sessionStorage和localStorage虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大
3、数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭之前有效;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie:只在设置的cookie过期时间之前有效,即使窗口关闭或浏览器关闭
4、作用域不同,sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localstorage在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的
5、web Storage支持事件通知机制,可以将数据更新的通知发送给监听者
6、web Storage的api接口使用更方便
2.用什么会导致内存泄漏?
内存泄漏是分配一块内存既不能使用又不能回收,直到应用程序结束。
1.Dom元素上添加的事件,如果dom元素清除掉,绑定的事件依然存在。会占用内存。这种情况,需要在清除时释放内存,
function div(){
let div=document.getElementsByTagName('div')[0];
return div.onclick=function(){
console.log('删除');
div.remove();//this.remove();
console.log('可不可以删除');
}
}
let divOn=div();
点击过一次之后,第一个div就删除了,闭包还是存在的,可以手动释放
divOn=null;
2.不严谨的销毁对象会导致内存泄漏
let a={b:{c:1}};
let d=a.b;
delete a.b;
console.log(d);
console.log(a);
输出是这样的
删除 a 是一个对象的引用,这个对象里保存了一个数字 1,删除 a.b 删除的是对象本身,对象本身改变,引用的值就会改变,然而并没有
3.如何解决页面内容加载缓慢的问题?
加载缓慢的原因:
1,http请求次数过多。减少http请求次数, 同样的请求尽可能一次完成,引入外部样式,合并js文件,合并css文件。
2.网页体量过大。不一次全部显示,先加载可视区,后面的逐渐加载。对非常大的文件进行压缩,到客户端再进行解压。
3.DOM操作次数过多,减少DOM操作次数,减少js代码 css代码的重复使用,css样式书写规范,减少回流重排和重绘。
4.GET和POST的区别?何时使用POST
get和post都是向服务器发送请求的一种方式。
get将添加的信息拼接到地址栏中,是明文传送,只支持ASCLL码,也就是字符串,可以在地址栏直接看到,安全度不高,get的请求速度快,页面后退时不产生影响。get请求的数据是可以缓存的。get请求的数据一般不超过2k-4k;
post通过body体发送请求,信息是不可见的,支持多种编码方式,安全度要高于get请求,post请求数据大小理论上来说不受限制。post请求时页面后退,会重新提交请求。post的请求是不会缓存的。
数据大的时候,用post请求。敏感信息用post请求。
5.ajax的实现
ajax发送get和post请求
readyStatus状态。
0 (未初始化) 对象已建立,但是尚未初始化(尚未调用open方法)
1 (初始化) 对象已建立,尚未调用send方法
2 (发送数据) send方法已调用,但是当前的状态及http头未知
3 (数据传送中) 已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误,
4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据
function ajax(a,b,data){
let ajax=new XMLHttpRequest();
ajax.open(a,b,true)//true表示是否异步
ajax.send();//get请求发送的是url地址,不用传参/post需要
ajax.onreadystatechange=function(){
if(ajax.readystate==4&&ajax.status==200){
return data(ajax.responseText);
}
}
}
ajax.readystate4;数据正在加载,
ajax.status200,数据加载完毕,
jquery的ajax`
$.ajax({
url:'http://',
method:'post'/'get',
data:{'发送的数据'},
success:(res)=>{
if(res){
console.log(res);
}
}
})
6.使用闭包实现一个方法,第一次调用返回1,第二次返回2,第三次3,以此类推。
count() //输出1
count() //输出2
count() //输出3
……
代码
function temp(){
let a=0;
return function(){
return a++;
}
}
let sum=temp();
console.log(sum());
console.log(sum());
console.log(sum());
console.log(sum());
console.log(sum());
效果
7.封装一个函数,参数是定时器的时间,.then执行回调函数。
期望:sleep (5000).then(() => console.log(‘我会在5秒后打印’))
如果回调这个函数,那么每隔5秒就会打印一次
function sleep(time){
return {then:function(f){
setTimeout(()=>{
f()
this.then(f);
},time);
}}
}
sleep(5000).then(()=>console.log('5秒钟后打印'));
函数返回对象,就可以通过函数调用。
效果
8.在数组上新增一个方法,实现复制。
期望:[1,2,3].copy() //输出 [1,2,3,1,2,3]
Array.prototype.copy=function(){
var arr=this.concat(this);
return arr;
}
console.log([1,2,3].copy())
效果
9.有一个数组,怎么去修改每一个值?
数组修改值,通过索引获取到值然后修改。
const arr=[1,2,3,4,5,6,7,8,9,10];
arr[0]='你好';
arr[1]=99;
arr.forEach((e,index)=>{
arr[index]='妙团团';
console.log(e,index);
})
console.log(arr);
10.watch的作用?为什么要用它?
watch监听一个对象的某个属性是否发生变化,如果发生变化立即执行回调函数。作用很广泛,用于监听数据的变化,,
<div id='app'>
<h1>{{number}}</h1>
<button v-on:click='add()'>加一</button>
</div>
<script>
const vw=new Vue({
el:'#app',
data:{
number:0,
},
methods:{
add:function(){
this.number++;
},
},
watch:{
number:{
deep:true,
handler:function(odl,news){
console.log(odl);
console.log(news);
},
},
}
})
11定时器,setInterval和setTimeout的区别。
都是全局api
setInterval ()无限调用定时器,用两参数,第一个参数,回调函数,第二个参数执行的间隔时间。
setTimeout()延时定时器,作用也是定时,不同的是,延时定时器,在间隔时间到了以后只执行一次。将延时定时器放在回调函数里,在定时器里调用这个函数,就可以实现和无下限调用定时器一样的效果。
setInterval(() => {
console.log('无限调用定时器');
}, 1000);
function time(){
setTimeout(()=>{
console.log('延时定时器')
time();
},1000);
}
time();
12,js的数组方法有哪些
js的数组方法
Array.
pop()数组末尾删除,返回被删除的元素
push()数组末尾添加,压入到数组中。参数是要添加的元素,返回新数组的长度;
unshift()数组开头添加,参数是要添加的元素
shift()数组开头删除,返回被删除的元素
sort()数组内容排序,是按编码排序
join()将数组以括号里填的方式转换成字符串
splice(a,b,c),,第一个参数,起始位置,第二个参数,要删除的个数,用于删除指定位置的元素,后的参数,是添加的元素`
var arr=[1,2,3];
arr.splice(0,0,5,6,7,8);
arr.splice(0,0,['年','月日']);
console.log(arr);
concat()数组合并 原数组不变,这种方法并不能达到去重的效果
var tr=['111',2,2,'w'];
var a=arr.concat(tr);
console.log(a);
slice() 数组截取,两个参数,第一个参数指定1索引,第二个参数,结束索引,截取不包含结束索引,返回新的数组,不修改原数组。
reverse() 数组反转,改变原数组。
indexOf() 括号中填要索引的元素,返回索引值,如果有没有该元素返回-1;