前端面试手撕题收集(自用)

2024-08-29 20:12

本文主要是介绍前端面试手撕题收集(自用),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

对象深拷贝

function deepClone(source, clonedMap = new Map()) {if (typeof source !== object || source === null) {return source;  // 如果是基本类型,直接返回值,不需要深拷贝}// 如果这个对象已经被拷贝过,则直接跳过if (cloneMap.has(source)) {return cloneMap.get(source);}	const target = Array.isArray(source) ? [] : {};clonedMap.set(source, target);for (const key in source) {if (typeof source[key] === object && source !== null ){target[key] = deepClone(source[key], clonedMap);} else {target[key] = source[key];}}return target;
}

Promise

Promise.all

function all(promises) {return new Promise((resolve, reject) => {let resolvedCount = 0; // 统计有多少个promise达到resolvedlet results = new Array(promises.length);promises.forEach((promise, index) => {// 如果promise执行成功,将resolve的值存储到resule中,如果失败,直接进catchPromise.resolve(promise).then((value) => {resolvedCount++;results[index] = value;if (resolvedCount == promises.length) {resolve(results);  // new Promise对象时带的参数}}).catch((error) => {reject(error);})})})
}

promise.race

function race(promises) {return newPromise((resolve, reject) => {// 遍历所有promise。最先执行结束的promise决定了Promise.race的结果promises.forEach((promise) => {Promise.resolve(promise).then((value) => {resolve(value);}).catch((error)=>{reject(error);})})})
}

数组扁平化

Array.prototype.customFlatten = function() { let flat = [];for (let item of this) {if (Array.isArray(item)) {flat = flat.concat(item.customFlatten());} else {flat.push(item);}}return flat;
}

函数柯里化

function curry(fn) {return function curried(...args) {if (args.length >= fn.length) { // 参数个数达到length,执行原函数return fn.apply(this, args);} else { // 如果参数没有达到length,返回新的函数return function (...args2) {return curried.apply(this, args.concat(args2));}}}
}

手写call

Function.prototype._call = function(obj, ...params) {const key = Symbol('key');obj[key] = this;const res = obj[key](...params);delete obj[key]return res;
}

手写bind

Function.prototype._bind = function(target, ...arguments1) {return (...arguments2) => {return this.call(target, ...arguments1, ...arguments2);}
}

这篇关于前端面试手撕题收集(自用)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1118775

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

字节面试 | 如何测试RocketMQ、RocketMQ?

字节面试:RocketMQ是怎么测试的呢? 答: 首先保证消息的消费正确、设计逆向用例,在验证消息内容为空等情况时的消费正确性; 推送大批量MQ,通过Admin控制台查看MQ消费的情况,是否出现消费假死、TPS是否正常等等问题。(上述都是临场发挥,但是RocketMQ真正的测试点,还真的需要探讨) 01 先了解RocketMQ 作为测试也是要简单了解RocketMQ。简单来说,就是一个分

秋招最新大模型算法面试,熬夜都要肝完它

💥大家在面试大模型LLM这个板块的时候,不知道面试完会不会复盘、总结,做笔记的习惯,这份大模型算法岗面试八股笔记也帮助不少人拿到过offer ✨对于面试大模型算法工程师会有一定的帮助,都附有完整答案,熬夜也要看完,祝大家一臂之力 这份《大模型算法工程师面试题》已经上传CSDN,还有完整版的大模型 AI 学习资料,朋友们如果需要可以微信扫描下方CSDN官方认证二维码免费领取【保证100%免费

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能

Vue3项目开发——新闻发布管理系统(六)

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后,系统就进入了首页。接下来,也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分,左侧为系统的菜单栏,右侧

【编程底层思考】垃圾收集机制,GC算法,垃圾收集器类型概述

Java的垃圾收集(Garbage Collection,GC)机制是Java语言的一大特色,它负责自动管理内存的回收,释放不再使用的对象所占用的内存。以下是对Java垃圾收集机制的详细介绍: 一、垃圾收集机制概述: 对象存活判断:垃圾收集器定期检查堆内存中的对象,判断哪些对象是“垃圾”,即不再被任何引用链直接或间接引用的对象。内存回收:将判断为垃圾的对象占用的内存进行回收,以便重新使用。