前言大家好，我是林三鑫。用最通俗易懂的话讲最难的知识点是我的座右铭。基础是进阶的前提是我的初衷。今天给大家分享一个字节一年的心得抖音电商面交心得1.自我介绍？咯2，问项目咯3，leetcode第112题，consthasPathSum=(root,sum)=>{if(root==null){//遍历到null节点returnfalse;}if(root.left==null&&root.right==null){//遍历到叶子节点returnsum-root.val==0;//如果满足则返回真。否则，returnfalse}//如果不是上面的情况，则分裂成两棵子树，其中一棵为truereturnhasPathSum(root.left,sum-root.val)||hasPathSum(root.right,sum-root.val);}4.你知道哪些JS数组API？该方法的功能是否影响原始数组？push在数组后面添加元素并返回长度?pop删除数组中的最后一项并返回删除的项?shift删除数组中的第一项并返回删除的项?unshift在数组的开头添加一个元素并且返回长度?reserve反转数组，返回数组?sort对数组排序，返回数组?splice截取数组，返回截取的部分?join将数组转成字符串，返回字符串?concat连接数组?map按照相同的规则处理数组项，返回一个新数组?forEach遍历数组?filter过滤数组项，返回符合条件的数组?每一项满足规则返回true?some只要有一个就返回trueitem满足规则?reduce接受数组的前一个return和下一个item?flatarrayflattening?slice截取数组，返回截取的区间?5，手写reduceArray.prototype.sx_reduce=function(callback,...args){letstart=0,preif(args.length){pre=args[0]}else{pre=this[0]start=1}for(leti=start;我<这个。长度；i++){pre=callback(pre,this[i],i,this)}returnpre}6.谈谈HTTP缓存？7、说说vue和react的区别和优缺点？vue2对ts的支持很差，在vue3中已经解决了。vue2对jsx的支持很差，在vue3中已经解决了。vue和react都是单向数据流。vue多用template模板，react多用jsx。双向绑定，react是单向绑定vue和react都提倡组件化开发vue和react都支持服务端渲染Vue2的状态管理工具vuex、vue3用的是pinia，react用的是redux，mobx，recoilvue的diff算法比react效率更高，react的写法更接近js原生8.你用过hooks吗？说说react中类组件和函数组件的区别？我的React比较菜。类组件：state和props是固定地址功能组件：state和props每次都会随着渲染更新而更新9.你是如何做前端性能优化的？列表优化：延迟加载、虚拟列表、页面重绘回流：合并修改、requestAnimationFrame、will-change提交优化：防抖网络请求：控制并发、取消重复请求、合并请求、http缓存webpack优化：代码压缩、gzip、CDN、代码拆分、hash的合理设置、图片转base6410、略有两面反问1、自我介绍？2、项目中遇到的最复杂的事情是什么？技术上最困难的部分是什么？3.算法题fn([['a','b'],['n','m'],['0','1']])=>['an0','am0','an1','am1','bn0','bm0','bn1','bm0']解决方案constfn=(arr)=>{constlength=arr.lengthconstres=[]constdfs=(items,str='',index=1)=>{if(index>length){res.push(str)}else{for(constitemofitems){dfs(arr[index],str+item,index+1)}}}dfs(arr[0])returnres}4.手写u.console('breakfast').setTimeout(3000).console('lunch').setTimeout(3000).console('dinner')解法classU{constructor(){this.tasks=[]setTimeout(()=>{this.next()})}next(){consttask=this.tasks.shift()task&&task()}console(海峡）{常量塔sk=()=>{console.log(str)this.next()}this.tasks.push(task)返回这个}setTimeout(delay){consttask=()=>{setTimeout(()=>{this.next()},delay)}this.tasks.push(task)returnthis}}5.什么是事件代理？当所有的子元素都需要绑定同一个事件时，此时可以直接将事件绑定到父元素上，通过目标对象来判断执行不同的子元素操作，可以大大减少绑定事件的数量，减少DOM操作，提高性能6、e.target和e.currentTarget的区别？e.target：触发事件的元素e.currentTarget：事件绑定的元素7、写事件代理函数时，需要判断child是否是parent的子节点？functionproxy(event,cb,parent,child){parent[event]=function(e){if(parent.contains(child)&&e.target===child){cb.call(this)}}}8、看代码说结果？varlength=10;functionfn(){returnthis.length+1;}varobj1={length:5,test1:function(){returnfn()}}obj1.test2=fn;obj1.test1.call()//1obj1.test1()//11obj1.test2.call()//11obj1.test2()//69.从输入Url到页面渲染发生了什么？写提纲？稍后将单独发表文章。网络阶段：构建请求线路、查询强缓存、DNS解析、建立TCP连接、发送HTTP请求、响应请求解析阶段：解析html、构建dom树，计算样式，生成布局树渲染阶段：生成图层树，生成绘图列表，生成瓦片，优先选择靠近视口的瓦片生成位图数据，显示内容10、Tcp和Udp的区别？1、基于连接和无连接2、对系统资源的要求（多TCP，少UDP）3、UDP程序结构更简单4、流模式和数据报模式5、TCP保证数据正确性，UDP可能丢包6、TCP保证数据顺序，UDP不保证11、你对前端新技术了解多少？说完PWA和electron，这两个主要是用来做什么的呢？新技术：微前端、低代码、Vue3、VitePWA：没有Electron：使用JavaScript搭建桌面应用框架结语我是林三鑫，一个狂热的前端菜鸟程序员然后我们就可以交个朋友，一起钓鱼哈哈，摸鱼，加我，请注意[思想]
