前端面试常见手写题

实现一个new操作符

//实现一个new操作符
function myNew(fn,...args){if(typeof fn !== 'function') {throw ('fn is not a function')}//将对象的原型设置为fn的prototypelet res=Object.create(fn.prototype)//使用 apply 执行构造函数 并传入参数 arguments 获取函数的返回值let result=fn.apply(res,args)return result
}

实现instanceof

//实现instanceoffunction myInstanceof(left,right){//如果左边不是引用数据类型if(typeof left !== 'object' || left === null) return false//获取左边的原型let proto=Object.getPrototypeOf(left)while(true){//查找到底了if(proto==null) return false//相等if(proto==right.prototype) return true//顺着原型链继续查找proto=Object.getPrototypeOf(proto)}
}

实现浅拷贝

function shallowClone(obj){//如果是基础数据类型，直接返回if(typeof obj !== 'object' || obj==null) return obj//如果是引用数据类型，新开辟一个地址，拷贝一层let newObj=Array.isArray(obj) ? [] : {}for(let key in obj){newObj[key]=obj[key]}return newObj
}

实现深拷贝

function deepClone(obj){let cloneObj=Array.isArray(obj)?[]:{};//遍历其中的keyfor(let key in obj){if(typeof obj[key]==='object'){//递归cloneObj[key]=deepClone(obj[key]);}else{cloneObj[key]=obj[key];}}return cloneObj
}

实现call/apply

// 实现call/apply//挂载到 Function.prototype上
Function.prototype.myCall = function(val,...args) {//判断this指向，需要指向function//谁调用这个方法，this就指向谁if(typeof this !== 'function') {throw new TypeError('error')}   //获取程序执行上下文let context=val || window// 将当前函数绑定到 context 上context.fn = this;// 调用函数并获取结果const result = context.fn(...args);// 删除临时属性delete context.fn;return result;
}

实现防抖

// 防抖：n秒后执行事件，若n秒内再次触发，则重新计时function debounce(fn,delay){//设置定时器let timer = null;return function(){//如果还存在定时器，清除定时器后重新计时if(timer) clearTimeout(timer);timer=setTimeout(fn,delay)}
}

实现节流

// 实现节流：n秒内只允许一次，若n秒内反复触发，只有一次生效
function throttle(fn,delay){//设置开关，是否允许执行let valid=true;return function(){if(!valid) return;//一定延迟后执行setTimeout(()=>{fn();valid=true;},delay)}
}

实现promise

//自定义promiseclass MyPromise{//定义三种状态static PENDING = 'pending';static FULFILLED = 'fulfilled';static REJECTED = 'rejected';//定义构造函数constructor(fn){//默认等待状态this.status=MyPromise.PENDING;//默认结果this.result=nulltry{fn(this.resolve.bind(this),this.reject.bind(this))}catch(err){//捕获异常this.reject(err)}}//定义resolve方法resolve(result){if(this.status===MyPromise.PENDING){this.status=MyPromise.FULFILLEDthis.result=result}}//定义reject方法reject(result){if(this.status===MyPromise.PENDING){this.status=MyPromise.REJECTEDthis.result=result}}//定义then方法then(resolve,reject){//判断是否为空函数resolve=typeof resolve==='function'?resolve:()=>{}reject=typeof reject==='function'?reject:()=>{}//根据当前status返回不同结果if(this.status===MyPromise.FULFILLED){setTimeout(()=>{resolve(this.result)})}if(this.status===MyPromise.REJECTED){setTimeout(()=>{reject(this.result)})}}
}

实现函数柯里化

//实现函数柯里化
function curry(fn,args){var num=fn.lengthvar args=args||[];//返回方法return function(){//把参数放入数组var arr=[].slice.call(arguments);//将收集到的参数放入arr[].push.apply(arr,args)if(arr.length<num){//递归调用方法return curry.call(this,fn,arr)}return fn.apply(this,arr)}
}

实现无限级目录树

function renderMenu(menuItems,parentElement){//获取页面上的ul元素const ul=document.createElement("ul");//遍历menuItems数组，生成li元素menuItems.forEach(item=>{const li=document.createElement("li");li.textContent=item.name;if(item.children && item.children.length>0){renderMenu(item.children,li);}ul.appendChild(li);})if(parentElement){parentElement.appendChild(ul);}
}

实现快速排序

//实现快速排序function quickSort(arr){//递归中止条件if(arr.length<=1) return arr//定义基准值，可任取，这里取数组第一项let base=arr[0]//基准值左侧和右侧的数组let leftArr=[]let rightArr=[]//遍历数组，根据值的大小分别放入对应的数组for(let i=1;i<arr.length;i++){if(arr[i]<base) leftArr.push(arr[i])else rightArr.push(arr[i])}//合并数组let resArr=quickSort(leftArr).concat(base,quickSort(rightArr))return resArr
}