120道好程序员课前热身面试题

　　01、封装一个方法，要求把给定的任意的 IP 字符串，转化成 32 位的二进制字符串。

　　示例：ip2binary('192.168.72.204')，返回 ‘11000000101010000100100011001100’。

　　02、求出现次数最多的字符、出现了多少次。

　　示例：给出任意一个纯字母组成的字符串，如，。求其中出现最多的字符和次数。

　　03、封装冒泡排序算法 sortMe() 。

　　04、使用 Promise 封装 $.ajax，得到 request() 。

　　05、有哪些数组去重的方法？（至少3种）

　　06、封装一个可以用于深拷贝（深复制）的方法。

　　07、封装防抖函数。

　　08、封装节流函数。

　　09、详细描述 Vue 完整的生命周期过程。

　　10、谈一谈你对 MVC / MVP / MVVM 的理解。

　　11、运行下面代码，请依次写出控制台打印的顺序。

　　12、封装方法 arr2tree()，把下面数组转化成树结构。

　　13、观察下方示例代码中的输入与输出关系，封装 add() 方法。

　　14、封装函数 parseToMoney()，实现千位分隔符（保留三位小数）。

　　示例：parseToMoney(1087654.32123); // '1,087,654.321'

　　15、封装方法求任意两个 Number 数组的交集。

　　示例：输入 `num1 = [1, 2, 2, 1]`，`nums = [2, 2, 3]`，返回 `[2, 2]`。

　　16、手写 bind、call、apply 函数，并谈一谈它们的区别。

　　18、罗列 ES6 的新特性（至少10项）。

　　8、罗列 ES6 的新特性（至少10项）。

　　19、常用的 CSS 布局属性（方案）有哪些？

　　20、什么是跨域？什么是浏览器同源策略？有哪些常用的解决跨域方案？手动封装一个JSONP的跨域请求函数。

　　21、你知道的 Web 性能优化方案有哪些？

　　22、什么是严格模式？严格模式下，代码有哪些规范？

　　23、封装函数 flat() ，实现数组的扁平化。

　　说明：所谓扁平化，就是将一个嵌套多层的数组，转换为只有一层的数组。

　　24、求柱状图中面积最大的矩形。

　　说明：给定 n 个非负整数，用来表示柱状图中各个柱子的高度。每个柱子彼此相邻，且宽度为 1 。求在该柱状图中，能够勾勒出来的矩形的最大面积。以上是柱状图的示例，其中每个柱子的宽度为 1，给定的高度为 [2,1,5,6,2,3]举例：图中阴影部分为所能勾勒出的最大矩形面积 10

　　25、封装快速排序算法 quickSort()。

　　26、封装选择排序算法 selectionSort()。

　　27、封装插入排序算法 insertionSort()。

　　28、自定义实现一个 JS 事件系统。

　　29、描述浏览器输入URL到页面渲染的整个过程。

　　30、HTTP 和 HTTPS 有哪些区别？HTTP 报文由哪些部分组成？

　　31、求无重复字符的最长子串。

　　说明：给定一个字符串（由英文字母、数字、符号和空格组成），请你找出其中不含有重复字符的**最长子串**的长度。

　　示例：输入 s = "abcabcbb"，输出为 3 。因为无重复字符的最长子串是 "abc"，所以其长度为 3。

　　32、求两个矩形重叠面积的大小。

　　说明：在二维平面上，求四组坐标构成的两个矩形所重叠的面积大小。

　　示例：输入 [-3, 0, 3, 4, 0, -1, 9, 2] ，输出 6（即重叠的面积大小为 6），图解如下。

　　33、求两个非负数的最大公约数。

　　34、封装洗牌算法。

　　35、封装方法 判断两个元素是否相等。

　　36、使用 JS 数组实现先进先出队列。

　　说明：最多使用两个栈，实现**先进先出**队列，并支持以下操作：void push(int x) 将元素 x 推到队列的末尾int pop() 从队列的开头移除并返回这个元素int peek() 不改变队列，只返回队列开头的元素boolean empty() 如果队列为空返回 true ；否则返回 false。

　　37、原生封装 WebSocket。什么是服务端渲染？SSR、BSR各有什么优势和劣势？有哪些SEO策略？

　　38、原生封装 WebSocket。

　　39、原生封装图片上传方法。

　　40、谈一谈浏览器的缓存机制。

　　41、工厂模式（Factory Pattern）。

　　42、单例模式（Singleton Pattern）。

　　43、原型模式（Prototype Pattern）。

　　44、建造者模式（Builder Pattern）。

　　45、外观模式（Facade Pattern）。

　　46、享元模式（Flyweight Pattern）。

　　47、组合模式（Composite Pattern）。

　　48、适配器模式（Adapter Pattern）。

　　49、中介者模式（Mediator Pattern）。

　　50、观察者模式（Observer Pattern）。

　　51、Webpack 和 Gulp 的区别？

　　52、Webpack 常用的 loaders 和 plugins 有哪些？

　　53、手写数组的 reduce() 方法。

　　54、简述 Vue-Loader 的工作原理。

　　55、手动实现 instanceof 和 new 。

　　56、简述 Webpack 热更新的工作原理。

　　57、手写 Promise 类。

　　58、解释下述代码的运行机理。

　　59、手动封装浏览器嗅探方法。

　　60、给一个无序的数组，这个数组中包含 N 连续数字中的 N-1，已知上下边界，要求找到这个数组缺失的数字。

　　61、字节跳动三面之React面试（2021版）。什么是虚拟DOM？类组件和函数组件之间有什么区别？React中的refs作用是什么？在React中如何处理事件什么是受控组件？为什么不直接更新state状态？描述Flux与MVC？React context是什么？React Fiber是什么？

　　62、描述 Diff运算过程，如何比较两个虚拟DOM的差异？

　　63、伪代码封装 react-redux 库的 connect 函数。

　　64、从React 的角度，有哪些性能优化的策略。

　　65、有哪些定义React组件的方式（至少说出4种）？

　　66、React中组件间通信，有哪些办法?

　　67、谈一谈 React Hooks 的理解。什么Hooks？Hooks有什么用？常用的Hooks有哪些？自定义 useTitle 改变文档页面的 title封装 useReducer 使用 Redux状态管理工具使用上下文和自定义Hooks实现国际化 useLang你还用过哪些第三方开源的 Hooks？

　　68、React技术栈中，有哪些代码复用的技巧？

　　69、高阶组件有哪些应用场景？

　　70、React-Router-Dom 路由相关。路由的查询参数和动态路由，有什么区别？withRouter 有什么用？路由之代码分割的原理是什么？如何实现路由代码分割？常用的路由 Hooks 有哪些？路由如何实现鉴权验证？对比 vue-router 和 react-router-dom 在概念上有哪些异同？

　　71、什么是进程？什么是线程？

　　72、浅谈垃圾回收机制。

　　73、简述浏览器页面的生命周期阶段。

　　74、谈一谈对 Iterator遍历器的理解。

　　75、谈一谈对 Generator 函数的理解。

　　76、罗列 JavaScript 实现继承的方式（至少6种）

　　77、自定义 MyMap 类，实现 get/set/has/delete 等方法。

　　78、封装 MyStorage 类，实现如下三个方法。setItem(key, val, expire)，存储有时效的数据getItem(key)，获取key所对应的值setDayItem(key, val)，存储有时效的数据，每天24:00过期

　　79、DOM 事件级别。什么是DOM0级事件、DOM2级事件、DOM3级事件？它们分别有什么特点？DOM事件机制：事件流、事件捕获、事件冒泡、事件委托自定义DOM事件：如何给原生HTML元素自定义事件？

　　80、定义一个变量 a，要求 (a==1 && a==2) === true 。

　　81、自定义 Set、Map 结构。

　　82、自定义封装 链表结构。

　　83、自定义封装 树结构。

　　84、自定义封装 图结构。

　　85、简述微信小程序的登录流程和授权流程。

　　86、简述微信小程序的运行原理（宿主环境）。

　　87、简述微信小程序开发的特点、有哪些技术栈、分别有什么优势和缺陷。

　　88、使用小程序WebView组件的注意事项

　　89、罗列原生小程序中有哪些组件间通信方案。

　　90、微信小程序的性能优化方案（至少10个）。

　　91、常见的接口鉴权方案有哪些？对比它们之间的优势与劣势？

　　92、单点登录（SSO）的实现原理。

　　93、写一个自我介绍（不少于300字）。

　　94、如何高水平地介绍一个管理系统的项目？项目介绍（解决什么问题的、什么行业、开发团队是怎样的、前端多少人）技术栈（精确到各个技术的版本号）有哪些功能（权限管理、国际化、地图可视化、哪些图表、WebSocket、特殊需求、业务组件）难点（权限复杂、接口多、表单表格交互复杂、需求特殊）思考（工程架构的稳定性、权限路由的合理设计、状态管理、组件化形成文档、MD记录需求细节、代码规范与统一）

　　95、盘点一下管理系统中的权限设计方案，有哪些？（至少说三种）

　　96、如何介绍一个ToC 的Web产品（webapp、官网、小程序）？项目介绍（功能性、资讯类、营销类。。。，行业、几个人）技术栈：比较旧一点的技术、样式布局值得一说的东西：用户体验（健康性、兼容性、媒体查询与响应式、参与C端交互设计）；性能优化（图片优化、静态文件、首页服务渲染、代码层面）；SEO优化策略（参考QF官网）；CSS、JS、jQuery，非常考虑前端基本功。项目力：你在推动产品更好发展的方面做了哪些努力和付出？

　　97、常用的 git、npm、yarn、linux 命令有哪些？

　　98、如何优雅地介绍一个uniapp项目？项目介绍（什么行业的产品、解决什么问题？前端几个人？）技术栈（uniapp）做了哪些功能：支付？定位？分享？地图？用到了哪些组件和API。用到哪些功能：地理定位、地图距离计算、用户登录、下拉刷新、触底加载等。总结性地评价一下uniapp的特点和优势建设性评价一下 uniapp 的缺点（3个点左右）概括性表达一下自己的 uniapp 开发心得，工作态度和改善行动。

　　99、你常用的 RN 功能插件有哪些？第三方 UI 组件有哪些？

　　100、如何高水平地介绍一个 RN 项目？项目背景（什么行业、为什么选择RN、几个人、做了多久）有哪些功能，用到了哪些RN插件？（3~5条技术）评价：描述恶劣的开发环境，遇到哪些困难，最后是如何解决的。

　　101、常用的 App技术栈有哪些？（简述App开发历史）

　　102、公众号开发和H5开发有什么区别？公众号开发如何进行技术选型？如何在公众号中接入JSSDK？

　　103、React服务端渲染做过吗？用的是什么技术？

　　104、伪代码实现 render方法，生成虚拟 DOM。

　　105、Vue3.0的响应式原理（Proxy）

　　106、手写Vue-Router（ Vue.use() 、路由源码 ）

　　107、Vue3.0中有哪些新特性？和2.0对比有哪些差异和优势？

　　108、描述Election项目打包流程。

　　110、知道 webpack-chain 吗？你实践中用过哪些 API ？

　　111、当后端一次性丢给你10万条数据, 作为前端工程师的你,要怎么处理?

　　112、什么是TS？TS中新增了哪些新语法？常用的数据类型有哪些？tsconfig.json配置文件？声明文件有什么用（@types/*）？

　　113、你知道的常用数据库有哪些？分别有什么特点？在什么场景下使用？

　　114、用过哪些前端测试框架？Jest 用过吗？

　　115、谈一谈 Redux 的工作原理。如果让你手写一个 Redux，你的思路是？

　　116、谈一谈你对 React Fiber 的理解？Fiber底层的实现原理？

　　117、什么是对称加密？什么是非对称加密？什么是数字证书？什么是数字签名？

　　118、如何手写 Webpack Loaders 和 Webpack Plugins ？

　　119、前端大文件上传怎么实现？什么是断点续传、分片上传？

　　120、OSI 七层模型分别是哪些？TCP/IP 四层模型分别是哪些？