前端面试准备-day01

1 防抖函数及应用

防抖是指在一定时间内事件如果再次触发则重新计算时间
例如在搜索时，需要在输入框n秒后不再改变再去搜索内容

function debounce(fn,delay){
	let timer=null
	return function(value){
		clearTimeout(timer)
		timer=setTimeout(()=>{
			fn(value)
		},delay)
	}
}
function fn(value){
	console.log(value)
}
var debounceFunc=debounc(1000,fn)
input.addEventListener('keyup',function(e){
	debounceFunc(e.target.value)	
})

2 节流函数

节流是指一定时间内事件只执行一次

function throttle(fn,delay){
	let timer=null
	return function(value){
	if(!timer){
		timer=setTimeout(()=>{
			timer=null
			fn(value)
		},delay)
	}
	}
}
function fn(){
	console.log(1)
}

window.addEventListener('click',function(){
	throttle(fn,2000)
})

3 图片懒加载

懒加载的一种实现方式：

<img src='' data-src='https://image.baidu.com/search/detail?ct=503316480&z=undefined&tn=baiduimagedetail&ipn=d&word=baidu&step_word=&ie=utf-8&in=&cl=2&lm=-1&st=undefined&hd=undefined&latest=undefined&copyright=undefined&cs=2195752090,3623731009&os=3759523822,696313766&simid=2195752090,3623731009&pn=1&rn=1&di=7084067677328637953&ln=1745&fr=&fmq=1654686802038_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&is=0,0&istype=0&ist=&jit=&bdtype=0&spn=0&pi=0&gsm=0&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%253A%252F%252Fpic1.zhimg.com%252Fv2-6125bb539c57efde89cfc16ad0bdcba0_1440w.jpg%253Fsource%253D172ae18b%26refer%3Dhttp%253A%252F%252Fpic1.zhimg.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Dauto%3Fsec%3D1657278806%26t%3D0e897d4de7020813881e87df3d8c047d&rpstart=0&rpnum=0&adpicid=0&nojc=undefined&dyTabStr=MCwyLDMsMSw2LDUsNCw3LDgsOQ%3D%3D'>

当页面滚动到图片出现可视区域时，通过js取到该图片的data-src值赋值给srcimg.offsetTop<innerHeight+scrollY

4 登录验证

基于session的身份认证（缺点：信息存储在后端，会增加服务器负担）

• 客户端发送带有用户名密码的post请求，服务端进行验证，通过后生成一个sessionId，并存入cookie中返回给浏览器
• 客户端发送带有sessionId的cookie请求，检查sessionId是否正确或失效，如果匹配成功，将用户信息返回客户端

当服务器请求量变大，需要增加服务器配置，由于不同服务器的sessionId不一样

基于token的身份认证

• 客户端发送带有用户名密码的post请求，服务端验证通过后生成token，将token存入cookie中返回客户端
• 客户端发送带有token的cookie请求，服务端对token进行解密

基于JWT的身份认证

• 客户端发送用户名和密码，服务端检查是否正确，匹配成功则返回加密的Token
• 客户端每次发送请求时都会在Header Authorization中带上Token，服务端对Token进行

5 预编译理解

1. 创建一个ao对象
2. 找形参和变量的声明，作为ao对象的属性名，值是undefined
3. 实参和形参相统一
4. 函数声明会覆盖变量声明

6 this的理解

function fn(){}

fn()相当于fn.call(window)

var a={
	say:function(){}
}
a.say() 相当于 a.say.call(a)

7 箭头函数中的this

箭头函数中的this继承自父执行上下文的this

8 将伪数组转化为数组

• […arr]
• Object.prototype.slice.call(arr)

9 手写call和apply

实战中使用call的场景：实现继承、判断数据类型、将伪数组转化为数组

Function.prototype.myCall=function(context){
	if(typeof this!=='function'){
		throw new Error('error')
	}
	context=context||window 
	
	var args=[...arguments].slice(1)
	context.fn=this
	var result =context.fn(...args)
	return result
}

Function.prototype.myapply=function(context){
	if(typeof this!=='function'){
		throw new Error('error')
	}
	context=context||window 
	context.fn=this
	if(arguments[1]){
		const result=context.fn(...arguments[1])
	}else{
		const result=context.fn()
	}
	delete context.fn
	return result
}

10 js的事件循环机制

事件循环是解决js单线程运行时浏览器不堵塞的机制，事件循环主要要理解同步任务、异步任务

同步任务直接进入主线程中依次执行，，异步任务不进入主线程，而进入任务队列中，异步任务分为微任务和宏任务，它们分别进入不同的事件表中并注册相应的回调函数，每当指定的事件完成，事件表会将这个函数移到事件队列中，当主线程为空时，会先检查微任务的事件队列，如果有则依次执行，如果没有，则继续检查宏任务的事件队列

11 块级格式化上下文（BFC）

它是一个独立的块级渲染区域，只有块级类型的盒子参与，该区域拥有一套渲染规则约束块级盒子的布局，且与区域外部无关

如何创建BFC？

1. 设置float且不为none
2. position存在且不为relative和static
3. display为inline-block或flex、inline-flex
4. overflow：hidden

作用：可以取消盒子margin塌陷、可以阻止元素被浮动元素覆盖

11 深拷贝与浅拷贝

（1）浅拷贝

• 需要创建一个新的对象
• 拷贝值，属性如果是一般数据类型，拷贝的是基本类型的值，属性是引用数据类型，拷贝的是内存的地址

function shallowClone(source){
	var newObj={}
	for(var i in source){
		if(source.hasOwnProperty(i)){
			newObj[i]=source[i]
		}	
	}
	return newObj
}

（2）深拷贝

function deepClone(source){
      //先判断数据类型是否为基本数据类型
      const isPrimitive=(value)=>{
        return /Number|String|Boolean|Function|Null|Undefined|Symbol/.test(Object.prototype.toString.call(source))
      }

      const checkType=(source)=>{
        return Object.prototype.toString.call(source)
      }

      let res=null
      //如果数据为基本数据类型
      if(isPrimitive(source)){
        res=source
      }else if(checkType(source)=='[object Date]'){
        res=new Date(source)
      }else if(checkType(source)=='[object RegExp]'){
        res=new RegExp(source)
      }else if(checkType(source)=='[object Set]'){
        //如果为set，还需要对每一项进行deepclone
        res=new Set()
        for(let v of source){
          res.add(deepClone(v))
        }
      }else if(checkType(source)=='[object Map]'){
        res=new Map()
        for(let [key,value] of source.entires()){
          res.set(key,deepClone(value))
        }
      }else if(checkType(source)=='[object Array]'){
        res=[]
        source.forEach((value,index) => {
          res[index]=value
        });
      }else if(checkType(source)=='[object Object]'){
        res={}
        Object.entires(source).forEach((key,value)=>{
          res[key]=deepClone(value)
        })
      }
    }