Skip to content

coconilu/front-end-interview-questions

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

31 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

前端面试笔试题集合

这个仓库收集了前端开发面试中常见的笔试题和编程挑战,包括 JavaScript 核心概念、数据结构、算法、异步编程等多个方面。每个示例都包含详细注释,帮助理解实现思路。

项目结构

.
├── algo/                      # 算法相关题目
│   ├── array/                 # 数组相关算法
│   │   ├── 1_two_sum.js                # 两数之和
│   │   ├── 11_container_with_most_water.js # 盛最多水的容器
│   │   ├── 15_3sum.js                  # 三数之和
│   │   ├── 53_maximum_subarray.js      # 最大子序和
│   │   └── 238_product_of_array_except_self.js # 除自身以外数组的乘积
│   │
│   ├── backtracking/          # 回溯算法
│   │   ├── 46_permutations.js          # 全排列
│   │   └── 78_subsets.js               # 子集
│   │
│   ├── bit-manipulation/      # 位运算
│   │   ├── 136_single_number.js        # 只出现一次的数字
│   │   └── 191_number_of_1_bits.js     # 位1的个数
│   │
│   ├── design-patterns/       # 设计模式
│   │   ├── 23_merge_k_sorted_lists.js  # 合并K个升序链表
│   │   └── 208_implement_trie_prefix_tree.js # 实现Trie(前缀树)
│   │
│   ├── dp/                    # 动态规划
│   │   ├── 5_longest_palindromic_substring.js # 最长回文子串
│   │   ├── 70_climbing_stairs.js       # 爬楼梯
│   │   ├── 121_best_time_to_buy_and_sell_stock.js # 买卖股票的最佳时机
│   │   ├── 322_coin_change.js          # 零钱兑换
│   │   ├── climbStairs.js              # 爬楼梯(详细解法)
│   │   ├── coinChange.js               # 零钱兑换(详细解法)
│   │   ├── editDistance.js             # 编辑距离
│   │   ├── fibonacci.js                # 斐波那契数列
│   │   ├── knapsack.js                 # 背包问题
│   │   ├── longestCommonSubsequence.js # 最长公共子序列
│   │   └── maxSubArray.js              # 最大子数组和(详细解法)
│   │
│   ├── graph-algorithms/      # 图算法
│   │   ├── 200_number_of_islands.js    # 岛屿数量
│   │   └── 207_course_schedule.js      # 课程表
│   │
│   ├── greedy/                # 贪心算法
│   │   ├── 55_jump_game.js             # 跳跃游戏
│   │   └── 56_merge_intervals.js       # 合并区间
│   │
│   ├── hash-table/            # 哈希表
│   │   ├── 3_longest_substring_without_repeating_characters.js # 无重复字符的最长子串
│   │   ├── 49_group_anagrams.js        # 字母异位词分组
│   │   └── 146_lru_cache.js            # LRU缓存机制
│   │
│   ├── linkList/              # 链表算法
│   │   ├── 21_merge_two_sorted_lists.js # 合并两个有序链表
│   │   ├── 141_linked_list_cycle.js    # 环形链表
│   │   ├── 206_reverse_linked_list.js  # 反转链表
│   │   ├── addTwoNumbers.js            # 两数相加
│   │   ├── detectCycle.js              # 环形链表II
│   │   ├── getIntersectionNode.js      # 相交链表
│   │   ├── hasCycle.js                 # 环形链表(详细解法)
│   │   ├── isPalindrome.js             # 回文链表
│   │   ├── mergeSortedLink.js          # 合并有序链表
│   │   ├── mergeTwoLists.js            # 合并两个有序链表(详细解法)
│   │   ├── removeNthFromEnd.js         # 删除链表的倒数第N个节点
│   │   ├── reorderList.js              # 重排链表
│   │   ├── reverseList.js              # 反转链表(详细解法)
│   │   └── sortList.js                 # 排序链表
│   │
│   ├── math/                  # 数学算法
│   │   ├── 50_powx_n.js                # Pow(x, n)
│   │   ├── 69_sqrtx.js                 # x的平方根
│   │   └── sieveOfEratosthenes.js      # 埃拉托斯特尼筛法
│   │
│   ├── searching/             # 搜索算法
│   │   ├── 33_search_in_rotated_sorted_array.js # 搜索旋转排序数组
│   │   ├── 704_binary_search.js        # 二分查找
│   │   ├── binarySearch.js             # 二分查找(详细解法)
│   │   └── dfs.js                      # 深度优先搜索
│   │
│   ├── sorting/               # 排序算法
│   │   ├── 912_sort_an_array.js        # 排序数组
│   │   ├── mergeSort.js                # 归并排序
│   │   └── quickSort.js                # 快速排序
│   │
│   ├── stack-and-queue/       # 栈和队列
│   │   ├── 20_valid_parentheses.js     # 有效的括号
│   │   └── 155_min_stack.js            # 最小栈
│   │
│   ├── string-algorithms/     # 字符串算法
│   │   ├── 5_longest_palindromic_substring.js # 最长回文子串
│   │   ├── 76_minimum_window_substring.js # 最小覆盖子串
│   │   └── kmp.js                      # KMP字符串匹配算法
│   │
│   └── tree/                  # 树相关算法
│       ├── 94_binary_tree_inorder_traversal.js # 二叉树的中序遍历
│       ├── 101_symmetric_tree.js       # 对称二叉树
│       ├── 104_maximum_depth_of_binary_tree.js # 二叉树的最大深度
│       ├── 226_invert_binary_tree.js   # 翻转二叉树
│       └── binaryTreeTraversal.js      # 二叉树遍历方法
│
├── coding-exercises/          # 编程题练习
│   ├── basics/                # 基础编程题
│   │   ├── fibonacci.js       # 斐波那契数列多种实现
│   │   ├── palindrome.js      # 回文判断
│   │   ├── prime.js           # 质数判断与生成
│   │   ├── factorial.js       # 阶乘计算
│   │   └── sorting.js         # 排序算法实现
│   ├── string/                # 字符串处理题
│   │   ├── reverse.js         # 字符串反转
│   │   ├── anagram.js         # 字母异位词
│   │   ├── compress.js        # 字符串压缩
│   │   └── wordcount.js       # 单词统计
│   ├── math/                  # 数学计算题
│   │   ├── calculator.js      # 计算器实现
│   │   ├── matrix.js          # 矩阵运算
│   │   ├── statistics.js      # 统计计算
│   │   └── geometry.js        # 几何计算
│   └── advanced/              # 高级编程题
│       ├── regex.js           # 正则表达式题
│       ├── parser.js          # 解析器实现
│       ├── scheduler.js       # 任务调度器
│       └── interpreter.js     # 简单解释器
│
├── array-operations/          # 数组操作相关题目
│   ├── flattenArray.js        # 数组扁平化实现
│   └── arrayDeduplication.js  # 数组去重方法
│
├── async/                     # 异步编程相关题目
│   ├── asyncAwait.js          # async/await使用示例
│   └── generatorAsync.js      # 使用Generator实现异步
│
├── data-structures/           # 数据结构实现
│   ├── LRUCache.js            # LRU缓存实现
│   ├── binarySearchTree.js    # 二叉搜索树实现
│   ├── graph.js               # 图的实现(邻接表和邻接矩阵)
│   ├── hashTable.js           # 哈希表实现
│   ├── heap.js                # 堆(最大堆/最小堆)实现
│   ├── linkedList.js          # 链表实现(单向和双向链表)
│   ├── queue.js               # 队列实现(基础队列、循环队列、双端队列)
│   ├── stack.js               # 栈数据结构实现
│   ├── trie.js                # 前缀树实现
│   └── unionFind.js           # 并查集实现
│
├── dom/                       # DOM操作和事件处理
│   ├── eventDelegation.js     # 事件委托实现
│   └── domTraversal.js        # DOM树遍历方法
│
├── css/                       # CSS和布局相关题目
│   ├── centerElement.html     # 元素居中的多种方法
│   ├── flexboxLayout.html     # Flexbox布局实现
│   ├── gridLayout.html        # CSS Grid布局特性、用法和示例
│   ├── cssAnimations.html     # CSS动画实现方式,包括transition、animation和transform
│   ├── cssSelector.html       # CSS选择器类型及优先级规则
│   ├── cssBFC.html            # CSS块级格式化上下文的概念、特性和应用场景
│   ├── responsiveDesign.html  # 响应式设计的核心技术和实现方法
│   ├── cssVariable.html       # CSS变量(自定义属性)的使用方法和应用场景
│   ├── cssPreprocessors.html  # Sass、Less和Stylus三种CSS预处理器的特点和语法
│   └── borderGradient.html    # 圆角边框渐变效果的实现方法
│
├── html/                      # HTML相关题目
│   ├── semanticHTML.html      # HTML5语义化标签使用
│   ├── formValidation.html    # 表单验证与处理
│   ├── accessibility.html     # 无障碍访问(a11y)实现
│   ├── htmlOptimization.html  # HTML性能优化技巧
│   └── webComponents.html     # Web Components实现
│
├── frameworks/                # 前端框架相关
│   ├── react/                 # React相关题目
│   │   ├── useHooks.js        # 自定义Hook实现
│   │   ├── virtualDOM.js      # 虚拟DOM实现原理
│   │   ├── hooksImplementation.js # React Hooks实现原理
│   │   ├── performanceOptimization.js # React性能优化
│   │   ├── stateManagement.js # React状态管理(Redux实现)
│   │   ├── contextImplementation.js # Context API实现
│   │   └── routerImplementation.js # React Router实现
│   └── vue/                   # Vue相关题目
│       ├── reactivity.js      # 响应式原理实现
│       ├── useDebounceRef.js  # 自定义防抖Ref实现
│       ├── vue2observer.js    # Vue2数组响应式原理实现
│       ├── vue3observer.js    # Vue3数组响应式原理实现
│       ├── vueLifecycle.js    # 生命周期钩子使用
│       ├── componentCommunication.js # 组件通信方式
│       ├── vueRouter.js       # Vue Router实现与应用
│       ├── vuex.js            # Vuex状态管理
│       ├── compositionAPI.js  # Composition API
│       ├── renderFunction.js  # 渲染函数与JSX
│       ├── virtualDOM.js      # 虚拟DOM结构与实现
│       └── diffAlgorithm.js   # Diff算法及最长递增子序列实现
│
├── performance/               # 前端性能优化
│   ├── lazyLoading.js         # 图片懒加载实现
│   └── debounceThrottle.js    # 防抖和节流函数
│
├── network/                   # 网络和HTTP相关
│   ├── httpCache.js           # HTTP缓存机制
│   └── ajaxImplementation.js  # 手写AJAX请求
│
├── browser/                   # 浏览器API和兼容性
│   ├── storageAPI.js          # 存储API使用比较
│   └── crossOrigin.js         # 跨域解决方案
│
├── security/                  # Web安全
│   ├── xssPrevent.js          # XSS攻击与防御
│   └── csrfProtection.js      # CSRF攻击与防御
│
├── engineering/               # 前端工程化
│   ├── webpackConfig.js       # Webpack配置示例
│   └── babelPlugin.js         # Babel插件开发
│
├── typescript/                # TypeScript相关
│   ├── genericTypes.ts        # 泛型使用示例
│   ├── inferTypes.ts          # 类型推断示例
│   ├── decorators.ts          # 装饰器模式实现
│   ├── advancedTypes.ts       # 高级类型实现
│   ├── typeGuards.ts          # 类型守卫实现
│   ├── conditionalTypes.ts    # 条件类型实现
│   ├── genericConstraints.ts  # 泛型约束实现
│   └── utilityTypes.ts        # 工具类型实现
│
├── mobile/                    # 移动端和响应式
│   ├── touchEvents.js         # 移动端触摸事件处理与手势识别
│   ├── responsiveDesign.html  # 响应式设计实现
│   ├── mobileOptimization.html # 移动端性能优化方法和技巧
│   ├── deviceAdaptation.html  # 移动端设备适配方案
│   └── hybridApp.html         # 混合应用开发基础知识和技术
│
├── miniprogram/               # 小程序开发相关题目
│   ├── wechat/                # 微信小程序
│   │   ├── lifecycle.js       # 小程序生命周期
│   │   ├── data-binding.js    # 数据绑定与事件处理
│   │   ├── components.js      # 自定义组件开发
│   │   ├── navigation.js      # 页面跳转与路由
│   │   ├── storage.js         # 本地存储与缓存
│   │   ├── network.js         # 网络请求处理
│   │   ├── authorization.js   # 用户授权与登录
│   │   └── performance.js     # 小程序性能优化
│   └── alipay/                # 支付宝小程序
│       ├── differences.js     # 与微信小程序的差异
│       └── payment.js         # 支付功能实现
│
├── js-core/                   # JavaScript核心概念
│   ├── function/              # 函数相关题目
│   │   ├── currying.js        # 函数柯里化实现
│   │   ├── bind.js            # 手写bind函数
│   │   ├── call.js            # 手写call函数
│   │   ├── apply.js           # 手写apply函数
│   │   └── once.js            # 只执行一次的函数
│   │
│   └── object/                # 对象相关题目
│       ├── deepClone.js       # 深拷贝实现
│       └── inheritance.js     # 继承模式实现
│
├── es6/                       # ES6+新特性相关题目
│   ├── arrowFunction.js       # 箭头函数特性与应用
│   ├── destructuring.js      # 解构赋值详解
│   ├── templateLiterals.js    # 模板字符串使用
│   ├── spread-rest.js         # 扩展运算符与剩余参数
│   ├── let-const.js          # let/const与var的区别
│   ├── class.js              # Class类与继承
│   ├── modules.js            # ES6模块系统
│   ├── symbol.js             # Symbol数据类型
│   ├── iterator.js           # 迭代器与for...of
│   ├── generator.js          # 生成器函数
│   ├── proxy-reflect.js      # Proxy与Reflect
│   ├── set-map.js            # Set与Map数据结构
│   └── async-features.js     # async/await与异步编程
│
├── promise/                   # Promise相关实现
│   ├── promiseAll.js          # 实现Promise.all
│   ├── promiseLimit.js        # 实现Promise并发限制
│   ├── promiseRace.js         # 实现Promise.race
│   └── promiseCancel.js       # Promise取消机制实现
│
├── utils/                     # 实用工具函数
│   ├── eventEmitter.js        # 事件发布订阅模式
│   └── deepEqual.js           # 对象深度比较
│
├── micro-frontend/            # 微前端架构
│   ├── moduleFederation.js    # Webpack Module Federation实现
│   ├── singleSpa.js           # Single-SPA框架使用
│   ├── qiankun.js             # qiankun微前端框架
│   └── microAppCommunication.js # 微应用间通信方案
│
├── ssr/                       # 服务端渲染
│   ├── nextjsSSR.js           # Next.js服务端渲染实现
│   └── nuxtSSR.js             # Nuxt.js服务端渲染实现
│
├── build-tools/               # 构建工具深入
│   ├── webpackAdvanced.js     # Webpack高级配置与优化
│   └── viteConfig.js          # Vite配置与优化
│
├── monitoring-debugging/      # 监控与调试
│   ├── performanceMonitoring.js # 前端性能监控实现
│   └── debuggingTools.js      # 调试工具与技巧
│
├── design-patterns-advanced/  # 设计模式进阶
│   ├── designPatterns.js      # 高级设计模式实现
│   ├── visitor_pattern.js     # 访问者模式:表达式计算器实现
│   ├── template_method.js     # 模板方法模式:数据处理流水线实现
│   ├── chain_of_responsibility.js # 责任链模式:HTTP请求处理链实现
│   ├── prototype_pattern.js   # 原型模式:可克隆图形系统实现
│   ├── memento_pattern.js     # 备忘录模式:文本编辑器撤销重做实现
│   └── demo.js                # 设计模式进阶演示:集成所有模式的示例
│
├── nodejs-backend/            # Node.js后端开发
│   └── nodeBasics.js          # Node.js基础与实践
│
├── testing/                   # 测试框架与实践
│   └── testingFrameworks.js   # 前端测试框架使用
│
├── low-code-visual/           # 低代码/可视化开发
│   └── lowCodePlatform.js     # 低代码平台实现
│
├── webassembly/               # WebAssembly
│   └── wasmBasics.js          # WebAssembly基础与应用
│
└── emerging-tech/             # 新兴技术与趋势
    └── emergingTechnologies.js # Web3、AI集成、边缘计算等新兴技术

使用方法

每个 JavaScript 文件都是独立的,包含了一个特定问题的解决方案。你可以直接查看源代码学习实现思路,或者在本地环境中运行测试。

学习资源

许可证

MIT

About

前端面试题

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors