前端手写代码面试题:掌握核心技能,提升编程能力。通过实际编写代码,考察HTML、CSS、JavaScript等前端技术的熟练程度。涵盖常见算法、数据结构及框架应用,助力开发者深入理解前端开发精髓。适合准备面试、提升技能的开发者参考。
题目列表(共125道):
- 实现一个函数 myInstanceof(left, right),判断 left 是否是 right 的实例
- 实现一个函数 deepClone(obj),深拷贝一个对象
- 实现一个函数 flatten(arr),将多维数组扁平化为一维数组
- 实现一个函数 unique(arr),对数组进行去重
- 实现一个函数 debounce(fn, delay),对函数进行防抖处理
- 实现一个函数 throttle(fn, delay),对函数进行节流处理
- 实现一个函数 curry(fn),对函数进行柯里化
- 实现一个函数 compose(...fns),对函数进行组合
- 实现一个函数 pipe(...fns),对函数进行管道操作
- 实现一个函数 myBind(fn, context, ...args),模拟 Function.prototype.bind
- 实现一个函数 myCall(fn, context, ...args),模拟 Function.prototype.call
- 实现一个函数 myApply(fn, context, args),模拟 Function.prototype.apply
- 使用 reduce 实现 map 函数
- 使用 reduce 实现 filter 函数
- 使用 reduce 实现 some 函数
- 使用 reduce 实现 every 函数
- 实现一个函数 myNew(constructor, ...args),模拟 new 运算符
- 实现一个函数 myCreate(proto),模拟 Object.create
- 实现一个函数 myAssign(target, ...sources),模拟 Object.assign
- 实现一个简单的 Promise
- 实现一个 Promise.all
- 实现一个 Promise.race
- 实现一个 Promise.resolve
- 实现一个 Promise.reject
- 实现一个函数 promisify(fn),将一个基于回调的异步函数转换为 Promise 形式
- 实现一个函数 sleep(ms),暂停指定的时间
- 实现一个函数 retry(fn, times, delay),对异步操作进行重试
- 实现一个函数 chunk(arr, size),将数组按指定大小分割成多个块
- 实现一个函数 shuffle(arr),对数组进行洗牌
- 实现一个函数 sample(arr),从数组中随机取一个元素
- 实现一个函数 sampleSize(arr, n),从数组中随机取 n 个元素
- 实现一个函数 once(fn),确保函数只执行一次
- 实现一个函数 memoize(fn),对函数进行记忆化处理
- 实现一个函数 template(str, data),进行简单的模板渲染
- 实现一个函数 queryStringify(obj),将对象转换为查询字符串
- 实现一个函数 parseQueryString(str),将查询字符串解析为对象
- 实现一个函数 camelCase(str),将字符串转换为驼峰命名
- 实现一个函数 kebabCase(str),将字符串转换为短横线命名
- 实现一个函数 snakeCase(str),将字符串转换为下划线命名
- 实现一个函数 capitalize(str),将字符串首字母大写
- 实现一个函数 trim(str),去除字符串两端的空格
- 实现一个函数 formatNumber(num),格式化数字,每三位加一个逗号
- 实现一个函数 get(obj, path, defaultValue),根据路径获取对象属性值,如果属性不存在则返回默认值
- 实现一个函数 set(obj, path, value),根据路径设置对象属性值
- 实现一个函数 remove(obj, path),根据路径移除对象属性
- 实现一个函数 isEqual(a, b),判断两个值是否相等(考虑深层比较)
- 实现一个函数 clone(obj),浅拷贝一个对象
- 实现一个函数 merge(obj1, obj2),合并两个对象
- 实现一个函数 pick(obj, keys),从对象中选取指定属性
- 实现一个函数 omit(obj, keys),从对象中排除指定属性
- 实现一个简单的 EventEmitter 类
- 实现一个简单的虚拟 DOM (Virtual DOM) 算法
- 实现一个简单的双向数据绑定
- 实现一个简单的路由 (Router)
- 实现一个简单的状态管理 (类似 Vuex/Redux)
- 实现一个函数 createStore(reducer, initialState),创建一个 Redux store
- 实现一个函数 applyMiddleware(...middlewares),应用 Redux 中间件
- 编写一个函数,将一个给定的 DOM 节点渲染成 HTML 字符串
- 实现一个函数 render(vdom, container),将虚拟 DOM 渲染成真实 DOM
- 实现一个函数 mount(component, container),将组件挂载到指定的 DOM 节点上
- 实现一个函数 unmount(container),将组件从指定的 DOM 节点上卸载
- 实现一个函数 updateComponent(component, newProps),更新组件的 props
- 实现一个函数 diff(oldVNode, newVNode),比较两个虚拟 DOM 节点的差异
- 实现一个函数 patch(oldVNode, newVNode),将虚拟 DOM 的差异应用到真实 DOM 上
- 实现一个函数 find(selector),根据选择器查找 DOM 元素
- 实现一个函数 addClass(element, className),给 DOM 元素添加类名
- 实现一个函数 removeClass(element, className),从 DOM 元素移除类名
- 实现一个函数 hasClass(element, className),判断 DOM 元素是否包含指定的类名
- 实现一个函数 toggleClass(element, className),切换 DOM 元素的类名
- 实现一个函数 css(element, style),设置或获取 DOM 元素的样式
- 实现一个函数 on(element, event, handler),给 DOM 元素绑定事件
- 实现一个函数 off(element, event, handler),从 DOM 元素解绑事件
- 实现一个函数 trigger(element, event),触发 DOM 元素上的事件
- 实现一个函数 offset(element),获取 DOM 元素的偏移量
- 实现一个函数 scrollTop(element, value),获取或设置 DOM 元素的滚动条位置
- 实现一个函数 ajax(options),发送 AJAX 请求
- 实现一个函数 get(url, data),发送 GET 请求
- 实现一个函数 post(url, data),发送 POST 请求
- 实现一个函数 jsonp(url, callback),发送 JSONP 请求
- 实现一个函数 fetch(url, options),使用 Fetch API 发送请求
- 实现一个函数 loadImage(url),加载一张图片
- 实现一个函数 preloadImages(urls),预加载多张图片
- 实现一个函数 lazyload(images),实现图片懒加载
- 实现一个函数 瀑布流布局
- 实现一个函数 无限滚动加载
- 实现一个函数 拖拽排序
- 实现一个函数 双击编辑
- 实现一个简单的轮播图 (Carousel)
- 实现一个简单的模态框 (Modal)
- 实现一个简单的标签页 (Tabs)
- 实现一个简单的手风琴 (Accordion)
- 实现一个简单的进度条 (Progress Bar)
- 实现一个简单的日期选择器 (Date Picker)
- 实现一个简单的颜色选择器 (Color Picker)
- 实现一个简单的表格 (Table) 组件,支持排序、分页和过滤
- 实现一个简单的树形 (Tree) 组件,支持展开、折叠和选择
- 实现一个简单的表单 (Form) 组件,支持校验和提交
- 实现一个函数 validate(form),对表单进行校验
- 编写一个函数,判断一个字符串是否是回文字符串
- 编写一个函数,实现字符串反转
- 编写一个函数,找出字符串中出现次数最多的字符
- 编写一个函数,实现斐波那契数列
- 编写一个函数,实现快速排序
- 编写一个函数,实现归并排序
- 编写一个函数,实现二分查找
- 编写一个函数,实现冒泡排序
- 编写一个函数,实现插入排序
- 编写一个函数,实现选择排序
- 编写一个函数,实现一个简单的栈 (Stack)
- 编写一个函数,实现一个简单的队列 (Queue)
- 编写一个函数,实现一个简单的链表 (Linked List)
- 编写一个函数,实现一个简单的二叉树 (Binary Tree)
- 编写一个函数,实现二叉树的遍历(前序、中序、后序)
- 编写一个函数,实现一个简单的图 (Graph)
- 编写一个函数,实现图的遍历(广度优先搜索、深度优先搜索)
- 实现一个发布订阅模式 (PubSub)
- 实现一个观察者模式 (Observer)
- 实现一个单例模式 (Singleton)
- 实现一个工厂模式 (Factory)
- 实现一个抽象工厂模式 (Abstract Factory)
- 实现一个策略模式 (Strategy)
- 实现一个装饰器模式 (Decorator)
- 实现一个适配器模式 (Adapter)
- 实现一个代理模式 (Proxy)
- 实现一个迭代器模式 (Iterator)