Advertisement

前端JS手写编程题库,终于开源了 Github

阅读量:

前端手写题集锦 使用 JavaScript 收集 整理 大厂常见的 面试题目,并 力图 构建 涵盖全面且详尽 的 前端 JavaScript 编程 练习 集合 以及 标准 答案与 最佳 解决方案

特别注意!我们的仓库目前不支持任何算法类问题(例如像LeetCode这样的平台),我们仅提供JavaScript编程练习。后续也会考虑补充这些类型的问题。待进一步明确方案。

谢谢您的star,您的star是我更新的动力🥳

其中包含答案作为参考材料,请各位同学在学习过程中积极分享自己的思路,并指出现有不足之处以及建议进行复杂度优化。期待大家能够共同完善这个项目。如果有任何问题或建议,请随时与我联系。欢迎加入团队贡献!

为了让大家共同探讨最佳解决方案,并将其整合到项目中来为该项目贡献力量。其中有些解答存在不足之处,请参考我的解答仅供参考。如有更好的解决方案,请及时提交Pull Request

贡献此项目
提PR就行

https://github.com/Sunny-117/js-challenges

思考很久,用issue形式收集各种手写题,并让小伙伴们讨论题解

JavaScript HOT 100 题

在中大厂的面试中,通常会考察100道具有代表性的题目。每道题目都具有很强的参考价值。对于希望在短时间内高效备考的同学来说,这些题目是不可多得的学习资料。预祝每位同学都能成功获得理想的offer

遵循《Primise.all》协议

实现 Promise (hot)

完整实现Promise A+
实现Primise.all
实现Promise.prototype.finally
实现Promise.allSettled
实现Primise.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 常考手写题

生成一个无重复的随机数组序列

设计模式相关

观察者模式
发布订阅者模式

树-场景题(hot)

DOM转JSON
JavaScript对象格式转DOM使用React.render实现
获取树状结构层次深度
解析树形数据以获取路径名称
将层级数据转换为列表形式
将线性数据重构为层级结构
遍历基于对象的层级结构
解析节点属性以获取相关信息
在JavaScript中定位子节点路径
将字符串表示的层级数据转换为DOM模型
验证特定路径的存在并列出所有匹配项

实现 JS 原生方法

Array.prototype.flat 对应ES6中的数据扁平化操作
Array.prototype.forEach 对应ES6中的数据遍历接口
Array.prototype.map 对应ES6中的数组映射方法
Array.prototype.filter 对应ES6中的数组筛选功能
Array.prototype.reduce 对应ES6中的累加计算功能
Array.prototype.fill 对应数组填充特定值的操作
Array.prototype.includes 判断数组中是否存在指定元素
Array.prototype.push 向数组尾部添加元素
Array.prototype.unshift 将元素插入到数组头部
Array.prototype.copy 创建独立拷贝的功能
Array.prototype.getLevel 获取引用层级的方法
String.zpadStart 的字符串填充操作(中文排版场景)
Object.assign 实现对象赋值的方法
Object.is 检查两个对象是否为相同引用的对象的方法
JSON.stringify 将对象转义为JSON字符串的方法
JSON.parse 从JSON字符串解析出原始对象的方法
call/apply/bind 方法调用机制的相关描述
instanceof 检查是否为特定对象类型的判断方法
trim 删除字符串两端空白字符的功能描述
实现new 创建新对象或实例的方法说明(中文排版场景)
String.repeat 重复字符串指定次数的功能描述(中文排版场景)
String.includes 判断字符串中是否存在特定子串的方法描述(中文排版场景)
JS库函数实现 lodash 的相关函数(中文排版场景)
lodash.chunk 将可迭代对象划分为子序列的操作(中文排版场景)
js utils 提供多种便捷操作的 utilities 包(中文排版场景)
判断一个对象是否是 plain object 的 isPlainObject 方法(中文排版场景)
手写 Node.js 模块的开发实践指南(中文排版场景)
promisify 转换普通函数为 promise 钩子式的开发实践指南(中文排版场景)

正则相关

正则表达式模版字符串
正则判断手机号,qq,颜色,邮箱
字符串的大小写取反
检验字符串首尾是否含有数字
去除字符串空格
去除字符串中的字母
正则 驼峰转换
对象key的驼峰转下划线
判断字符串中是否存在连续的三个数
((2+3)+(3*4))+2---->[‘(2 + 3)+(3 * 4)’, ‘2 + 3’, ‘3 * 4’]

排序算法

气泡序列
锦标赛序列
分裂与合并序列
直接插入序列
归并顺序
基数顺序
计数顺序
Hill 顺序
桶装顺序法
堆式排列法

实现自定义HOOK

通过Hooks封装手势逻辑
利用Hooks构建移动端滑动轮播插件
探索如何使用hooks模拟cycled: 和 componentWillunmount
开发一个useBodyScrollLock组件,在弹窗出现时阻止背景滚动
借助ts框架构建hooks支持useInterval功能
创建一个基于hooks的数据查询接口
实施一个使用hooks的分页加载机制

组件设计题(Vue/React/JS均可)

全选功能(全局选中设置)

HTML CSS 手写题

实现圆形环状进度条
更新中 image

后续计划

搭建一个基于OJ平台的判题系统。
实现试题难度分类功能。
实施单元测试管理模块。
今天收到大量issue超限提醒……虽然有些无奈但尽快处理是当务之急……相信团队会及时跟进。

在这里插入图片描述

求个follow:https://github.com/Sunny-117

全部评论 (0)

还没有任何评论哟~