顺丰前端面试题

chinasll

· 1、介绍下 Set、Map 的区别？

o 应用场景 Set 用于数据重组，Map 用于数据储存

o Set：

§ 成员不能重复

§ 只有键值没有键名，类似数组

§ 可以遍历，方法有 add, delete,has

o Map:

§ 本质上是健值对的集合，类似集合

§ 可以遍历，可以跟各种数据格式转换

· 2、Promise 有几种状态，什么时候会进入 catch？

o Promise 有几种状态

§ 三个状态：pending、fulfilled、reject

§ 两个过程：padding -> fulfilled、padding -> rejected

o Promise 什么时候会进入 catch

§ 当 pending 为 rejectd 时，会进入 catch

· 3、什么是闭包？

o 闭包就是能够读取其他函数内部变量的函数。例如在 javascript 中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解成“定义在一个函数内部的函数”。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。

· 4、简单说说 js 中的继承？

o 继承有以下六种方法

§ 1、原型链继承 JavaScript 实现继承的基本思想：通过原型将一个引用类型继承另一个引用类型的属性和方法

§ 2、借用构造函数继承(伪造对象或经典继承) JavaScript 实现继承的基本思想：在子类构造函数内部调用超类型构造函数。 通过使用 apply()和 call()方法可以在新创建的子类对象上执行构造函数

§ 3、组合继承(原型+借用构造)(伪经典继承) JavaScript 实现继承的基本思想：将原型链和借用构造函数的技术组合在一块，从而发挥两者之长的一种继承模式将原型链和借用构造函数的技术组合到一起，从而取长补短发挥两者长处的一种继承模式

§ 4、型式继承 JavaScript 实现继承的基本思想：借助原型可以基于已有的对象创建新对象，同时还不必须因此创建自定义的类型

§ 5、寄生式继承 JavaScript 实现继承的基本思想：创建一个仅用于封装继承过程的函数，该 函数在内部以某种方式来增强对象，最后再像真正是它做了所有工作一样返回对象。寄生式继承是原型式继承的加强版

§ 6、寄生组合式继承 JavaScript 实现继承的基本思想：通过借用函数来继承属性，通过原型链的混成形式来继承方法

· 5、介绍 this 各种情况？

o 1、以函数形式调用时，this 永远都是 window

o 2、以方法的形式调用时，this 是调用方法的对象

o 3、以构造函数的形式调用时，this 是新创建的那个对象

o 4、使用 call 和 apply 调用时，this 是指定的那个对象

o 5、箭头函数：箭头函数的 this 看外层是否有函数如果有，外层函数的 this 就是内部箭头函数的 this如果没有，就是 window

o 6、特殊情况：通常意义上 this 指针指向为最后调用它的对象。这里需要注意的一点就是如果返回值是一个对象，那么 this 指向的就是那个返回的对象，如果返回值不是一个对象那么this 还是指向函数的实例

· 6、Call 和 apply，bind 的区别？

o call、apply和bind都是用于改变方法中this指向的。

o call调用 将方法中的this指向call中第一个参数，当第一个参数为null、undefined时，默认指向window，call中第一个参数之后是要传递给方法的参数列表。

o apply与call相似，不同之处在于传递给方法的参数形式不一致，apply传递给方法的参数是数组的形式。

o call和apply在改变方法的this指向时，会同时执行方法；而bind不会执行方法，而是返回改变this指向后的新方法。

· 7、请详细说下你对 vue 生命周期的理解？

o 总共分为 8 个阶段创建前/后，载入前/后，更新前/后，销毁前/后。创建前/后：

o beforeCreate（创建前）

§ 在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选项对象还未创建，el 和 data 并未初始化，因此无法访问methods， data， computed等上的方法和数据。

o created（创建后）

§ 实例已经创建完成之后被调用，在这一步，实例已完成以下配置：数据观测、属性和方法的运算，watch/event事件回调，完成了data 数据的初始化，el没有。 然而，挂在阶段还没有开始, $el属性目前不可见，这是一个常用的生命周期，因为你可以调用methods中的方法，改变data中的数据，并且修改可以通过vue的响应式绑定体现在页面上，，获取computed中的计算属性等等，通常我们可以在这里对实例进行预处理，也有一些童鞋喜欢在这里发ajax请求，值得注意的是，这个周期中是没有什么方法来对实例化过程进行拦截的，因此假如有某些数据必须获取才允许进入页面的话，并不适合在这个方法发请求，建议在组件路由钩子beforeRouteEnter中完成。

o beforeMount（载入前）

§ 挂在开始之前被调用，相关的render函数首次被调用（虚拟DOM），实例已完成以下的配置： 编译模板，把data里面的数据和模板生成html，完成了el和data 初始化，注意此时还没有挂在html到页面上。

o mounted（载入后）

§ 挂在完成，也就是模板中的HTML渲染到HTML页面中，此时一般可以做一些ajax操作，mounted只会执行一次。

o beforeUpdate（更新前）

§ 在数据更新之前被调用，发生在虚拟DOM重新渲染和打补丁之前，可以在该钩子中进一步地更改状态，不会触发附加地重渲染过程

o updated（更新后）

§ 在由于数据更改导致地虚拟DOM重新渲染和打补丁只会调用，调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作，然后在大多是情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环，该钩子在服务器端渲染期间不被调用

o beforeDestroy（销毁前）

§ 在实例销毁之前调用，实例仍然完全可用，这一步还可以用this来获取实例，一般在这一步做一些重置的操作，比如清除掉组件中的定时器 和 监听的dom事件

o destroyed（销毁后）

§ 在实例销毁之后调用，调用后，所以的事件监听器会被移出，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用

· 8、vue-router 有哪几种导航钩子？

o 全局前置守卫 router.beforeEach

o 全局解析守卫 router.beforeResolve

o 全局后置钩子 router.afterEach

o 路由独享的守卫 beforeEnter

o 组件内的守卫 beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

· 9、<keep-alive>的作用是什么？

o 作用：用于保留组件状态或避免重新渲染（缓存的作用）

§ 比如：当一个目录页面与一个详情页面，用户经常：打开目录页面=>进入详情页面=>返回目录页面=>打开详情页面，这样目录页面就是一个使用频率很高的页面，那么就可以对目录组件使用<keep-alive></keep-alive>进行缓存，这样用户每次返回目录时，都能从缓存中快速渲染，而不用重新渲染。

o 该标签有两个属性include与exclude：

§ include：字符串或者正则表达式。只有匹配的组件会被缓存

§ exclude：字符串或者正则表达式。任何匹配的组件都不会被缓存。

§ 以上两个参数可以是逗号分隔字符串、正则表达式或一个数组，include="a, b"、include="/a|b/"、include="['a', 'b']"；

§ 匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)，匿名组件不能被匹配。

· 10、v-if和v-show的区别及使用场景

o 区别：

§ 1.实现原理：v-if是通过控制dom节点的存在与否来控制元素的显隐；v-show是通过设置DOM元素的display样式，block为显示，none为隐藏；

§ 2.编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；

§ 3.编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载); v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；

§ 4.性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；

o 使用场景：

§ 基于以上区别，因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

o v-if判断是否加载，可以减轻服务器的压力，在需要时加载,但有更高的切换开销;v-show调整DOM元素的CSS的dispaly属性，可以使客户端操作更加流畅，但有更高的初始渲染开销。如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。