集锦大厂面试常考的 前端手写题和leetcode算法题
🏠 Homepage
CONTENT
前端手写题集锦 use js 记录大厂笔试，面试常考手写题，2022年前端面试中常见的 leetcode 算法题, 致力打造最全的前端JavaScript手写题题库和答案的最优解
题目来源：总结了牛客截止到2022年10月的所有大厂手写题[100%]，掘金部分出名的手写题文章，备战前端春招，秋招好友的总结好的题目(github), 就不一一列举链接啦，总之此项目题目来源于社区，答案也由社区讨论后merge，也完全服务于社区。
谢谢您的star，您的star是我更新的动力🥳
里面有答案，为了让你们有一个参考，不过非常希望你们能提供自己的思路，指出答案中存在的问题，复杂度优化等等， 期待你们的contribute, 想来一起维护这个项目，可以联系我，成为contributor
最后我把社区的好的答案汇总到一个目录下，答案专栏，方便刷题
前端 JavaScript 手写题
JavaScript HOT 100 题
中大厂面试，最常考的100个题，每一题都非常具有代表性，想要准备面试突击的同学，优先看这些题，祝在座的每一位都能拿到满意的offer
- 实现Promise.all
- JSON2DOM = react的render函数
- 树形结构转成列表
- 列表转成树形结构
- Array.prototype.flat
- instanceof
- call apply bind
- Array.prototype.map
- 正则表达式模版字符串
- lodash.get
- 深拷贝
- 寄生组合式继承
- 发布订阅者模式
实现 Promise （hot）
- 完整实现Promise A+
- 实现Promise.all
- 实现Promise.prototype.finally
- 实现Promise.allSettled
- 实现Promise.race
- 实现 Promise.prototype.catch
- Promise.resolve
- Promise.reject
Promise 周边场景题（hot）
- 交通灯
- 封装异步的fetch，使用async await方式来使用
- repeat(console.log, 5, 1000)
- 封装一个工具函数输入一个promiseA返回一个promiseB如果超过1s没返回则抛出异常如果正常则输出正确的值
- 请求5s未完成就终止
- 实现一个sleep函数
- js每隔一秒打印1,2,3,4,5
- 使用 setTimeout 实现 setInterval
- promise实现图片异步加载
- 使用Promise封装AJAX请求
- 我们能反过来使用 setinterval 模拟实现 settimeout 吗？
- 异步任务：依次发送3次网络请求，拿到服务器数据
- 实现网络请求超时判断，超过三秒视为超时
- promise中断请求
- 给定一系列的api，测量上传速度（实现的时候用的GET请求）并选择一个加载时间最短的api
- settimeout系统补偿时间
- setTimeout准时
- 请求五秒未完成则终止
- 并发多个请求，返回先得到response的。函数输入为url数组，输出为第一个返回的response的结果
- JS异步数据流，实现并发异步请求，结果顺序输出
- Promise串行
- 处理高并发, 100 条数据，带宽为 10， 跑满带宽
- 设计一个简单的任务队列, 要求分别在 1,3,4 秒后打印出 “1”, “2”, “3”；
- 实现有并行限制的 Promise 调度器
- 实现 Scheduler
- 有并发限制的Promise.all(ts类型)
- 实现 如果上一次的没请求完，之后的就无响应
- 使用 Promise 实现每隔三秒输出时间
- 使用 Promise 改写回调地狱
- 设计一个函数，该函数的参数为可同时发送请求的大小，返回一个函数，该函数的参数为要请求的url。 实现的效果为，同时发送n个请求，当有请求返回后往请求队列里push新的请求，并输出刚刚结束的请求的返回值
- Promise.retry 超时重新请求，并在重试一定次数依然失败时输出缓存内容
- 写一个 mySetInterVal(fn, a, b)，每次间隔 a,a+b,a+2b 的时间，然后写一个 myClear，停止上面的 mySetInterVal
JavaScript 常考手写题
- 产生一个不重复的随机数组
- await async 如何实现
- 使用递归完成 1 到 100 的累加
- 打印出 1~10000 以内的对称数
- 实现一个字符串匹配算法indexOf
- 请实现一个模块 math，支持链式调用math.add(2,4).minus(3).times(2);
- 手写用 ES6proxy 如何实现 arr[-1] 的访问（滴滴2020）
- 有一堆整数，请把他们分成三份，确保每一份和尽量相等（11，42，23，4，5，6 4 5 6 11 23 42 56 78 90）
- 之字形打印矩阵
- 数组中的最大值
- 尾递归（斐波那契数列
- 实现简单路由
- 封装一个localstorage的setItem和getItem方法
- 1-1000回文数
- 随机生成字符串
- 判断一个字符串是否为驼峰字符串， judge(‘ByteDance’,’BD’) -> true judge(‘Bytedance’,’BD’) -> false
- 压缩字符串
- Map场景题
- 输入50a6we8y20x 输出50个a，6个we，8个y，20个x
- 手写defineProperty
- String string 值一样返回true Object Object 返回true function function 都是声明的一个新的变量 返回false
- 对输入的字符串：去除其中的字符’b’；去除相邻的’a’和’c’
- 用一行代码，将数组中的字符串和字符串对象(new String(123))直接判定出来
- before
- 实现一下 console.log
- 实现(5).add(3).minus(2)功能
- 将十进制数字转为二进制数字字符串
- 封装remove child.remove()销毁自身
- 字符串中字母的出现次数
- 输出一个等腰三角形
- 实现一个函数a，使其奇数次调用时返回1，偶数次调用时返回2（不能使用全局变量）
- 求 最接近的值
- 不用循环求和
- 连续赋值操作
- 输入一串字符串，根据字符串求出每个字母的数量并返回结果对象。（数字为1时可省略
- 创建包含10个1的数组 多种方法
- [‘zm’, ‘za’, ‘b’, ‘lm’, ‘ln’, ‘k’]
- [“0->2”, “4->5”, “7”, “13”, “15->16”]
- [‘ab’, ‘c’, ‘ab’, ‘d’, ‘c’] => [‘ab1’, ‘c1’ ,’ab2’, ‘d’, ‘c2’]
- 移除空属性
- 判断两个对象是否相等
- 一个数组，找出每个数组元素右侧第一个比当前数大的数的下标，时间复杂度O(N)
- 寻找出现次数最多的三个标签
- 素数
- 实现日期格式化函数
- 实现 jsonp
- URL反转
- 解析 URL Params 为对象
- 调用计数器（支持重置）
- 颜色生成
- JavaScript怎么清空数组
- 判断A、B数组的包含关系（值和数量），A属于B返回1，B属于A返回2，两者相等返回0，其他返回-1
- 对象的合并
- 实现一个 无限延伸数组)
- 多行字符串转二维数组
- 请实现一个通用的Array解构赋值
- 数组合并
- 数组交集，并集，差集
- 多维数组全排列
- 判断对象是否存在循环引用
- 实现函数solution(arr, k)
- 逆对象扁平
- 对象扁平化
- 实现 执行一次的函数
- 链式调用
- 偏函数
- 实现管道函数
- 手写事件代理（委托）
- 数据类型判断
- 类数组转数组
- 预加载
- 图片懒加载
- 数组去重
- 防抖 节流
- 函数组合 compose redux-saga koa 洋葱模型
- sum(x,y)和sum(x)(y)
- curry柯里化
- 实现xxx时间之前的函数
- n个2的n次方之和
- 无限动画
- 瀑布流
- 匹配 “a*c”, “abcaacc”
- 一个字符串中是否出现某串字符,出现的话返回索引
- 实现一个属性选择器
- 字符串转数字
- 实现一个跨浏览器事件工具
- 12 调用计数器（支持重置）
- 实现内存函数缓存函数调用结果
- 返回给定七个扑克牌是否有同花顺，数据结构 [{num: 1, hua: ‘s’}, …]
- JS定义一个 log 方法
- 阿拉伯数字专汉字(偏难)
- 用代码实现把字符串转换成base64编码
- 设计LRU缓存结构
设计模式相关
树-场景题（hot）
- DOM2JSON
- JSON2DOM = react的render函数
- 计算目录树的深度
- 树形结构获取路径名
- 树形结构转成列表
- 列表转成树形结构
- 对象树遍历
- 获取树对象属性
- 查找json中的children路径
- 对象字符串转化成树形结构
- 判断有无符合路径和 -> 打印所有路径
- 获取树结构中的name：getName
实现 JS 原生方法
- Array.prototype.flat
- Array.prototype.forEach
- Array.prototype.map
- Array.prototype.filter
- Array.prototype.reduce
- Array.prototype.fill
- Array.prototype.includes
- Array.prototype.push
- Array.prototype.unshift
- Array.prototype.copy
- Array.prototype.getLevel
- 实现es6的set集合
- 实现es6的map集合
- String.prototype.zpadStart
- Object.assign
- Object.is
- JSON.stringify
- JSON.parse
- call apply bind
- instanceof
- trim
- 实现new
- String.prototype.repeat
- String.prototype.includes
JS 库函数实现
js utils
手写 nodejs 模块
正则相关
- 正则表达式模版字符串
- 正则判断手机号，qq，颜色，邮箱
- 字符串的大小写取反
- 检验字符串首尾是否含有数字
- 去除字符串空格
- 去除字符串中的字母
- 正则 驼峰转换
- 对象key的驼峰转下划线
- 判断字符串中是否存在连续的三个数
- ((2+3)+(3*4))+2—->[‘(2 + 3)+(3 * 4)’, ‘2 + 3’, ‘3 * 4’]
排序算法
实现自定义HOOK
- Hooks怎么封装手势逻辑
- Hooks实现移动端的滑动轮播插件
- 如何用 Hooks 模拟 componentDidMount 与componentWillUnmount
- 实现一个useBodyScrollLock ，当出现弹窗时 阻止背景滚动
- ts 实现 hooks: useInterval
- 实现 useQuery
- 实现useRequest
组件设计题（Vue/React/JS均可）
- 全选
- 轮播图
- 根据response渲染table
- 歌词滚动功能(hot)
- 实现一个 百度搜索框 （搜索提示）
- 实现todos
- 计时器或倒计时组件
- 设计一个公会入驻信息提交页
- 编码实现宽高不相同图片的自适配排列
- 列表子元素顺序反转
- 遍历树组件
- 选项卡
- 拖拽
HTML CSS 手写题
- 实现圆形环状进度条
- 等边三角形
- 实现 扇形
- 实现平行四边形
- 实现 九宫格
- 实现一个秒针绕一点转动的效果
- 实现一个 球 字节
- 圆弧旋转
- 使用div和css实现一个圆形，红色部分站60%，绿色40%
- 现在有一个进度条，进度条中间有一串文字，当我的进度条覆盖了文字之后，文字要去进度条反色，怎么实现？
- shadowDOM实现css隔离
- 两烂布局
- 宽高自适应正方形
- 1px问题
- 实现 筛子
- css3实现多行文字截断处理
- 三栏布局移动优先设计
- css 实现一个自适应搜索框
- css书卡布局
JS 实现基本数据结构
前端常考 leetcode 算法题
前端 HOT 100题
矩阵相关
数组
链表
二叉树
更新中
后续计划
- 做成OJ判题系统
- 区分题目难易程度
- 单元测试
- 正确答案集合merge
大家可以给仓库一些建议，本仓库资源来源于社区，也完全服务于社区
社区建议收集区：https://github.com/Sunny-117/js-challenges/discussions
Show your support
Give a ⭐️ if this project helped you!
📝 License
Copyright © 2022 sunny-117.
This project is MIT licensed.
This README was generated with ❤️ by readme-md-generator
