前端面试题（一）答案版

面试形式：线下面试：时长60分钟

面试过程：填写个人信息->笔记题->HR根据前面2份资料提问->技术面试（见如下面试题）

面试官：项目负责人

公司背景：教育培训公司，项目给本公司服务，技术人员人数只有个位数

面试官提问（面试题）：

1、var和let的区别？

答：（1）变量作用域:var具有函数作用域或全局作用域,let具有块级作用域

（2）变量提升:var会被提升至作用域顶部,let不会被提升

（3）重复声明:var可以在同一作用域内重复声明,let会报错

（4）暂时性死区:let声明的变量在声明之前无法访问,var声明的变量在声明之前可以访问undefined

（5）全局对象属性:var声明的变量会成为全局对象的属性,let声明的变量不会

2、style标签中的样式如何只对这一个组件生效？

答：（1）在style标签上添加scoped属性,这样样式就只会应用于当前组件

（2）使用CSS的Shadow DOM特性或CSS Modules来实现样式的局部作用域

3、CSS3新增伪类选择器？

答：（1）:root选择文档的根元素

（2）:nth-child(n)选择父元素中的第n个子元素

（3）:nth-of-type(n)选择父元素中指定类型的第n个子元素

（4）:last-child选择父元素中的最后一个子元素

（5）:last-of-type选择父元素中指定类型的最后一个子元素

（6）:only-child选择父元素中唯一的子元素

（7）:only-of-type选择父元素中指定类型的唯一子元素

（8）:empty选择没有子元素(包括文本节点)的元素

4、v-show和v-if的区别？

答：（1）v-if：是"真实的"条件渲染,会根据表达式的值来决定是否渲染元素

（2）v-show：只是简单地切换元素的CSS属性display,元素始终会被渲染

（3）性能：v-if有更高的切换消耗,v-show有更高的初始渲染消耗

5、微信小程序生命周期？

答：（1）全局生命周期: onLaunch、onShow、onHide、onError、onPageNotFound

（2）页面生命周期: onLoad、onShow、onReady、onHide、onUnload、onPullDownRefresh、onReachBottom、onShareAppMessage、onTabItemTap

6、 微信小程序文件类型？

答：WXML(页面结构)、WXSS(页面样式)、JS(页面逻辑)、JSON(页面配置)、图片、音频、视频等资源文件

7、如何理解MVVM？

答：MVVM是Model-View-ViewModel的缩写：

（1）Model代表数据模型

（2）View代表UI组件

（3）ViewModel作为Model和View之间的桥梁，负责监听Model数据的变化并更新View,也负责相应View的操作并更新Model

（4）这种模式将业务逻辑从UI中分离,可以实现双向数据绑定,提高代码的可维护性

8、vue中的常用指令？

答：（1）v-if、v-else、v-show等条件渲染指令

（2）v-for用于列表渲染

（3）v-bind用于绑定属性

（4）v-on用于事件监听

（5）v-model用于双向数据绑定

9、vue中常见修饰符？

答：（1）.prevent修饰符可以阻止元素默认行为

（2）.stop修饰符可以阻止事件冒泡

（3）.capture修饰符可以使用事件捕获模式

（4）.self修饰符只当事件在该元素本身(而不是子元素)触发时触发回调

10、不使用border=1px，如何在浏览器的标准模式和怪异模式一样的效果？

答：可以使用box-sizing: border-box属性,这样元素的宽高就会包括边框和内边距在内

11、cookie和session区别（跟踪用户状态的机制）？

答：（1）Cookie是保存在客户端(浏览器)的小型文本文件,用于保存一些会话信息

（2）Session是保存在服务端的会话信息,通过sessionId在客户端和服务端之间传递

（3）Cookie数据存放在客户端,Session数据存放在服务端,相对来说Session更安全

12、实现动画的几种方式？

答：（1）CSS动画: transition、animation

（2）JS动画: requestAnimationFrame、定时器

（3）SVG动画

（4）Canvas动画

13、[1,2,3]变成"1,2,3"有几种方法？

答：（1）使用join()方法: [1,2,3].join(',')

（2）使用toString()方法: [1,2,3].toString()

（3）使用模板字符串: ``${[1,2,3]}`

14、音频标签：video标签？

答：（1）audio>标签用于嵌入音频内容

（2）<video>标签用于嵌入视频内容

（3）两者都支持常见的媒体格式,如MP3、MP4、WebM等

15、画一颗五角星有几种方法？

答：（1）使用CSS的clip-path属性: clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);

（2）使用SVG的<polygon>元素: <polygon points="50,10 65,80 20,35 80,35 35,80"/>

（3）使用Canvas API绘制多边形

16、跨域是什么？有几种解决方法？

答：（1）跨域是指一个域下的网络应用,不能访问另一个域下的资源

（2）解决方法包括:JSONP、跨域资源共享(CORS)、反向代理、WebSocket、nginx配置等

17、cookies优缺点？

答：（1）优点:用于会话管理、个性化设置等

（2）缺点:数据容量小(4KB)、不安全(可被篡改)、跨域限制

18、http几次握手？

答：三次握手:客户端发SYN包 -> 服务端发SYN-ACK包 -> 客户端发ACK包

19、JQUERY熟悉吗？单页面开发需要使用JQuery吗？

答：对于单页面开发来说,是否需要使用 jQuery 就要看具体的项目和技术选型了。如果你选用了 React、Vue.js 或 Angular 等 JavaScript 框架,通常情况下是不需要额外引入 jQuery 的。这些框架提供了比 jQuery 更加强大和灵活的DOM操作和事件处理能力。但是,如果你的项目没有使用上述主流的 JavaScript 框架,而是采用了一种更传统的前端开发方式,那么引入 jQuery 库仍然是一个不错的选择,它可以大大提高开发效率。