10个常考的前端手写题

1. 实现一个简单的 JavaScript 函数,用于判断一个对象是否为空:

判断对象是否为空的函数 这个函数通过遍历对象的所有属性来检查是否有任何实际定义的键。如果在循环中找到了一个键,则立即返回false,表示对象不为空。如果没有找到任何键,则在循环结束后返回true,表示对象为空。

function isEmptyObject(obj) {for (var key in obj) {if (obj.hasOwnProperty(key)) {return false;}}return true;
}

2. 手写数组去重:

数组去重 第一个实现是使用传统的方法,创建一个新的数组,并利用indexOf方法检查当前元素是否已存在于新数组中,不存在则添加进去。 第二个实现利用了ES6中的Set数据结构,它不允许重复值,所以可以直接将数组转换为Set再转回数组达到去重效果。

function unique(arr) {let res = [];for(let i = 0; i < arr.length; i++) {if(res.indexOf(arr[i]) === -1) {res.push(arr[i]);}}return res;
}
// 或者使用ES6的新特性Set
function uniqueES6(arr) {return [...new Set(arr)];
}

3. 实现bind函数:

实现bind函数 JavaScript中原生的bind函数可以创建一个新的函数,在调用时设置其this上下文并传递预设参数。这里的实现同样创建了一个新的函数,并在其内部调用了原函数,同时保证了this指向和传参的正确性。

Function.prototype.myBind = function(context, ...args) {const self = this;return function(...newArgs) {return self.apply(context, [...args, ...newArgs]);};
};

4. 实现数组的map方法:

实现map方法 Array.prototype.map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。这里我们模拟了这个行为,对原数组进行遍历,并将回调函数应用于每个元素,然后将结果推入新数组。

Array.prototype.myMap = function(callback, thisArg) {const newArray = [];for (let i = 0; i < this.length; i++) {newArray.push(callback.call(thisArg, this[i], i, this));}return newArray;
};

5. 实现简易版的深拷贝:

简易版深拷贝 实现了一个递归函数,用于复制给定对象的所有属性和嵌套对象。当遇到非对象或null类型的值时直接返回,否则创建一个新的对象并递归地复制原对象的所有属性。

function deepClone(obj) {if (typeof obj !== 'object' || obj === null) {return obj;}let cloneObj = Array.isArray(obj) ? [] : {};for(let key in obj) {if (obj.hasOwnProperty(key)) {cloneObj[key] = deepClone(obj[key]);}}return cloneObj;
}

6. 实现防抖函数(debounce):

防抖函数(debounce) 防抖函数用于限制某个函数在一定时间内只能执行一次。例如在窗口 resize 或输入框连续输入事件中,防止短时间内多次触发。这里的实现是在每次调用时清除上一次的延时任务,然后重新设置一个延时任务,只有在指定时间间隔内没有再次调用时,才会执行原函数。

function debounce(func, wait) {let timeout;return function(...args) {clearTimeout(timeout);timeout = setTimeout(() => {func.apply(this, args);}, wait);};
}

7. 实现节流函数(throttle):

节流函数(throttle) 节流函数确保在一定时间内,只允许函数执行一次。与防抖不同的是,节流保证了在持续触发的情况下,至少每隔一定时间会执行一次函数。这里的实现是在触发函数时记录上一次执行的时间,如果当前时间与上次执行时间差大于设定的时间间隔,则执行函数

function throttle(func, delay) {let prev = Date.now();return function(...args) {const now = Date.now();if (now - prev >= delay) {func.apply(this, args);prev = now;}};
}

8. 实现 Promise 的 then 方法:

实现Promise的then方法 Promise的then方法接受两个回调函数作为参数,分别处理成功和失败的情况。这里模拟Promise的状态机,根据Promise当前状态异步执行相应的回调函数,并处理回调返回的新Promise。

MyPromise.prototype.then = function(onFulfilled, onRejected) {let self = this;return new MyPromise((resolve, reject) => {if (self.status === 'fulfilled') {setTimeout(() => { // 异步执行try {let x = onFulfilled(self.value);resolvePromise(x, resolve, reject);} catch(e) {reject(e);}}, 0);} else if (self.status === 'rejected') {setTimeout(() => {try {let x = onRejected(self.reason);resolvePromise(x, resolve, reject);} catch(e) {reject(e);}}, 0);} else {self.onResolvedCallbacks.push(() => {setTimeout(() => {try {let x = onFulfilled(self.value);resolvePromise(x, resolve, reject);} catch(e) {reject(e);}}, 0);});self.onRejectedCallbacks.push(() => {setTimeout(() => {try {let x = onRejected(self.reason);resolvePromise(x, resolve, reject);} catch(e) {reject(e);}}, 0);});}});
};function resolvePromise(value, resolve, reject) {if (value instanceof MyPromise) {value.then(resolve, reject);} else {resolve(value);}
}

9. 实现简易版 Ajax 请求:

简易版Ajax请求 实现了一个基于XMLHttpRequest的简易Ajax请求函数,返回一个Promise对象。当请求完成且状态码正常时解析响应内容并resolve,否则reject。

function ajax(url, method, data) {return new Promise((resolve, reject) => {const xhr = new XMLHttpRequest();xhr.open(method, url, true);xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");xhr.onreadystatechange = function() {if (xhr.readyState === 4) {if (xhr.status >= 200 && xhr.status < 300) {resolve(JSON.parse(xhr.responseText));} else {reject(xhr.statusText);}}};xhr.onerror = function() {reject(xhr.statusText);};xhr.send(JSON.stringify(data));});
}

10. 实现一个简易版的事件委托:

实现事件委托 事件委托是一种优化事件处理的方式,通过监听父级元素的事件,然后通过事件对象判断触发事件的具体子元素,从而减少绑定事件的数量。在这个实现中,当父元素接收到事件时,会向上遍历事件传播链,查找是否匹配特定选择器的目标元素,如果匹配就执行处理器函数。

function delegateEvent(element, selector, eventType, handler) {element.addEventListener(eventType, function(event) {let target = event.target;while (target && target !== this) {if (target.matches(selector)) {handler.call(target, event);break;}target = target.parentNode;}});
}

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

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

相关文章

rust函数 stuct struct方法 关联函数

本文结合2个代码实例主要介绍了rust函数定义方法&#xff0c;struct结构体定义、struct方法及关联函数等相关基础知识。 代码1&#xff1a; main.rc #[derive(Debug)]//定义一个结构体 struct Ellipse {max_semi_axis: u32,min_semi_axis: u32, }fn main() {//椭圆&#xff0…

micro-app以UMD js链接方式引入使用

npm 下载好micro-zoe/micro-app后&#xff0c;找到index.umd.js&#xff1a; 新建一个测试html&#xff0c;引入并使用&#xff1a; 参考&#xff1a; 微组件实践 - 掘金

外汇110:外汇做空是什么意思?如何运作?一文读懂

外汇市场允许卖空&#xff0c;就像众多金融市场一样。但什么是卖空呢&#xff1f;如何外汇做空&#xff1f;在本文中&#xff0c;我们将讨论如何做空货币。什么是外汇做空&#xff1f; 外汇做空&#xff08;Short Selling&#xff09;是外汇市场上的一种投资方式。它指的是投资…

聊聊Java那些事

本系列文章简介&#xff1a; Java是一种广泛使用的高级编程语言&#xff0c;它是一种面向对象的语言&#xff0c;具有简单、可移植、安全和高性能等特点。Java在各个领域都有广泛的应用&#xff0c;包括企业级应用程序开发、移动应用程序开发、嵌入式系统开发等。本系列文章旨在…

深度学习系列58:大模型训练和压缩

1. 大模型训练 1.1数据并行 1.2 模型并行 1.3 ZeRO 1.4 流水线并行 1.5 混合精度训练 1.6 offloading 把梯度放在cpu上保存和计算 1.7 overlapping 提前传输数据 1.8 checkpointing 中间线性层不保存&#xff0c;反向传播时再次重新计算 1.9 使用BMtrain 2. 大模型压…

蝶阀、球阀、阀门百科

一、D71X是蝶阀的型号其中D 就代表了蝶阀,7 代表是对夹式链接,1代表这个蝶阀是中线结构,x就是密封面材质为橡胶。结合起来D71X表示的就是手柄对夹中线蝶阀。 二、J41H-100C型号字母含义介绍 J41H-100C型号是德特森阀门常用的高压截止阀型号字母代表的意思是: J——代表阀门类…

windows下Oracle 11g的安装和配置教程的详细步骤

#### 1、下载Oracle软件 访问Oracle官方网站或者Oracle下载中心。在下载页面中找到适用于您操作系统的Oracle 11g软件。根据您的需求选择合适的版本&#xff0c;如“Oracle Database 11g Release 2 Express Edition for Windows x64”。点击下载并接受相关许可协议。 2、安装…

MCU中断控制

目录 一、中断相关基础知识 1、NVIC&#xff1a;嵌套向量中断控制器 2、可屏蔽中断和不可屏蔽中断的区别 3、中断优先级 4、常见特殊中断 二、中断相关寄存器 三、中断使用步骤&#xff1a; 一、中断相关基础知识 1、NVIC&#xff1a;嵌套向量中断控制器 (1) 它是内核的…

LVS/DR配置

实验环境: servera作为lvs服务器 serverc&#xff0c;serverd作为web服务器 一.配置serverc,serverd 对两台服务器做相同配置: 1.安装nginx服务:yum install nginx -y2.切换到nginx根目录cd /usr/share/nginx/html/3.将原来的index.html备份mv index.html index.html.bak4.输出…

Windows Server 2012 评估版和Windows Server 2019 评估版 升级为正式版(工作v笔记v分享)

Windows Server 2012 评估版和Windows Server 2019 评估版是微软提供的试用版本&#xff0c;可以免费下载和使用一段时间。当使用评估版时&#xff0c;可以在适当的时候将其升级为正式版&#xff0c;以便继续使用并享受完整的功能。 要将评估版升级为正式版&#xff0c;可以按…

基于ArcGIS Pro SDK的MVVM架构

示例结果展示 文件夹创建 相对于原始C#&#xff0c;少了Command文件夹里的类。该文件中的RelayCommand使用 ArcGIS.Desktop.Framework Properties属性配置&#xff0c;主要用于设置执行程序路径&#xff08;自带文件夹&#xff09; DarkImages用于存放深色图片&#xff08;自…

Rust 学习笔记 - 流程控制 与 Range 类型

前言 任何一门编程语言几乎都脱离不了&#xff1a;变量、基本类型、函数、注释、循环、条件判断&#xff0c;这是一门编程语言的语法基础&#xff0c;只有当掌握这些基础语法及概念才能更好的学习 Rust。 条件判断 if 表达式 if 语句在其他语言中很常见&#xff0c;这里不再…

面试经典150题【1-10】

文章目录 面试经典150题【1-10】88. 合并两个有序数组27.移除元素26.删除有序数组中的重复项80.删除有序数组中的重复项II169.多数元素189.轮转数组121.买卖股票的最佳时机1122. 买卖股票的最佳时机 II55.跳跃游戏![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/ff…

nvm安装配置环境

前言 对于前端开发人员来说&#xff0c;多个项目可能用的不同的node版本&#xff0c;如何方便快速的转换版本&#xff0c;nvm版本管理工具的出现&#xff0c;解决这个问题。 实战 1. 搜索nvm版本&#xff0c;我用的1.1.2&#xff0c;下载后直接安装。 2.在d盘建立nvm空文件…

uniapp H5唤起手机App 中间下载页

我这里直接是打开中间下载页&#xff0c;在下载页判断手机是否已存在App&#xff0c;有则唤起App&#xff0c;没有则可点击下载按钮下载app。 唤起App的关键语句是&#xff1a;window.location.href scheme Scheme链接格式样式&#xff1a; [scheme]://[host]/[path]?[que…

蓝桥杯:C++队列、优先队列、链表

C普通队列 算法竞赛中一般用静态数组来模拟队列&#xff0c;或者使用STL queue。使用C的STL queue时&#xff0c;由于不用自己管理队列&#xff0c;因此代码很简洁。队列的部分操作如下。 C优先队列 很多算法需要用到一种特殊的队列&#xff1a;优先队列。它的特点是最优数据…

Android下SF合成流程重学习之onMessageInvalidate

Android下SF合成流程重学习之onMessageInvalidate 引言 虽然看了很多关于Android Graphics图形栈的文章和博客&#xff0c;但是都没有形成自己的知识点。每次学习了&#xff0c;仅仅是学习了而已&#xff0c;没有形成自己的知识体系&#xff0c;这次趁着有时间&#xff0c;这次…

pyhton在办公方面的应用

好久没发文了&#xff0c;转眼已经2024年了&#xff0c;我的电脑已经八岁了&#xff0c;近来状况频发&#xff0c;为防止它哪天突然嘎嘣&#xff0c;我多年搜集的资料付诸东流&#xff0c;故决定把资料备份一下这些代码有的是原创&#xff0c;有的是借鉴了其他博主的文章&#…

Python算法100例-1.7 最佳存款方案

完整源代码项目地址&#xff0c;关注博主私信’源代码’后可获取 1.问题描述2.问题分析3.算法设计4.完整的程序 1&#xff0e;问题描述 假设银行一年整存零取的月息为0.63%。现在某人手中有一笔钱&#xff0c;他打算在今后5年中的每年年底取出1000元&#xff0c;到第5年时刚…

民安智库如何做新品上市满意度调研

新品上市满意度调研是一种重要的市场研究方法&#xff0c;它通过收集和分析消费者对新产品的态度、购买意愿和满意度等方面的数据&#xff0c;帮助企业了解消费者的需求和期望&#xff0c;发现新产品的问题和不足&#xff0c;从而为产品改进提供有力的数据支持。下面将详细介绍…