前端面试常见手写题

实现一个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
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/879476.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C语言的结构体类型

在我们使用C语言进行编写代码时&#xff0c;常常会使用已经给定的类型来创建变量&#xff0c;比如int型&#xff0c;char型&#xff0c;double型等&#xff0c;而当我们想创建一些较为复杂的东西时&#xff0c;单单用一个类型变量是没办法做到的&#xff0c;比如我们想创建一个…

DPDK基础入门(十):虚拟化

I/O虚拟化 全虚拟化&#xff1a;宿主机截获客户机对I/O设备的访问请求&#xff0c;然后通过软件模拟真实的硬件。这种方式对客户机而言非常透明&#xff0c;无需考虑底层硬件的情况&#xff0c;不需要修改操作系统。 半虚拟化&#xff1a;通过前端驱动/后端驱动模拟实现I/O虚拟…

嵌入式鸿蒙系统开发语言与开发方法分析

大家好,今天主要给大家分享一下,HarmonyOS系统的主力开发语言ArkTS语言开发方法,它是基于TypeScript(简称TS)语言扩展而来。 第一:ArkTS语言基本特性 目的:声明式UI,让开发者以更简洁,更自然的方式开发高性能应用。 声明式 UI基本特性: 基本UI描述:ArkTS定义了各种装饰…

使用Ubuntu耳机输出正弦波信号

最近有一个项目想使用喇叭发出一个标准的正弦波测试信号&#xff0c;故记录下操作过程 sudo apt install libasound2-dev 否则有可能会报错&#xff1a; alsaaudio.c:28:10: fatal error: alsa/asoundlib.h: No such file or directory 安装pyalsaaudio&#xff1a; pip …

合肥鲸天科技的外卖会员卡系统有人做过吗?赚钱吗?

我们先来了解一下这个合肥鲸天科技&#xff0c;通过我在网上找到的资料和企业查询&#xff0c;这家公司还是很有实力的&#xff0c;合肥鲸天科技有限公司也是欢迎有合作的人到公司来进行一个考察和合作其他一些项目的。 外卖会员卡简介绍&#xff1a; 这个外卖会员卡&#xf…

Linux | 探索 Linux 信号机制:信号的产生和自定义捕捉

信号是 Linux 操作系统中非常重要的进程控制机制&#xff0c;用来异步通知进程发生某种事件。理解信号的产生、阻塞、递达、捕捉等概念&#xff0c;可以帮助开发者更好地编写健壮的应用程序&#xff0c;避免由于未处理的信号导致程序异常退出。本文将带你从基础概念开始&#x…

Redis Key的过期策略

Redis 的过期策略主要是指管理和删除那些设定了过期时间的键&#xff0c;以确保内存的有效使用和数据的及时清理。 具体来说&#xff0c;Redis 有三种主要的过期策略&#xff1a;定期删除&#xff08;Scheduled Deletion&#xff09;、惰性删除&#xff08;Lazy Deletion&#…

C#命令行参数解析库System.CommandLine介绍

命令行参数 平常在日常的开发过程中&#xff0c;会经常用到命令行工具。如cmd下的各种命令。 以下为sc命令执行后的截图&#xff0c;可以看到&#xff0c;由于没有输入任何附带参数&#xff0c;所以程序并未执行任何操作&#xff0c;只是输出了描述和用法。 系统在创建一个新…

【BFS专题】— 解决最短路问题

1、迷宫中离入口最近的出口 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 利用BFS层序遍历&#xff0c;新建一个变量统计步数代码&#xff1a; class Solution {int dx[] {0, 0, -1, 1};int dy[] {1, -1, 0, 0};public int nearestExit(char[][] maze, int[] en…

URP 线性空间 ui资源制作规范

前言&#xff1a; 关于颜色空间的介绍&#xff0c;可参阅 unity 文档 Color space URP实现了基于物理的渲染&#xff0c;为了保证光照计算的准确&#xff0c;需要使用线性空间&#xff1b; 使用线性空间会带来一个问题&#xff0c;ui资源在unity中进行透明度混合时&#xff…

Centos7 Hadoop 单机版安装教程(图文)

本章教程,主要记录如何在Centos7中安装Hadoop单机版。 一、软件安装包和基础环境 CentOS7.x,jdk8,hadoop 通过网盘分享的文件:Hadoop 链接: https://pan.baidu.com/s/1_qGI9QeXMAJNb3TydHhQGA?pwd=xnz4 提取码: xnz4 当然你也可以自己去官网下载。 java8:https://www.ora…

Redis:发布(pub)与订阅(sub)实战

前言 Redis发布订阅&#xff08;Pub/Sub&#xff09;是Redis提供的一种消息传递机制&#xff0c;它使用“发布者-订阅者”&#xff08;publisher-subscriber&#xff09;模式来处理消息传递。在这种模式下&#xff0c;发布者将消息发布到一组订阅者中&#xff0c;而无需关心谁…

java的内存分配和回收机制

Java 与 C之间有一堵由内存动态分配和垃圾收集技术所围成的高墙&#xff0c;墙外面的人想进去&#xff0c;墙里面的人却想出来。 概述 垃圾收集&#xff08;GC&#xff09;需要完成的三件事情&#xff1a; 哪些内存需要回收&#xff1f;什么时候回收&#xff1f;如何回收&am…

Linux操作系统入门(三)

_______________________________________________ 一.Linux操作系统的文件结构 相比于Windows操作系统的C,D,E等盘符&#xff0c;Linux操作系统仅有一个"/"符号的根目录. 这其中存在一个显著的不同&#xff0c;Linux操作系统使用的是斜杠"/",而Windows…

基于微信小程序的宠物之家的设计与实现

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、SSM项目源码 系统展示 基于微信小程序JavaSpringBootVueMySQL的宠物之家/宠物综合…

判断当前环境是否为docker容器下

判断当前环境是否为docker容器下 webshell后或登录到系统后台&#xff0c;判断是否为docker容器可使用如下方法&#xff1a; 方式一&#xff1a;使用ls -alh命令查看是否存在.dockerenv来判断是否在docker容器环境内 ls -alh /.dockerenv如下图无.dockerenv文件&#xff0c;所…

本地部署轻量级web开发框架Flask结合内网穿透公网环境访问管理界面

文章目录 1. 安装部署Flask2. 安装Cpolar内网穿透3. 配置Flask的web界面公网访问地址4. 公网远程访问Flask的web界面 本篇文章主要讲解如何在本地安装Flask&#xff0c;以及如何将其web界面发布到公网进行远程访问。 Flask是目前十分流行的web框架&#xff0c;采用Python编程语…

无人机飞手教员组装、调试高级教学详解

随着无人机技术的飞速发展&#xff0c;其在航拍、农业、救援、监测等多个领域的应用日益广泛&#xff0c;对专业无人机飞手的需求也随之增加。作为无人机飞手教员&#xff0c;掌握无人机的高级组装、调试技能不仅是教学的基础&#xff0c;更是培养学生成为行业精英的关键。本教…

【吊打面试官系列-Redis面试题】使用过 Redis 做异步队列么,你是怎么用的?

大家好&#xff0c;我是锋哥。今天分享关于【使用过 Redis 做异步队列么&#xff0c;你是怎么用的&#xff1f;】面试题&#xff0c;希望对大家有帮助&#xff1b; 使用过 Redis 做异步队列么&#xff0c;你是怎么用的&#xff1f; 一般使用 list 结构作为队列&#xff0c;rpus…

Word中插入当前日期与时间

Word中插入当前日期与时间 通过构建基块的方法快速插入当前日期与时间 快捷键操作 快捷键具体功能说明 Alt Shift D 插入当前日期date Alt Shift T 插如当前时间time Ctrl Shift F9 使得域文本变为正常文本 Ctrl F11 锁定域更新域菜单工具会变为黑色 C…