2023.03.09前端面试

面试7k无锡前端，1-3年工作经验

分笔试和面试

笔试

1.JS的8种数据类型。

Number、String、Boolean、undefined、object、Null、bigInt、Symbol

• ES6 中新增了一种 Symbol 。这种类型的对象永不相等，即始创建的时候传入相同的值，可以解决属性名冲突的问题，做为标记。
• 谷歌67版本中还出现了一种 bigInt。是指安全存储、操作大整数。

2.get和post的区别。

        get：        缓存、请求长度有限，会被历史保存记录，不修改资源。

        post：      安全、大数据、更多编码类型。

        

3.watch和computed的区别。

• watch 主要用于监听特定属性的变化，以触发对应的回调函数，适用于处理一些异步或与后端交互的操作。
• computed 主要用于根据组件的 data 中的属性计算出一个新的值，它会自动缓存和监听依赖的属性，适用于在模板中展示计算后的结果。

4.防抖和节流的理解。

        防抖是指在事件出发n秒后再执行回调，如果在n秒内再次被触发，则重新计算时间。（在触发事件之后，在下次触发之前，中间的间隔时间必须要超过设置事件才会结束。）

        运用场景

• scroll事件滚动触发；
• 搜索框输入查询；
• 表单验证；
• 按钮提交事件；
• 浏览器窗口缩放，resize事件；        

        节流是指需要持续触发一个事件，设置为n秒执行一次。

• DOM元素的拖拽功能实现；
• 计算鼠标移动距离；
• 监听scroll事件；

5.写一个瀑布流布局。

6.sessionStorage和loaclStorage还有cookie的区别。

• sessionStorage仅在当前会话下有效，关闭当前会话或者浏览器后就清除。除了有效情况意外以外，其余都和localStorage一样
• localStorage除非被清除否则永远保存，大小5MB，仅在浏览器中保存，不参与和服务器的通信，原生借口可以接受，亦可在此封装来对Object和Array有更好的支持
• Cookie一般由服务器生成，可以设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效，大小4K。每次都会携带在HTTP头，存不了太多东西。需要程序员自己封装。

7.响应式布局是怎么实现的。

rem，百分比，flex弹性布局，用vh和vm布局。

8.let、const、var的区别。

• var 声明的变量存在变量提升，在代码块执行前就已经存在，并且值为 undefined。
• let 和 const 声明的变量不存在变量提升，在代码块执行前不存在，并且在代码块内部作用域内有效。
• let 声明的变量可以被重新赋值，而 const 声明的变量不能被重新赋值。

面试

1.Vue的生命周期。

Vue生命周期指的是组件在创建、挂载、更新、销毁等不同阶段，Vue会自动调用不同的钩子函数。Vue生命周期分为8个阶段：

1. beforeCreate：组件实例刚刚创建，此时组件的数据和事件都还未初始化
2. created：组件数据和事件已经初始化完成，但DOM还未渲染
3. beforeMount：组件即将被挂载到页面上，此时组件的模板已经编译完成，但还未生成真实的DOM节点
4. mounted：组件已经挂载到页面上，此时组件的DOM节点已经生成并渲染完成
5. beforeUpdate：组件数据发生变化，但还未更新DOM节点
6. updated：组件数据已经更新，DOM节点也已经重新渲染完成
7. beforeDestroy：组件即将被销毁，但此时组件还可以访问到自身的数据和方法
8. destroyed：组件已经被销毁，此时组件无法再访问到自身的数据和方法

在每个生命周期阶段中，Vue提供了一些钩子函数，开发者可以在这些钩子函数中进行自定义的操作，以满足业务需求。

2.Vuex是什么？以及每个属性的功能。

Vuex的五个核心概念：state、getters、mutations、actions、modules

1. state: vuex的基本数据，用来存储变量；
2. getters: 从基本数据（state）派生的数据，相当于state的计算属性；
3. mutations: 提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个mutation 都有一个字符串的事件类型（type）和一个回调函数（handler）。
   回调函数就是我们实际进行状态更改的地方，并且它会接受 state作为第一个参数，提交载荷作为第二个参数。
4. action: 和mutation的功能大致相同，不同之处在于 ①Action提交的是mutation，而不是直接变更状态，②Action可以包含任意异步操作。
5. modules: 模块化vuex。

3.v-if和v-show的区别是什么。

V-if 指令用于条件渲染，它会根据表达式的值的真假来决定是否渲染元素。如果表达式的值为 false，则该元素不会被渲染并且也不会保留在 DOM 中。

V-show 指令用于条件展示，它不会从 DOM 中删除元素，只是简单地使用 CSS 属性 display 控制元素的显示和隐藏。

总的来说，V-if 更适用于在运行时动态添加/删除元素，而 V-show 更适用于频繁切换显示和隐藏。

4.闭包的理解。

        闭包就是能够读取其他函数内部变量的函数

        闭包就是一个函数内部返回一个函数

        好处：​​​​​​​

                可以读取函数内部的变量

                将变量始终保持在内存中

                可以封装对象的私有属性和私有方法

        坏处：

                比较耗费内存、使用不当会造成内存溢出的问题

5.都做过什么类型的项目。

做过的项目挺多的，Taro开发过微信小程序，微信原声开发过微信小程序，Vue，uniapp开发过app、OA系统、管理系统。前后经历过10个大大小小的项目。

6.之前的团队是什么形式的样子。

7.有没有独立开发过一整套项目。

8.项目中扮演角色，或者怎么对接。

根据设计图做百分百还原，数据对不上就和设计与后端讨论，如果设计图只有大概，会跟设计讨论比较多。

9.聊一聊你做没做过项目优化。

• 区别使用v-if和v-show。
• computed和watch区分场景使用。
• 对象层级不能深，会影响性能。
• v-for和v-if尽可能不能放一起，并且v-for必须带key。
• 图片懒加载。
• 路由懒加载。

10.之后你想怎么发展自己，有没有明确的目标。

想做好前端，先做好眼下的事，再慢慢往设计和项目经理走。