微软前端实习一面/二面

微软一面

一轮面试是纯中文面试,软件用的Microsoft的teams进行视频

  1. 自我介绍

  2. 你为什么要学习前端呢,是什么原因让你往这个方向发展(学校有写代码的课,学到web开发的时候我觉得这个方向还挺有意思)

  3. 你平时怎么学习的呢(看博客,看书,看文档,看资料,看视频,写demo)

  4. 介绍项目,包括是个人独立完成的吗,为什么要做这个项目,这个项目中你收获了什么

  5. 你简历上写你在做这个组件库时解决了一些难点,具体说说(我主要介绍了一些开发上的难点,面试官似乎要的并不是这个答案,他要设计组件的思路,为什么要这样设计)

  6. React和Angular的区别有哪些(我实在是没有学过Angular,听说Angular也挺难的,我只说我学过React和Vue,然后说了一些React和Vue的区别)

  7. 那就从React开始吧,讲讲React中的组件通信有哪些方法(我说props传参,useRef可以实现子向父组件传参,useContext配置好Provider后可以实现内部各个组件之间的传参,还有redux,mobx,recoil这些库也可以实现)

  8. 你提到了useRef,具体讲讲怎么用的(这些天一直在背面经刷题,确实不太记得useRef实现具体的一些参数了,我只好说具体的不太清楚)

  9. useState的原理了解吗(我讲了一下setState在遇到浏览器原生事件的时候是同步操作,而在React可以控制的事件如生命周期,合成事件中是异步调用的)

  10. 那再来做一道关于setState同步异步的题目吧,输出的结果是什么(我关于这部分了解得确实不够透彻,报了个错误的答案,正确答案是 0 0 2 3)

    class App extends React.Component {  state = { val: 0 }  componentDidMount() {     this.setState({ val: this.state.val + 1 })     console.log(this.state.val)     this.setState({ val: this.state.val + 1 })     console.log(this.state.val)     setTimeout(_ => {       this.setState({ val: this.state.val + 1 })       console.log(this.state.val);       this.setState({ val: this.state.val + 1 })       console.log(this.state.val)     }, 0)  }  render() {     return <div>{this.state.val}</div>  } }
  11. redux有用过吗,具体的实现原理是什么(redux实现原理我猜是useReducer,我真不记得了啊哥)

  12. redux怎么使用,举个例子(redux我真的真的好久没用了,写不出来)

  13. js事件循环介绍一下(我正准备说大概的执行流程,直接就出题了)

  14. 说说输出什么(在这里我错把setImmediate当成了微任务,出了一点错,其它的没啥大问题)

    console.log(1); setTimeout(() => { console.log(2) });  process.nextTick(() => { console.log(3); });  setImmediate(() => { console.log(4) });  new Promise(resolve => { console.log(5); resolve(); console.log(6); }).then(() => { console.log(7) });  Promise.resolve().then(() => { console.log(8); process.nextTick(() => {    console.log(9) }); });
  15. 说说js中的变量提升(我举了个例子,var a = 2,那么首先声明a = undefined,然后才赋值 a = 2)

  16. 你知道什么是暂时性死区吗(我听过很多遍这个名词,但是居然没有详细复习到)

  17. 那好,做道题(我说第一个会报错,第二个会输出这个函数因为函数提升了,第三个输出123(这里答错了, 因为这个形成了暂时性死区,所以会报错而不是输出123)

    console.log(b); let b = 0;  console.log(c); function c() {}  var tmp = 123; if (true) {  tmp = 'abc';   let tmp; } console.log(tmp);
  18. 二叉树了解吗,做道题吧 ******** 572. 另一棵树的子树。(但是面试官并没有给********那样的可以测试的环境,而是直接在本地编辑器中运行,需要自己写二叉树的结构函数,自己写测试用例。但是面试官给的两个数组我突然不记得怎么转成树了,测试用例没写出来,但是讲了一下大概的思路,当然,第一时间想到的就是深度优先搜索暴力匹配然后讲了一遍,面试官又给我换了道题)

  19. 再来一道题,将 [1, 2, 3, 1, 2, 3, 4, 6, 6, 8, 9, 10] 转换为 ["1-3","1-4", 6, "8-10"],连续的数字就用“-”把首和尾连接起来(用双指针秒A)

  20. 再谈谈CSS吧,说说怎么实现垂直居中(flex布局的align-item设置为center,绝对定位时top: 50%,tranform: translateY(-50%),margin: 0 auto我都说进去了)

  21. margin能实现垂直居中吗(面试官和我说不能,只能实现水平居中,这个没复习确实又忘记了)

  22. 行内元素怎么垂直居中(line-height设置为等于父元素容器的高度)

  23. 反问(1.日常工作?2.我能学到什么?面试官都解答得比较详细)

  24. 总结:没考计网!写代码或者判断输出的地方挺多的,可能还有一些题目我遗漏了,一面之后马上二面

微软二面

一面之后紧接着就是二面

面试官人在美国,跨洋的网络可能不太好,进去就卡了半天他听不到我的声音,然后全程都有卡顿的情况,后面甚至开始聊天框交流

  1. 没有自我介绍

  2. 开始聊天(面试官说我简历上东西好少,我心想当然,我大三而且还没有实习过,当然经验少啦)

  3. 继续聊天(你这专业是干啥的,我觉得还挺有意思,然后聊了聊专业,但是面试官总是夹杂着英文,有些我真的还得楞一会才能回过神来猜到是啥意思)

  4. 还是聊天(你为啥学前端,我重复了一面时候的话术)

  5. 你这些项目都是自己做的吗(是的,都是自己做的)

  6. 共享一下屏幕,展示一下你这两个项目(第一个项目可以跑,而且我把基本功能都演示了,但是组件库,这个演示不了哈哈)

  7. 聊点技术吧(你觉得React和Angular有啥区别,又是一面已经问过的问题)

  8. 你觉得React有啥好处(我随意自由发挥了一下,答得不好)

  9. 接下来又是聊了好多React相关的,但是都是比较浅层的,不涉及具体的探讨

  10. 手写代码,s = "12223333752",请你输出"1,8,12,7,5",即合并相同的数字并按顺序输出(我一开始用map,面试官问我为啥要用map,要按顺序输出,我又换成二维数组,面试官也说不用二维数组,直接遍历就行,直接遍历我没写出来,一个原因可能是根本不会,另一个原因可能是懒,没吃早饭已经不太想思考了)

  11. 反问(1.日常工作2.学到什么 二面面试官回答得比一面面试官简略,麦克风后传来小朋友的声音,说着流畅的英语)

  12. 总结:寄


#前端##面经##实习##微软#
全部评论
24小白不太懂,想请教一下楼主算法题自己写测试用例,是不是就是自己编几个符合条件的输入参数呀,还是需要写代码之类的测试呀?
1 回复 分享
发布于 2022-10-31 19:38 上海
这都寄了?他们到底要啥人
1 回复 分享
发布于 2022-11-21 09:45 辽宁
问一下 大佬14题事件循环的答案应该是什么呀
点赞 回复 分享
发布于 2022-10-15 14:44 江苏
我去,你这好难啊,我也是论坛上找的,我一直是后端,前端没碰过,你这样都能寄,那我肯定没了。。。
点赞 回复 分享
发布于 2022-10-30 15:05 北京
大佬面过了吗?我直接面到一半放弃了
点赞 回复 分享
发布于 2022-12-19 20:15 江苏
```js const str="12223333752".split('').map(i=>parseInt(i)) let res=[],tmp=0 for(let i=0;i
点赞 回复 分享
发布于 2023-01-08 20:17 北京
大佬在哪投的呀
点赞 回复 分享
发布于 2024-10-04 17:35 上海

相关推荐

投递Adobe等公司10个岗位
点赞 评论 收藏
分享
#大家都开始春招面试了吗# 1.&nbsp;传统的&nbsp;CSS&nbsp;文件(全局样式)传统的&nbsp;CSS&nbsp;方案通常是将所有的样式放在一个或多个&nbsp;CSS&nbsp;文件中,通过&nbsp;&nbsp;标签引入。在小型项目或单页面应用中,简单直接。使用场景:-&nbsp;小型项目-&nbsp;快速开发和原型设计-&nbsp;个人项目优点:-&nbsp;结构简单,易于理解。-&nbsp;实现快速,适合小项目。缺点:-&nbsp;不利于维护:当项目增大时,CSS&nbsp;可能变得冗长且重复。-&nbsp;样式冲突:没有隔离,容易出现不同组件间的样式污染。2.&nbsp;CSS&nbsp;预处理器(如&nbsp;Sass&nbsp;/&nbsp;LESS&nbsp;/&nbsp;Stylus)CSS&nbsp;预处理器通过扩展&nbsp;CSS,提供了变量、嵌套规则、混合宏(mixin)等功能,提升了样式的复用性和可维护性。使用场景:-&nbsp;中型项目-&nbsp;需要模块化和可扩展性的项目-&nbsp;需要多次复用样式的项目优点:-&nbsp;支持变量、嵌套、函数等增强功能,提高代码可维护性。-&nbsp;提高代码的模块化与复用性。-&nbsp;代码组织更加清晰,能避免重复的&nbsp;CSS&nbsp;代码。缺点:-&nbsp;编译过程:需要将&nbsp;Sass&nbsp;或&nbsp;LESS&nbsp;编译成&nbsp;CSS。-&nbsp;学习曲线相对较陡(尤其对于初学者)。示例(Sass)://&nbsp;_variables.scss$primary-color:&nbsp;#3498db;$font-size:&nbsp;16px;//&nbsp;_layout.scss.container&nbsp;{&nbsp;&nbsp;width:&nbsp;80%;&nbsp;&nbsp;margin:&nbsp;0&nbsp;auto;}//&nbsp;main.scss@import&nbsp;'variables';@import&nbsp;'layout';body&nbsp;{&nbsp;&nbsp;font-size:&nbsp;$font-size;}.header&nbsp;{&nbsp;&nbsp;background-color:&nbsp;$primary-color;}3.&nbsp;BEM(块元素修饰符)命名法BEM&nbsp;是一种&nbsp;CSS&nbsp;类命名方法论,适用于大型项目,帮助前端开发者更好地组织和管理样式。BEM&nbsp;将样式拆分成更小的、功能化的组件,通过定义明确的命名规范来减少样式冲突和提高代码的可维护性。使用场景:-&nbsp;大型项目,尤其是前端与后端分离时-&nbsp;团队协作项目-&nbsp;需要高度模块化和可复用的项目优点:-&nbsp;命名规范清晰,避免命名冲突。-&nbsp;样式组件化,提升可复用性。-&nbsp;便于多人协作开发。缺点:-&nbsp;代码量相对较多,类名冗长。-&nbsp;初学者学习曲线较陡。示例:/*&nbsp;BEM&nbsp;风格&nbsp;*/.button&nbsp;{&nbsp;&nbsp;padding:&nbsp;10px;&nbsp;&nbsp;background-color:&nbsp;blue;}.button--primary&nbsp;{&nbsp;&nbsp;background-color:&nbsp;#3498db;}.button__icon&nbsp;{&nbsp;&nbsp;margin-right:&nbsp;5px;}4.&nbsp;CSS-in-JSCSS-in-JS&nbsp;是将&nbsp;CSS&nbsp;写在&nbsp;JavaScript&nbsp;代码中的一种方法,通常与&nbsp;React&nbsp;等框架一起使用。它将&nbsp;CSS&nbsp;作为&nbsp;JavaScript&nbsp;对象来定义,样式和组件逻辑耦合在一起,从而实现样式的动态计算和管理。使用场景:-&nbsp;React、Vue&nbsp;等组件化框架项目-&nbsp;需要根据组件状态动态修改样式-&nbsp;小型项目或者需要样式和组件解耦的大型项目优点:-&nbsp;样式与组件逻辑结合,易于管理和维护。-&nbsp;动态生成样式,支持主题切换、响应式设计等功能。-&nbsp;减少全局样式冲突,样式范围仅限于组件内部。缺点:-&nbsp;对性能有一定影响(样式计算和注入)。-&nbsp;需要配置或使用框架(如&nbsp;styled-components、emotion)。示例(styled-components)://&nbsp;React&nbsp;+&nbsp;styled-components&nbsp;示例import&nbsp;styled&nbsp;from&nbsp;'styled-components';const&nbsp;Button&nbsp;=&nbsp;styled.button`&nbsp;&nbsp;padding:&nbsp;10px;&nbsp;&nbsp;background-color:&nbsp;${props&nbsp;=&amp;gt;&nbsp;props.primary&nbsp;?&nbsp;'#3498db'&nbsp;:&nbsp;&#39;#ccc'};&nbsp;&nbsp;color:&nbsp;white;&nbsp;&nbsp;border:&nbsp;none;`;const&nbsp;App&nbsp;=&nbsp;()&nbsp;=&amp;gt;&nbsp;(&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Primary&nbsp;Button&nbsp;&nbsp;&nbsp;&nbsp;Secondary&nbsp;Button&nbsp;&nbsp;);5.&nbsp;CSS&nbsp;模块化(CSS&nbsp;Modules)CSS&nbsp;模块化方案允许将&nbsp;CSS&nbsp;写在独立的文件中,并且通过自动生成的唯一类名避免样式冲突。它通常与&nbsp;Webpack&nbsp;一起使用,支持作用域限定的&nbsp;CSS。使用场景:-&nbsp;现代前端开发,尤其是使用&nbsp;Webpack&nbsp;或&nbsp;React/Vue&nbsp;等框架时。-&nbsp;需要避免全局样式污染的项目。优点:-&nbsp;避免了全局命名空间污染。-&nbsp;类名自动生成,保证唯一性和作用域隔离。-&nbsp;支持组件化,提升可维护性。缺点:-&nbsp;需要额外的配置和工具(如&nbsp;Webpack&nbsp;loader)。-&nbsp;类名经过编译后可能较长。示例(React&nbsp;+&nbsp;CSS&nbsp;Modules)://&nbsp;App.module.css.button&nbsp;{&nbsp;&nbsp;padding:&nbsp;10px;&nbsp;&nbsp;background-color:&nbsp;#3498db;&nbsp;&nbsp;color:&nbsp;white;}//&nbsp;App.jsximport&nbsp;React&nbsp;from&nbsp;'react';import&nbsp;styles&nbsp;from&nbsp;'./App.module.css';const&nbsp;App&nbsp;=&nbsp;()&nbsp;=&amp;gt;&nbsp;(&nbsp;&nbsp;Click&nbsp;Me);6.&nbsp;Tailwind&nbsp;CSS(原子化&nbsp;CSS)Tailwind&nbsp;CSS&nbsp;是一种实用工具优先(utility-first)CSS&nbsp;框架,提供了大量的原子类(单一功能的&nbsp;CSS&nbsp;类),可以快速构建复杂的布局。使用场景:-&nbsp;快速开发和原型设计-&nbsp;喜欢“原子类”方式的开发者-&nbsp;开发团队需要减少自定义样式的项目优点:-&nbsp;提供了高度复用的类,减少了自定义&nbsp;CSS&nbsp;的需求。-&nbsp;代码量少,开发速度快。-&nbsp;通过配置定制化&nbsp;Tailwind,适应项目需求。缺点:-&nbsp;类名会非常多,容易使&nbsp;HTML&nbsp;代码显得冗长。-&nbsp;学习成本较高,特别是对于不熟悉原子类概念的开发者。示例:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Click&nbsp;Me&nbsp;&nbsp;7.&nbsp;Atomic&nbsp;CSS(原子化&nbsp;CSS)原子化&nbsp;CSS&nbsp;和&nbsp;Tailwind&nbsp;类似,旨在通过提供小的、独立的&nbsp;CSS&nbsp;类来构建样式。每个类只做一件事,组合起来形成完整的样式。使用场景:-&nbsp;大型项目,尤其是需要高效的布局和样式调整时。-&nbsp;需要减少样式重复的项目。优点:-&nbsp;高效的代码复用。-&nbsp;提高样式的可维护性。-&nbsp;可以轻松地修改布局和样式,而无需修改整个&nbsp;CSS。缺点:-&nbsp;类名较长,HTML&nbsp;中的样式代码显得冗长。-&nbsp;学习曲线较高。---用的多的CSS技术Flex典型用途:-&nbsp;创建水平和垂直居中的布局-&nbsp;实现响应式设计-&nbsp;动态调整容器内部元素的排列媒体查询媒体查询是响应式设计的核心工具之一,它使得在不同设备上展示不同样式成为可能。常见用法是根据屏幕尺寸来调整布局。典型用途:-&nbsp;响应式设计-&nbsp;根据屏幕宽度调整页面布局或字体大小-&nbsp;控制不同设备上的显示效果Position(定位)定位是&nbsp;CSS&nbsp;中的一个基本概念,通过&nbsp;position&nbsp;属性可以控制元素的定位方式。常见的有&nbsp;static,&nbsp;relative,&nbsp;absolute,&nbsp;fixed&nbsp;和&nbsp;sticky&nbsp;等。典型用途:-&nbsp;创建浮动元素-&nbsp;固定元素(如固定导航栏)-&nbsp;在容器内相对定位元素Transitions(过渡效果)CSS&nbsp;过渡效果可以让你在元素的属性发生变化时添加平滑的过渡效果,常用于按钮、图片、导航栏等的交互效果。典型用途:-&nbsp;鼠标悬停时的平滑动画效果-&nbsp;改变背景色、宽度、透明度等属性时的平滑过渡伪类和伪元素用于在不添加额外&nbsp;HTML&nbsp;元素的情况下,对元素的特定状态或部分应用样式。典型用途:-&nbsp;:hover,&nbsp;:focus,&nbsp;:active&nbsp;等交互状态-&nbsp;::before,&nbsp;::after&nbsp;等用于生成内容和装饰Overflow(溢出处理)overflow&nbsp;属性用于处理内容溢出的情况,常见用途是创建可滚动的区域或隐藏溢出内容。典型用途:-&nbsp;创建带滚动条的容器-&nbsp;隐藏溢出内容
点赞 评论 收藏
分享
评论
16
74
分享

创作者周榜

更多
牛客网
牛客企业服务