2023Web前端面试题及答案（二）
1、简述对BFC的理解，如何创建BFC及其作用
BFC--块格式化上下文（Block Formatting Context，BFC）是 Web 页面的可视化 CSS 渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。
创建 BFC 的条件：
- 根元素：body；
- 元素设置浮动：float 除 none 以外的值；
- 元素设置绝对定位：position (absolute、fixed)；
- display 值为：inline-block、table-cell、table-caption、flex 等；
- overflow 值为：hidden、auto、scroll；
BFC作用
- 防止外边距重叠。bfc导致的属于同一个bfc中的子元素的margin重叠(Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠)我们可以在div外面包裹一层容器，并触发该容器生成一个BFC。那么两个div便不属于同一个BFC，就不会发生margin重叠了。
- 清除浮动的影响：块级子元素浮动，如果块级父元素没有设置高度，其会有高度塌陷的情况发生。原因：子元素浮动后，均开启了BFC，父元素不会被子元素撑开。解决方法：计算BFC的高度时，浮动元素也参与计算。所以只要将父容器设置为bfc就可以把子元素包含进去：这个容器将包含浮动的子元素，它的高度将扩展到可以包含它的子元素，所以在这个BFC中这些元素将会回到页面的常规文档流。
- 防止文字环绕
2、Javascript脚本延迟加载的方式有哪些?
1、异步加载（Asynchronous Loading）
通过添加“async”属性来异步加载JavaScript文件，从而避免在页面加载期间阻塞其他资源的下载和渲染。异步加载不保证脚本的执行顺序，但适用于独立的组件和工具库。
2、延迟加载（Deferred Loading）
通过添加“defer”属性来延迟加载JavaScript文件，以确保页面上的其他资源被优先加载和渲染。与异步加载不同，延迟加载保证脚本按照其出现的顺序执行，因此更适用于需要按顺序加载的组件和依赖库。
3、动态加载（Dynamic Loading）
通过JavaScript代码动态地添加或移除HTML标记来加载或卸载脚本文件。这种方式适用于需要根据用户行为或业务需求来加载和卸载组件和功能的情况。
4、懒加载（Lazy Loading）
在需要时再加载JavaScript文件，而不是在页面初始加载时加载。懒加载可以减少初始页面的大小和加载时间，并优化用户体验。通常懒加载适用于图片、视频、广告和一些非关键的JavaScript代码。
3、用5实现随机选取10~100之间的10个数字，存入一个数组，并且排序
function randomNub(arr,len,min,max){
//如果给的长度大于取值范围，则超出提示
if(len>=(max-min)){
return "超过"+min+"-"+max+"之间的个数范围"+(max-min-1)+"个的总数";
}
//从小到大排序，实现该数组的降序排列
if(arr.length>=len){
arr.sort(function(a,b){
return a-b;
});
return arr;
}
//定义当前的数字
var nowNub=parseInt(Math.random()*(max-min-1))+(min+1);
//当生产的随机数==数组中的一个数字时，
for(var j=0;j4、JS实现一个深拷贝
深拷贝：会构造一个新的复合数组或对象，遇到引用所指向的引用数据类型会继续执行拷贝。
浅拷贝：指只对对象或数组的第一层进行复制，其他层级复制的是所存储的内存地址。
方式一：通过JSON对象的stringify和parse方法实现 let obj = { name: '小红', age: 13, arr: [3, 4], } let obj1= JSON.parse( JSON.stringify(obj) ) 方式二：jquery的extend()方法进行深拷贝（推荐在JQ中使用） 仅适用于JQuery构建的项目。JQuery自身携带的extend let newObj = $.extend(true, {}, obj); //拷贝完成obj.b = 20;console.log(newObj.b); //输出 4
5、请从“2023-09-15T09:10:23 Europe/Paris”提取出结果["2023","09","15","09","10","23"]
let str = '2023-09-15T09:10:23 Europe/Paris';
let arr2 = str.match( /\d{1,}/g);
// \d:返回的是数字
// {1,} 至少返回的是由一个长度的数据6、实现一个bind函数
官网的解释：bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。
- 1、bind是Function原型链中的Function.prototype的一个属性，它是一个函数，修改this指向，合并参数传递给原函数，返回值是一个新的函数。
- 2、bind返回的函数可以通过new调用，这时提供的this的参数被忽略，指向了new生成的全新对象。内部模拟实现了new操作符。
实现：
①
首先实现最简单的
fn.bind(context)， 前面提到bind函数会返回一个函数，这个函数的this就是你所传入的context，那么我们可以返回一个使用call调用的函数，但是这里需要注意的是，因为本身bind的调用方式是fn.bind(context)，那么在bind函数内部实际上存在一个this，这个this是fn，不要和context给搞混了:
②实现
fn.bind(context, p1, p2): 这个需求很简单，我们只需要将bind函数接收的参数中的除第一位的参数全部传入到内部返回的函数即可，如下
③
实现
fn.bind(context, p1, p2)(p3, p4)，这个需求和第二个需求类似，只是接收参数的位置变成了bind返回出来的函数，那么只需要将返回出来的函数的参数也传递进去this.call里面就好了:
7、描述 Eventloop 机制
event loop 是一种异步执行代码的方式，它能够使JavaScript在单线程的执行环境中处理并发的事件。当遇到异步事件时会被放到事件队列EventQueue中等待执行，并在适当时被Eventloop取出并执行，EventLoop是一个持续运行的进程，会不停的检查事件队列中是否由事件需要执行，如果有就会取出事件执行，直到事件队列中没有事件。
事件循环机制帮助我们能够编写高效的异步代码，不用担心线程同步、锁的问题，因为Javascript引擎会自动处理他们。
8、简述MVC、MVP、MVVM 的区别
MVC全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。
MVP模式 ：Model-View-Presenter ；MVP 是从经典的模式MVC演变而来，它们的基本思想有相通的地方Controller/Presenter负责逻辑的处理，Model提供数据，View负责显示。
MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。微软的WPF带来了新的技术体验，如Silverlight、音频、视频、3D、动画……，这导致了软件UI层更加细节化、可定制化。同时，在技术层面，WPF也带来了 诸如Binding、Dependency Property、Routed Events、Command、DataTemplate、ControlTemplate等新特性。MVVM（Model-View-ViewModel）框架的由来便是MVP（Model-View-Presenter）模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。它立足于原有MVP框架并且把WPF的新特性糅合进去，以应对客户日益复杂的需求变化。
9、描述父子组件的生命周期执行顺序
一、加载渲染过程
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
二、子组件更新过程
父beforeUpdate->子beforeUpdate->子updated->父updated
三、父组件更新过程
父beforeUpdate->父updated
四、销毁过程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
10、描述Vue双向数据绑定的原理
双向数据绑定的原理：采用“数据劫持”结合“发布者-订阅者”模式的方式，通过“Object.defineProperty()”方法来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
实现过程
我们已经知道实现数据的双向绑定，首先要对数据进行劫持监听，所以我们需要设置一个监听器Observer，用来监听所有属性。如果属性发生变化了，就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个，所以我们需要有一个消息订阅器Dep来专门收集这些订阅者，然后在监听器Observer和订阅者Watcher之间进行统一管理的。接着，我们还需要有一个指令解析器Compile，对每个节点元素进行扫描和解析，将相关指令对应初始化成一个订阅者Watcher，并替换模板数据或者绑定相应的函数，此时当订阅者Watcher接收到相应属性的变化，就会执行对应的更新函数，从而更新视图。因此接下去我们执行以下3个步骤，实现数据的双向绑定：
1.实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。
2.实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。
3.实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。
11、vue2中如何监测数组变化?
在Vue 2中，底层是通过重写数组的原型方法来实现对数组变化的监听。
具体来说，当调用数组的变异方法时（如push、pop、shift、unshift、splice、sort和reverse），Vue会执行以下步骤：
调用原始的数组方法，对数组进行相应的变异操作。
在执行变异操作后，Vue会触发一个通知，通知相关的依赖（如视图）进行更新。
在通知的过程中，Vue会遍历数组的所有观察者（Observer）并调用它们的更新方法，以更新相关的依赖。
通过这种方式，Vue能够实时地捕获数组的变化，并及时更新相关的依赖，从而实现对数组的监听和响应。
需要注意的是，Vue 2只能监听到通过变异方法对数组进行的变化，而无法监听到直接修改数组某个元素或使用非变异方法（如filter、concat等）对数组进行的变化。如果需要监听这些非变异的数组变化，可以使用watch选项或$watch方法来手动监听数组的变化。
12、vue-router 怎么定义动态路由?怎么获取传过来的动态参数?
定义：在router目录下的index.js文件中，对path属性加上/:id。
使用router对象的params.id 例如 : this.$route.params.id
获取参数：$route 是 “路由信息对象”，包括 path，params，hash，query，fullPath，matched，name 等路由信息参数。
13、描述Vue中NextTick 是做什么的?
官方定义：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中
使用
Vue.nextTick()是为了可以获取更新后的DOM 。
触发时机：在同一事件循环中的数据变化后，DOM完成更新，立即执行Vue.nextTick()的回调。
