前端面试题三

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；