前言今天给大家分享一个字节跳动公司-石墨文档专访！话不多说，先来看正题！问题1.['10','10','10','10','10'].map(parseInt)的输出值是多少？2.你目前的技术栈是什么？为什么要用ts？3、setTimeout（事件循环、同步、异步）的执行过程是怎样的？4、Promise的理解，async和await的区别，async和await是怎么实现的？5.分别解释一下requestAnimationFrame/requestIdleCallback的使用？6.React性能优化？7、说说你对flex的理解？8.什么是回流和重绘？如何减少回流和重绘？9、如何查找react页面卡顿的原因？10、编程题：实现一个对象的flatten方法，如下：constobj={a:{b:1,c:2,d:{e:5}},b:[1,3,{a:2,b:3}],c:3}flatten(obj){}返回结果如下：//{//'a.b':1,//'a.c':2,//'a.d.e':5,//'b[0]':1,//'b[1]':3,//'b[2].a':2,//'b[2]。b':3//c:3//}两个方面1.谈谈对webworker的理解2.serviceworker相对于强缓存有哪些优势？3.谈谈对stackoverflow的理解4.什么是stickyinposition，还有什么？5、ts中any和unknown分别是什么意思？如何使用泛型？6.bind有什么用？多次连续绑定，最后一点是什么？7、如何实现webpack的plugin？8、编程题：已知一个字符串由正整数和四个加减乘除运算符（+-/）组成。比如有一个字符串conststr='11+2-34+5/24+10/5'，现在需要把高优先级的运算用括号括起来，比如结果是'11+2-(34)+(5/2*4)+(10/5)'。注意可能会有连续的乘法和除法运算，需要一起包裹起来。请使用javascript来实现这个过程。三方面1.手写：使用TypeScript实现一个get函数获取其属性值constdata={name:'tom',age:18,address:'xxx'}2.anyintsunknown和unknown的区别3.你用过ts中的keyof吗？4.forin/forofof有什么区别？5.承诺价值渗透？回答方1.['10','10','10','10','10'].map(parseInt)的输出值是多少？可以转换为：['10','10','10','10','10'].map((num,index)=>parseInt(num,index))//[10,NaN,2,3,4]'10'0->10:base0,那么默认的base10就是'10'1->NaN:base1不存在'10'2->2:2*1+2*0'10'3->3:3*1+3*0'10'4->4:4*1+4*02.你目前的技术栈是什么？为什么要用ts？Typescript是JavaScript的超集。它的本质是为JavaScript添加可选的静态类型和基于类的面向对象编程特性。Typescript可以在编译过程中检测和纠正错误，提高可维护性，提高协同开发的效率。强支持类型、接口、泛型、模块3、setTimeout的执行过程（事件循环、同步、异步）？事件循环1.执行同步代码2.1中生成的microtasks。先执行3.1中生成的macrotasks，再执行同步。简单地说：排队。代码是有先后顺序的，异步任务必须按顺序执行。异步任务可以同时执行，不会阻塞后面代码的执行，执行完会有异步回调。想一个可以同步异步解释的故事：你打电话去书店借书，老板接电话让你等，他去找书，你只能在电话里等，异步等：你打电话去书店借书，老板接电话说找到书会回电话给你，然后就挂断了。这段时间找书，可以自由活动4.Promise的理解，async和await的区别，async,await是怎么实现的？Promise的理解，顾名思义，Promise就是承诺的意思，意思是Promise的状态一旦改变，就不会再改变。如果状态满足，则执行，如果状态拒绝，则执行catch。Promise还支持链式调用。我觉得Promise最大的用处就是解决回调地狱，提高代码的可读性。常用的方法有resolve、reject、then、catch、race、all、allSettled、any、finallyasyncawaitasync/await的作用是以同步的方式进行异步操作。我个人对其实现原理的理解是利用Promise的连续嵌套，加上生成器函数的步进控制，实现了异步操作有序执行的效果。补充：async函数返回的是一个Promise5。解释requestAnimationFrame/requestIdleCallback有什么用？requestAnimationFrame：一般间隔为16ms，因为大部分电脑都是每秒60帧，所以1000/60≈16ms会把每一帧中的所有DOM操作聚集起来，在一次重绘或回流中完成，时间间隔紧紧跟刷新浏览器的速率。如果有隐藏或不可见的元素，则不会重绘或回流，减少cpu和gpu的内存占用。如果需要取消，使用cancelAnimationFramerequestIdleCallback:我的理解是找浏览器空闲的时间来执行传入的回调，在项目中没有使用过。6.React性能优化？7、说说你对flex的理解？灵活布局，设置display:flexbox为灵活框，子元素自动成为灵活项。盒子有一个主轴，默认是水平的，还有一个交叉轴（垂直于主轴）。弹性盒子的样式：flex-direction：定义主轴的方向flex-wrap：是否允许换行flex-flow：flex-direction和flex-wrap的简写justify-content：对齐的方向mainaxisalign-items:交叉轴方向对齐align-content:多轴对齐弹性项的样式:order:定义项的顺序，值越小，排列越高，默认为0flex-grow：定义item的放大比例，默认为0flex-shrink：定义item的缩小比例，默认为1flex-basis：定义item之前占用的主轴空间分配多余空间，默认autoflex：flex-grow、flex-shrink、flex-basis的简写align-self：允许单个item设置不同的横轴对齐方式8.什么是reflow和redraw？如何减少回流和重绘？RedrawReflowReflow：当尺寸和布局发生变化时，会导致页面重新构建。重绘：当元素的外观和样式发生变化而不影响布局时，就是重绘。区别：重绘一定会引起重绘，重绘不一定会引起回流。浏览器帮助：浏览器维护了一个队列，将所有引起回流和重绘的操作都放入这个队列中。当队列达到一定数量或一定时间间隔时，浏览器会清空队列并进行批处理。避免重绘、回流1、批量修改DOM或style2、复杂动画使用绝对定位使其脱离文档流，否则会打印子元素或后续元素的频繁回流3、GPU加速：transform，opacity、filters、will-Change等样式9.如何判断一个对象是否为数组？Object.prototype.toString.call(xxx)Array.isArray(xxx)xxxinstaceOfArray10。如何查找react页面卡顿的原因？11、编程题：实现一个对象的flatten方法，如下：constobj={a:{b:1,c:2,d:{e:5}},b:[1,3,{a:2,b:3}],c:3}flatten(obj){}返回结果如下：//{//'a.b':1,//'a.c':2,//'a.d.e':5,//'b[0]':1,//'b[1]':3,//'b[2].a':2,//'b[2]。b':3//c:3//}ConstisObject=(target)=>{returntypeoftarget==='object'&&target!==null}constflatten=(obj)=>{if(!isObject)returnconstres={}constdfs=(cur,prefix)=>{if(isObject(cur)){if(Array.isArray(cur)){cur.forEach((item,index)=>dfs(item,`${prefix}[${index}]`))}else{for(letkeyincur){dfs(cur[key],`${prefix}${prefix?'.':''}${key}`)}}else{res[prefix]=cur}}dfs(obj,'')returnres}两个方面1.说说对webworker的理解1.启动一个子线程，在这个子线程中进行一些大数据处理或者耗时操作2.使用postMessage和onmessage实现main线程与子线程线程间通信3.使用onerror监控子线程是否挂起4.webworker并没有改变javascript单线程的事实2.serviceworker与强缓存相比，有什么优势？从未使用过服务缓存。3.说说你对栈溢出的理解？一个常见的情况出现在大量递归或者无限循环时，会导致栈溢出，因为每次执行代码，都需要分配一定的内存。以上两种情况都会导致执行空间超过最大，从而报错4.在position的sticky是什么，还有什么？static：默认relative：相对定位，相对于自身定位absolute：绝对定位，相对于第一个非静态祖先元素定位fixed：相对于浏览器窗口定位inherit：规定position属性的值应该继承自父元素sticky:吸顶定位5.ts中any和unknown分别代表什么意思？如何使用泛型？any：如果变量是任何类型，则绕过所有类型检查，直接使用unknown：如果变量是未知类型，则需要先判断类型再使用。6.bind有什么用？多次连续绑定，最后一点是什么？bind的作用是改变函数执行的方向，不会立即执行，而是返回一个新的函数，可以独立调用本函数的执行（本函数不能作为构造函数）。连续多次绑定后，this点总是指向第一个7.webpack的plugin如何实现？插件是一个类，类中有一个apply方法，每次打包都会调用，这个apply方法接受一个参数对象，里面有一个plugin方法，里面有很多hook函数，可以判断静态文件生成、修改等8、编程题：已知一个字符串由正整数和四个加减乘除运算符（+-/）组成。比如有一个字符串conststr='11+2-34+5/24+10/5'，现在需要把高优先级的运算用括号括起来，比如结果是'11+2-(34)+(5/2*4)+(10/5)'。注意可能会有连续的乘法和除法运算，需要一起包裹起来。请使用javascript实现这个过程并回答我的比较。我用的方法也是暂时的想法，没有优化。你将拭目以待：constcheckType=(str)=>{if(['*','/'].includes(str))return'high'if(['+','-'].includes(str))return'low'return'number'}constaddBrackets=(formula)=>{conststrs=formula.split('')让i=0,j=1,high=false,res=[]while(j
