前端面试宝典.docx

《前端面试宝典.docx》由会员分享，可在线阅读，更多相关《前端面试宝典.docx（52页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、前端试宝典（持续更新）、Web端1.float如何清除浮动（1） 元素上加上overflow:auto/hidden。（2） 元素加个伪元素 .father:aftercontent: , clear: both 2.闭包的原理及作（1） 闭包是通过JS的链式作域，函数内的局部变量只有内部函数能访问到，所以要对外暴露个函数内部的局部变量时，就会到闭包。（2） 般于页内的计时器和计数器a） 计时器的使场景是函数防抖，当频繁触发计时器时，可以把计时器放到函数内，计时器的创建和销毁都通过闭包的形式对外暴露，这样可以 在频繁调计时器时，做到函数防抖。同时保持全局清洁，不会被其他函数的调破坏计时器的逻辑

2、。b） 计数器是把作为累加的变量保存在个函数内，同时通过闭包完成累加和对外暴露，以此保证全局清洁，以及计时器的安全性。 3.跨域访问如何解决由于JavaScript的同源策略，A域名下的Javascript不能操作B，C域名下的对象。协议不同，域名不同，端号不同。（1） 跨域资源共享 CORS后端在response header中添加【Access-Control-Allow-Origin:origin的地址/*】允许跨域。（2） 使jsonp，成script标签，但只能是GET请求。axios？ 4.万能居中（1） display: flex; justify-content: center

3、; align-items: center;（2） margin：0;（3） top: 50%; translateY: -50%;（4） line-height: 100%;（5） text-align: center; 5.vue/angular中的指令是什么a）vue（1） 除了默认设置的核指令( v-model 和 v-show ), Vue 也允许注册定义指令。（2） vue指令可以定义为全局的或者局部的。全局：Vue.directive(self_defined_name, bind:function(el,binding) /do someting , inserted: fun

4、ction(el,binding) /do something,局部：new Vue( el:#app, directives:self_defined_name1:bind:function(el,binding)/do something inserted:function(el,binding)/do something,self_defined_name2:bind:function(el,binding)/do somethinginserted:function(el,binding)/do something, )（3） 钩函数：bind inserted update comp

5、onentUpdated unbind（4） 钩函数参数：el binding对象(name value oldValue expression arg modifiers) vnode oldVnode(仅在update componentUpdated中使)b）angular（1） angular的指令分为组件，结构型指令和属性型指令（2） 组件继承于directive，所以组件也属于指令（3） 属性型指令可以使ng g d 件名，来在前端程中成个指令控制器件。件中需要使修饰器Directive+选择器，来指定指令的name。在Input中，获取传递给指令的参数。在构造函数construc

6、tion会返回el，通过el.nativeElement来获取指令所在的元素。（4） 结构型指令，在构造函数中会返回TemplateRef和ViewContainer，TemplateRef表内嵌的template模板元素，ViewContainer是视图容器，可以通过ViewContainer的createEmbeddedView或者clear法来控制内嵌的template模板元素是否显。（5） 指令与组件共有的钩1) ngOnChanges - 当数据绑定输属性的值发变化时调2) ngOnInit - 在第次 ngOnChanges 后调3) ngDoCheck - 定义的法，于检测和处理

7、值的改变4) ngAfterContentInit - 在组件内容初始化之后调5) ngAfterContentChecked - 组件每次检查内容时调6) ngAfterViewInit - 组件相应的视图初始化之后调7) ngAfterViewChecked - 组件每次检查视图时调8) ngOnDestroy - 指令销毁前调6.webpack和gulp的相同点和不同点（1） webpack和gulp都是前端程化具（2） webpack是打包具，gulp是构建具7.flex - 弹性布局（1） flex-direction：设置主轴向，默认平（2） flex-warp：是否换（3） ju

8、stify-content：主轴位置 flex-start center flex-end space-between space-around（4） align-items：交叉轴位置 flex-start center flex-end baseline stretch（5） align-content: 多根轴线的对齐式 flex-start center flex-end space-around space-between stretchb) 设置在项上的6个属性（1） order（2） flex-grow（3） flex-shrink（4） flex-basis（5） flex（6

9、） align-self 8.css相关，动画9.ES6有哪些新功能（1） 新增let和const。let不持变量提升，const在声明时必须被赋值（2） 模板字符串This demonstrates the output of HTML content to the page, including students $name, $seatNumber, $sex and so on.（3） 箭头函数，省略声明函数时的function，参数括号，return（4） 设置函数默认值，function printText(text=default)（5） 对象解构 constname,age,s

10、ex=student;（6） for.of 于遍历个迭代器；for.in 来遍历对象中的属性10.Promise的法11. async和await的法12. map，filter，each等的法，是否返回新数组（1） concat （返回新数组）（2） join（返回字符串，逗号分隔）（3） push（返回数组新长度，改变原数组）（4） pop（返回去掉的最后个元素，改变原数组）（5） shift（返回去掉的第个元素，改变原数组）（6） unshift（返回新增的第个元素，改变原数组）（7） slice（返回新数组，指定下标startend（不包括该元素）（8） splice（返回被删除的数组

11、，改变原数组）（9） substr, substring（两个参数，substr第个参数是留多少个字符；substring含头不含尾）（10） sort()，按照 Unicode code 位置排序，默认升序，返回新数组（11） reverse()法于颠倒数组中元素的顺序。返回的是颠倒后的数组，会改变原数组（12） indexOf 和 lastIndexOf（13） every（返回true/false）（14） some（返回true/false）（15） filter（返回新数组）（16） map（返回新数组）（17） forEach（法） ES6：（1） find（2） findInde

12、x（3） fill（4） copyWithin（5） from（6） of（7） entries（8） values（9） keys（10） includes13. vue双向数据绑定原理vue双向数据绑定是到了数据劫持和发布-订阅者模式（1）Object.defineProperty(object, key, setter(), getter()（2）14. 虚拟DOM?15. lodash 16.rxjs17. 响应式编程18. 性能优化（1） 尽量把写在上，写在下（2） 尽量减少络请求次数，合并API。http缓存，合并压缩css，js，img等资源。页懒加载，先只部分加载，问下滑动时再

13、继续加载。（3） 将JS件合并，并且将JS中的的语句删掉（4） 减少闭包的使（5） 个信息，菜单等可以缓存到localstorage中（6） 减少构造函数（new关键字）的使（7） 将全局变量存进局部变量使（8） 使js创建的dom元素必须append到template上，否则不会回收（9） switch if; =; for for of(ES6) for in(ES5) 19.HTML5为什么只需要写?HTML 4.01 中的 doctype 需要对 DTD 进引，因为 HTML 4.01 基于 SGML。 HTML 5 不基于 SGML，因此不需要对 DTD 进引，但是需要 doctyp

14、e 来规范浏览器的为。其中，SGML是标准通标记语,简单的说，就是HTML,XML更的标准，这两者都是由SGML发展来的。BUT，HTML5不是的。20.浏览器内核个完整的浏览器包括浏览器的内核和浏览器的外壳，浏览器的核部分 内核 主要分为两个部分：渲染引擎(Render Engine)和JS引擎， 由于JS引擎越来越独，所以现在我们所指的浏览器内核只指渲染引擎。渲染引擎： 负责取得页的内容（HTML、XML、图象等等）、整理信息（例如加CSS等），以及计算页的显式然后会输出显器或打印机。JS引擎： 执JavaScript代码的程序或解释器，JS引擎可以实现为标准解释器或即时编译器，它以某种形

15、式将JavaScript编译为字节码。常见的浏览器内核Webkit内核：Safari，Chrome Trident内核：IE，Firefox、360 21.BFC - 块级格式化上下具有 BFC 特性的元素可以看作是隔离了的独容器，容器的元素不会在布局上影响到外的元素，并且 BFC 具有普通容器所没有的些特性。通俗点来讲，可以把 BFC 理解为个封闭的箱，箱内部的元素论如何翻江倒海，都不会影响到外部。只要元素满下任条件即可触发 BFC 特性：body 根元素浮动元素：float 除 none 以外的值绝对定位元素：position (absolute、fixed) display 为 inli

16、ne-block、table-cells、flexoverflow 除了 visible 以外的值 (hidden、auto、scroll)1. 同个 BFC 下外边距会发折叠2. BFC 可以包含浮动的元素（清除浮动）3. BFC 可以阻元素被浮动元素覆盖22.数组去重（1）ES6：new Set + Array.from（2）ES5：for + splice（3）forEach + indexOf（v, i+1） -1? - ES5 includes - ES6（4） 对象属性（5） filter（）+ indexOf（）=index 23.原型和原型链24. 写Promise.all25

17、. vue和angular的命周期vuebeforeCreate, created, beforeMount, mounted, beforeUpdate, upadated, beforeDestroy, destroyed angular（1） constructor（2） ngOnChanges（3） ngOnInit（4） ngDoCheck（5） ngAfterContentInit（6） ngAfterContentChecked（7） ngAfterViewInit（8） ngAfterViewChecked（9） ngOnDestroy 26.sass预处理（1） 变量$（2）

18、 后代选择器（3） 选择器（4） 组合选择器，相邻选择器，全体选择器（5） 属性嵌套（6） 默认变量值（7） 件导（8） 混合器 mixin include（9） 选择器继承27.Lint28. 单元测试29. 微前端# Integration dev/test with the main otr-website project before publishing otr/website-common package1. The simplest strategy: Edit otr-website/node_modules/otr/website-common/fesm5/otr-websi

19、te- common.js directly, after verified back-port the changes to website-common source code.2. The npm link strategy:- Build website-common with watch flag: ./node_modules/.bin/ng build -watch -project=website-common- Then symlink website-common: cd dist/website-common/ & npm link- In root directory

20、of otr-website, run npm link otr/website-common, then restart ng serve(eg npm run start-plus).- After dev/test done, cleanup the symlink: npm unlink -no-save otr/website-common & npm install 30.yarn和npm的区别（1） yarn更快，a）npm下载依赖时，是按照队列逐个下载依赖，yarn是同步下载依赖。b）yarn可以离线下载之前已经缓存过的依赖，不需要每次都重复下载。（2） yarn安装的版本统，

21、不同于npm的package.json件的,，实际安装依赖的时候可能会出现版本不同的情况，yarn在安装时会成yarn.lock，指定安装依赖的版本号。（3） 下载依赖时，控制台只输出必要信息，相关错误信息不会像npm那样淹没在log中。31.session，cookie，token 32.SSO单点登录集成（1） 先会跳转到第三登录页，登录成功后会跳转回管理系统，并回传code。（2） 前台将appId和appSecret传后台，获取到登录token。（3） 前台将登录code，登录token发给后台，获取登录态token。（4） 使登录态token，获取当前户信息。33.如何准确判断个变量

22、的数据类型（1） 在JS中，有5中基本数据类型（null, undefind, boolean, string, number）种复杂数据类型（Object-Array Function，Date）（2） 使typeof判断，可以判断出number, string, boolean, function, undefined NaN和Infinity是number，arr, json, reg, null, date, error是object（3） instanceof能判断出个对象是否是另个类的实例。（4） 使Object.prototype.toString.call先for in遍历个o

23、bject，然后对的每个属性的value上的法判断类型，放到数组，然后join(,)做拼接。34.mutation为什么必须是同步的我们正在 debug 个 app 并且观察 devtool 中的 mutation 志。每条 mutation 被记录，devtools 都需要捕捉到前状态和后状态的快照。然，在上的例中 mutation 中的异步函数中的回调让这不可能完成：因为当 mutation 触发的时候，回调函数还没有被调，devtools 不知道什么时候回调函数实际上被调实质上任何在回调函数中进的状态的改变都是不可追踪的。35.数组扁平化 - 遍历数组arr，若arri为数组则递归遍历，

24、直arri不为数组然后与之前的结果concat。（1） ES6的Generator 函数（2） reduce函数，参数：total, currentItem, currentIndex, array reduce+concat（3） flat（Infinity）直接数据扁平。（4） join(,) split(,) toString（） split（,）（5） forEach()+Array.isArray(item)+push（6） es6的扩展运算符能将维数组变为维， arr = .concat(.arr); 36.apply和call的区别call 、bind 、 apply 这三个函数

25、的第个参数都是 this 的指向对象obj.myFun.call(db,成都,上海)；/ 德玛 年龄 99 来 成都去往上海obj.myFun.apply(db,成都,上海); / 德玛 年龄 99 来 成都去往上海 obj.myFun.bind(db,成都,上海)(); / 德玛 年龄 99 来 成都去往上海obj.myFun.bind(db,成都,上海)(); / 德玛 年龄 99 来 成都, 上海去往 undefined37. async和await上这段代码async中使await 摇()先执，等到三秒后执完再把得到的结果赋值给左边的n，也就是说test函数需要三秒钟才执完成， 所以t

26、est函数是异步的，因此前必须写async38. 观察者模式和发布订阅者模式的区别（1） 观察者模式（观察者和被观察者），发布订阅者模式（发布者，订阅者，多了个调度中）（2） 观察者和被观察者，是松耦合的关系；发布者和订阅者，则完全不存在耦合。39.观察者模式如何实现js观察者模式 - 正与疯 - 博客园 ()（1） document.body.addEventListener(click, function() alert(Hello World)，false )document.body.click() /模拟户点击（2） vue底层原理，重写setter法40.发布订阅者模式如何实现发布

27、者订阅模式例如如我们关注了某个公众号,然后他对应的有新的消息就会给你推送,/发布者与订阅模式var shoeObj = ; / 定义发布者shoeObj.list = ; / 缓存列表 存放订阅者回调函数/ 增加订阅者shoeObj.listen = function(fn) shoeObj.list.push(fn); / 订阅消息添加到缓存列表/ 发布消息shoeObj.trigger = function() for (var i = 0, fn; fn = this.listi+;) fn.apply(this, arguments);/第个参数只是改变fn的this,/ 红订阅如下消

28、息shoeObj.listen(function(color, size) console.log(颜是： + color); console.log(尺码是： + size););/ 花订阅如下消息shoeObj.listen(function(color, size) console.log(再次打印颜是： + color); console.log(再次打印尺码是： + size););shoeObj.trigger(红, 40);shoeObj.trigger(, 42); 41.vue3.0相较于vue2.0的有点（1）3.02.0 快2倍，virtual DOM 完全重写，放弃 O

29、bject.defineProperty ，使更快的原 Proxy；默认进懒观察（lazy observation）。在 2.x 版本，不过数据多，都会在开始就为其创建观察者。当数据很时，这可能会在页载时造成明显的性能压。3.x 版本，只会对被于渲染初始可见部分的数据创建观察者，且 3.x 的观察者更效。（2）3.0兼容IE12以上（3）3.0去掉了filter, 么有beforeCreate created,setup取代42.vue定义个过滤器43.v-for中为什么要使key 可以复。vue使diff算法，当有组多选选项时，如果在第个插个新的选项，diff算法会对操作前后的dom进对，他

30、不会把已选中的状态各往后移位，是位数保持不变，这样会造成错误。如果增加key标识组件的唯性，则可以更加效的更新虚拟DOM。44.vue通信vue组件间通信六种式（完整版） - SegmentFault 思否（1）props / $emit 适组件通信：这种法是 Vue 组件的基础，相信部分同学闻能详，所以此处就不举例展开介绍。2.ref 与 $parent / $children ：适组件通信ref ：如果在普通的 DOM 元素上使，引指向的就是 DOM 元素；如果在组件上，引就指向组件实例$parent / $children ：访问 / 实例3.EventBus（$emit / $on）

31、：适于、隔代、兄弟组件通信这种法通过个空的 Vue 实例作为中央事件总线（事件中），它来触发事件和监听事件，从实现任何组件间的通信，包括、隔代、兄弟组件。1、初始化全局定义全局定义，可以将eventBus绑定到vue实例的原型上,也可以直接绑定到window对象上./main.js/式Vue.prototype.$EventBus =new Vue();/式window.eventBus =new Vue(); 2、触发事件/使式定义时 this.$EventBus.$emit(eventName, param1,param2,.)/使式定义时 EventBus.$emit(eventName

32、, param1,param2,.) 3、监听事件/使式定义时this.$EventBus.$on(eventName,(param1,param2,.)=/需要执的代码)/使式定义时EventBus.$on(eventName,(param1,param2,.)=/需要执的代码)4、移除监听事件为了避免在监听时，事件被反复触发，通常需要在页销毁时移除事件监听。或者在开发过程中，由于热更新，事件可能会被多次绑定监 听，这时也需要移除事件监听。/使式定义时this.$EventBus.$off(eventName);/使式定义时EventBus.$off(eventName); 4.$attrs

33、/$listeners ：适于隔代组件通信childCom1的$attrs:$attrs$attrs ：包含了作域中不被 prop 所识别 (且获取) 的特性绑定 ( class 和 style 除外 )。当个组件没有声明任何 prop 时，这会包含所有作域的绑定 ( class 和 style 除外 )，并且可以通过 v-bind=$attrs 传内部组件。通常配合 inheritAttrs 选项起使。$listeners ：包含了作域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on=$listeners 传内部组件如上图所$attrs表没有继承数据的对象

34、，格式为属性名：属性值。Vue2.4提供了$attrs , $listeners 来传递数据与事件，跨级组件之间的通讯变得更简单。简单来说：$attrs与$listeners 是两个对象，$attrs 存放的是组件中绑定的 Props 属性，$listeners存放的是组件中绑定的原事件。5. provide / inject ：适于隔代组件通信祖先组件中通过 provider 来提供变量，然后在孙组件中通过 inject 来注变量。 provide / inject API 主要解决了跨级组件间的通信问题， 不过它的使场景，主要是组件获取上级组件的状态，跨级组件间建了种主动提供与依赖注的关系

35、。6. Vuex ：适于、隔代、兄弟组件通信。45.VuexVuex 是个专为 Vue.js 应程序开发的状态管理模式。每个 Vuex 应的核就是 store （仓库）。 store 基本上就是个容器，它包含着你的应中部分的状态 ( state )。Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发变化，那么相应的组件也会相应地得到效更新。改变 store 中的状态的唯途径就是显式地提交 ( commit ) mutation 。这样使得我们可以便地跟踪每个状态的变化。主要包括以下个模块：State ：定义了应状态的数据结构，可以在这设

36、置默认的初始状态。Getter ：允许组件从 Store 中获取数据， mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。store.getters.changePasswordMutation ：是唯更改 store 中状态的法，且必须是同步函数。this.$mit(edit,15)Action ：于提交 mutation ，不是直接变更状态，可以包含任意异步操作。this.$store.dispatch(aEdit,age:15)Module ：允许将单的 Store 拆分为多个 store 且同时保存在单的状态树中。46.虚拟 DOM 的实现原理

37、将DOM转化为Virtual DOM，个JSON对象，将耗费性能的DOM操作转化为JSON对象之间的较，减少DOM数重绘和重排的次数，可以提性能。他会较两个JSON中，同级之间Virtual DOM的区别，提取出需要更新的真实DOM操作。虚拟dom相当于在js和真实dom中间加了个缓存，利dom diff算法避免了没有必要的dom操作，从提性能。【具体实现步骤如下】 JavaScript 对象结构表 DOM 树的结构；然后这个树构建个真正的 DOM 树，插到档当中当状态变更的时候，重新构造棵新的对象树。然后新的树和旧的树进较，记录两棵树差异把2所记录的差异应到步骤1所构建的真正的DOM树上，视

38、图就更新了。【好处】通过classname或cssText次性修改样式, 个个改离线模式: 克隆要操作的结点, 操作后再与原始结点交换, 类似于虚拟DOM 避免频繁直接访问计算后的样式, 是先将信息保存下来绝对布局的DOM, 不会造成量reflow div不要嵌套太深, 不要超过六层 JavaScript 对象模拟真实的 DOM 树，对真实 DOM 进抽象； diff 算法 - 较两颗虚拟 DOM 树的差异；Pach 算法 - 将两个虚拟 DOM 对象的差异应到真正的 DOM 树。实现diff算法分为三部：（1） 将模板（HTML）转化为Render（json对象），有四个属性：tagName

39、, proporties, children, key。（2） diff.js中，将两棵tree进diff，node和property两个，同时记录个patchList，他是个维数组，每个元素记录了当前tree 的层级的修改类型【node的增删改，property的增删改，text的修改】以及具体的修改值【key，value】（3） patch.js中，将上的patchList记录的操作，遍历dom，逐层进对应的修改。47.组件中 data 为什么是个函数因为组件是来复的，且 JS 对象是引关系，如果组件中 data 是个对象，那么这样作域没有隔离，组件中的 data 属性值会相互影响，如果组

40、件中 data 选项是个函数，那么每个实例可以维护份被返回对象的独的拷贝，组件实例之间的 data 属性值不会互相影响； new Vue 的实例，是不会被复的，因此不存在引对象的问题。48.vue-router路由守卫（1） 全局前置守卫 beforeEach (to, from, next) 页登录判断，管理员权限判断（2） 路由独享守卫 beforeEnter（3） 组件内的守卫beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave a)清除计时器 b）提醒关闭前保存表单 c）提醒将跳转到外部站导航解析流程导航被触发。在失活的组件调 be

41、foreRouteLeave 守卫。调全局的 beforeEach 守卫。在重的组件调 beforeRouteUpdate 守卫 (2.2+)。在路由配置调 beforeEnter。解析异步路由组件。在被激活的组件调 beforeRouteEnter。调全局的 beforeResolve 守卫 (2.5+)。导航被确认。调全局的 afterEach 钩。触发 DOM 更新。调 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传。守卫法参数to: Route: 即将要进的标 路由对象from: Route: 当前导航正要离开的路由next:

42、 Function: 定要调该法来 resolve 这个钩。执效果依赖 next 法的调参数。next(): 进管道中的下个钩。如果全部钩执完了，则导航的状态就是 confirmed (确认的)。next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是户动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。next(/) 或者 next( path: / ): 跳转到个不同的地址。当前的导航被中断，然后进个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: home 之类的选项以及任何在 rou

43、ter-link 的 to prop 或 router.push 中的选项。next(error): (2.4.0+) 如果传 next 的参数是个 Error 实例，则导航会被终且该错误会被传递给 router.onError() 注册过的回调。49.深拷贝与浅拷贝深拷贝（1） JSON.stringify 把对象转换成字符串，再 JSON.parse 把字符串转换成新的对象。（2） Object.assign()拷贝当对象中只有级属性，没有级属性的时候，此法为深拷贝，但是对象中有对象的时候，此法，在级属性以后就是浅拷贝。（3） 通过jQuery的extend法实现深拷贝let obj2=$.extend(true,obj1);（4） lodash.cloneDeep()实现深拷贝50.数据防抖节流的法和场景防抖：般在搜索栏的动补全，节流：般在onResize，mouseMove，onScroll等频繁调的场景，频繁操作点赞，取消点赞当 Event loop 执完 Microtasks 后，会判断 document 是否需要更新。因为浏览器是