大家好，我是山月。最近很多我的公众号粉丝都在准备秋招的面试，前来咨询山月的同学络绎不绝。经常出现的一个问题是：我如何练习编程题？山月再次总结了一条关于手写代码的实践路线。以下所有手写代码都贴在我的codepen里，有兴趣的同学可以关注我codepen。准备API作为一个工作三年多的老前端，他会明白一件事：API设计比实现更重要。为什么？比如compose函数，在各种中间件设计中常用，比如redux等等。redux功能的实现极其简单，一行就可以，但是第一个想到compose就更难了。所以前端面试中很多面试题主要是基于ESAPI和lodashAPI的模拟实现，所以在手写代码之前需要熟悉lodash和ES6+文档。代码规范在面试过程中检查代码。除了考察应聘者的逻辑能力，其次可以考察应聘者的代码能力，比如是否有一致的代码规范，是否有清晰易读的变量命名，是否有更简洁的代码用于能力开发优雅的代码，您可以查看适用于JavaScript的CleanCode概念。它在Github上有50+K星。例如关于命名优化//BAD//86400000到底是什么？setTimeout(blastOff,86400000);//GOOD//将它们声明为大写的命名常量.constMILLISECONDS_PER_DAY=60*60*24*1000;//86400000;setTimeout(blastOff,MILLISECONDS_PER_DAY);手写代码路线图以下是我在多次大厂面试中总结的代码题。我会根据难易程度和模块属性将它们归纳为不同的部分。备注：山岳收集的所有大厂采访请点这里。山月总结的所有大厂访谈，请点这里。因此，我把题目分为以下几类，大家可以按照我列出星数和所有代码题的顺序。做好准备，每天找三道coding题，坚持下去。三个月后，面试大厂coding阶段就没有问题了。ESAPIlodashAPI编程逻辑题算法与数据结构（leetcode）下面的题都可以在山岳的仓库里找到，大部分代码题都可以在codepen上找到，找我的解test直接执行。01ESAPI很多大厂面试题都执着于原生API的模拟实现。虽然大部分时候并没有什么好处，但是有时候可以进一步加深对API的理解。例如，当您手写最终的Promise.all时，编写并发控制的Promise会更加得心应手。bind/call/apply???????实现call/apply实现bind实现softBind高频问题，中频实现。Function.prototype.fakeBind=function(obj,...args){return(...rest)=>this.call(obj,...args,...rest)}睡眠/延迟?????标题：[Q435]如何在JS中实现睡眠/延迟功能代码：[Q435]如何在JS中实现睡眠/延迟功能睡眠功能不仅是面试中经常被问到的代码问题，也是常用的工具在日常工作中，尤其是在测试功能方面。constsleep=(seconds)=>newPromise(resolve=>setTimeout(resolve,seconds))函数延迟(func,seconds,...args){returnnewPromise((resolve,reject)=>{setTimeout(()=>{Promise.resolve(func(...args)).then(resolve)},seconds)})}Promise.all??????????代码：Promise.all标题：Promise.all乍一看很简单，但实施有时并不容易。functionpAll(_promises){returnnewPromise((resolve,reject)=>{//Iterable=>Arrayconstpromises=Array.from(_promises)//结果保存在一个数组中constr=[]constlen=promises.lengthletcount=0for(leti=0;i{//因为promises是异步的，保持数组一一对应r[i]=o;//如果数组中的所有promises都实现了，返回结果数组if(++count===len){resolve(r)}//发生异常时，直接reject}).catch(e=>reject(e))}})}Array.isArray??????????题目：Array.isArray面试中经常被问到，但这很简单。Array.prototype.flat??????????题目：【Q443】实现一个数组展平函数flatten代码：【Q443】实现一个数组展平函数flattenreduce和concat是绝配函数flatten(list,depth=1){if(depth===0)返回列表返回列表。reduce((a,b)=>a.concat(Array.isArray(b)?flatten(b,depth-1):b),[])}Promise????????标题：PromiseArray.prototype.reduce??????代码：Array.prototype.reduce题目：Array.prototype.reduce这个题目看似简单，其实有很多边界问题需要注意，比如回调函数中第一个Index是什么？如何将数组作为稀疏数组处理？String.prototype.trim??????题目：如何去除字符串首尾的空白字符。一般API02lodashAPIthrottle/debounce??????Title:什么是防抖和节流，它们的应用场景性能优化中减少渲染的必要手段有哪些，代码也足够简单，经常被面试题中提到。cloneDeep??????题目：【Q202】如何实现深拷贝（cloneDeep）深拷贝，无论是工作中的性能优化，还是面试中，都非常流行。使用JSON序列化和反序列化并不能解决复制一些复杂对象的问题。难点在于处理不同的数据类型。isEqual?????题目：【Q598】如何实现一个深度比较函数deepEqual深度比较在性能优化中也很常用，难度比cloneDeep低。get??????????Title:Howtoimplementafunctionsimilartolodash.get代码：Howtoimplementafunctionsimilartolodash.getinES6+,usingtheoptionalchainoperator?.可以进一步降低实现难度functionget(source,path,defaultValue=undefined){//a[3].b->a.3.b->[a,3,b]constpaths=path.replace(/\[(\w+)\]/g,'.$1').replace(/\["(\w+)"\]/g,'.$1').replace(/\['(\w+)'\]/g,'.$1').split('.')letresult=sourcefor(constpofpaths){result=result?.[p]}returnresult===undefined？defaultValue:result}compose(flowRight)??????????题目：【Q181】如何实现compose函数并进行函数组合constcompose=(...fns)=>//注意f和g的位置，如果从左到右执行计算，则替换顺序为fns.reduce((f,g)=>(...args)=>f(g(...args)))shuffle??????????Title:[Q447]如何实现一个数组洗牌函数shuffle相关：[Q645]随机生成一个六位手机验证码（可重复/不可重复）码：[Q447]如何实现一个数组洗牌函数shuffle可能极其简单实现一个简单的洗牌。constshuffle=(list)=>list.sort((x,y)=>Math.random()-0.5)Shuffle在生产实践中很多场景都会用到，比如随机生成不重复的六位数手机验证码代码示例??????????题目：【Q436】如何实现一个示例函数，从数组中随机选择一个元素Math.random()函数返回一个浮点数，伪随机数范围从0到小于1，并且数学表示为[0,1),你可以用它来实现示例函数Array.prototype.sample=function(){returnthis[Math.floor(Math.random()*this.length)]}sampleSize??????????题目：【Q677】如何实现一个sampleSize函数，从数组中随机选取N个元素maxBy?????题目：【Q628】实现一个函数maxBy，根据给定的值找到最大的数组项keyBy条件????题目：[Q678]】实现一个函数keyBygroupeBy????题目：[Q679]实现一个函数groupBychunk????????题目：[Q643]如何实现chunk函数和分组数组函数chunk(列表，大小）{constl=[]for(leti=0;我<列表长度；i++){constindex=Math.floor(i/size)l[index]??=[];l[index].push(list[i])}returnl}chunk????????题目：【Q399】实现一个once函数，记住返回结果，只执行一次constf=x=>xconstonceF=once(f)//=>3onceF(3)//=>3onceF(4)template????????题目：【Q660】实现一个render/template函数，可以用来渲染模板代码：【Q660】实现一个render/可用于的模板函数渲染模板是一个稍微难一点的编程话题consttemplate='{{user["name"]}}，今天你又学了吗-UserID:{{user.id}}';constdata={user:{id:10086,name:'山月',}};//=>"山月，你今天又学习了吗-用户ID:10086"render(template,data);注意：注意深度嵌套数据，注意用户['name']属性pickBy/omitBy????camelCase?????Title:CamelCase命名差异??????Title:[Q655]实现交集，取数组交集03Programminglogicquestions关于编程逻辑题，参考作品一些数据处理我经常遇到FizzBu??zz，它能被3整除还是能被5整除??????????题目：FizzBu??zz，能被3整除还是能被5整除？输入一个整数，如果能被3整除，则输出Fizz，如果能被5整除，则输出Buzz，如果能同时被3和5整除，则输出FizzBu??zz//=>'fizz'fizzbuzz(3)//=>'buzz'fizzbuzz(5)//=>'fizzbuzz'fizzbuzz(15)//=>7fizzbuzz(7)这道题虽然很简单，但是面试的时候大部分人还是答不上来。实现Promise.map控制并发数??????????题目：Promise.map代码：Promise.map用于Promise并发控制，面试中经常问到，工作中也经常用到。在开始处理这个问题之前，了解一下[Promise.all]()的实现，对实现并发控制会有很大的帮助。此外，最流行的Promise库bluebird实现了Promise.map，在项目中被广泛使用。异步sum/add??????????编码题大师，从头条开始，承诺串行，并行，二分，并发控制，层层递进。题目：[Q644]如何使用JS实现异步求和/加法实现发布订阅模式??????????题目：[Q613]如何使用JS实现发布订阅模式代码：[Q613]如何实现用JS实现一个发布-订阅模式如何实现无限累加求和功能??????????标题：[Q421]如何实现一个无限累加的功能代码：[Q421]如何实现一个无限累加的功能求和函数的实现如下：sum(1,2,3).valueOf()//6sum(2,3)(2).valueOf()//7sum(1)(2)(3)(4.valueOf()//10sum(2)(4,1)(2).valueOf()//9sum(1)(2)(3)(4)(5)(6).valueOf()//21统计数组中最大数/第二大数??????????题目：统计数组中最大/第二大数代码：统计数组中最大/第二大数统计字符串中出现次数最多的字符??????????题目：【Q644】统计字符串中出现次数最多的字符及其频率编码：【Q644】统计字符串中出现次数最多的字符及其编码压缩次数数字??????????题目：【Q412】压缩以下字符串编码代码：【Q412】压缩编码以下字符串LRU缓存??????????代码：【Q249】用js实现一个lru缓存并实现一个功能对URLquerystring进行编码和解码??????????题目：[Q440]实现一个对URL的querystring进行编码的函数的原理是什么？如何实现JSONP????????话题：【Q439】JSONP的原理是什么？如何使用JS生成随机字符串??????????题目：【Q619】如何使用JS生成随机字符串constrandom=(n)=>Math.random().toString(36).slice(2、2+n)给数字加一千字符??????代码：如何给数组加一千字符千字符替换可以用正则匹配/(\d)(?=(\d\d\d)+(?!\d))/函数号Thousands(number,thousandsSeperator=','){returnString(number).replace(/(\d)(?=(\d\d\d)+(?!\d))/g,'$1'+thousandsSeperator)}04算法与数据结构(leetcode)L??eetcode50/100简单和中等难度的题，以简单题为主。我的题库里也收集了很多大厂面试总结的多道算法题。总结如下，输出100以内的斐波那契数列。题目：输出100以内的斐波那契数列TopK。题目：[Q288]如何找到数组中的TOPk。典型的二叉堆问题取数组中的前k个数做小顶堆，将堆数组中的其他数与堆顶元素一一比较，如果大于堆顶元素，则将该数插入到时间复杂度O(nlg(k))的正整数数组求正序增长，求和为N的两个数题目：【Q681】在正序增长的正整数数组中找出和为N的两个数求和给定数组中N个数之和为sum的所有可能集合AllpossiblesetsTopic:[Q673]求给定数组中N个数之和为sumAllpossiblesets求给定数组中N个数之和为sum所有可能的集合，请添加如下代码functionfn(arr,n,sum){}如何判断两个链表是否相交题目：【Q061】如何判断两个链表是否相交经典题最终代码编程题出现频率高在面试过程中，可以在很大程度上考察应聘者的编码能力和编码风格。
