前端面试题（一）答案版
面试形式：线下面试：时长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 库仍然是一个不错的选择,它可以大大提高开发效率。