前端面试题（二）

1、说一下盒模型

CSS盒子模型就是在网页设计中经常用到的一种思维模型，是CSS布局的基石，主要规定了元素是如何显示元素间相互关系。定义所有元素都可以有像盒子一样的平面空间和外形。包含内容区、填充、边框和外边距，这就是盒模型。

作用：网页元素是如何显示及元素间相互关系的。

盒模型的组成：content（内容区）+padding（填充区）+border（边框区）+margin（外边界区）

网页中经常用到以下四个属性：

1. Content：元素的宽和高，内容，也就是元素的width、height
2. Border ：盒子的边缘，盒子边缘或盒子边缘的厚度
3. Padding ：在盒子里面，盒子和内容之间，显示在盒子和内容之间的空白区，补白、内填充或叫内边距
4. Margin ： 外边距

特点1：加了padding值后，会把元素原本有的大小撑大，如果让元素原本的大小不变，需要在元素的宽高上减掉所加的padding值。

特点2：padding属性对背景图片不起作用的，也可以说背景图片的位置不受padding的影响。

特点3：背景色会延展到padding区域。

2、两个异步请求数据操作怎么合并

当需要将两个异步请求接口返回的值拼接成一个数据时，如果将两个异步请求并列写，则会出现一个结果有值，一个结果没有值，究其原因，由于这两个请求是异步的，我们并不知道哪个请求会先得到结果，在我们去打印拼接的值时，就会出现undefined。所以，我们需要将一个异步请求放在另一个异步请求的回调当中，等一个请求结束就去调用另一个请求，这样我们才能拿到完整的拼接后的值。

3、v-model是谁的语法糖

vue.js

v-model 是 Vue.js 中的语法糖，它用于实现双向数据绑定。这个特性使得开发者可以在表单元素上使用 `v-model` 指令来同时更新模型（组件的数据属性）和视图（HTML 中的输入值）

4、query和params的区别

1. 用法上的区别：

   • `query` 参数通常用于在 URL 中拼接额外的查询参数，这些参数会在浏览器地址栏中显示，类似于使用 `GET` 请求传递的参数。
   • `params` 参数则用于在路由配置中传递参数，这些参数不会在浏览器地址栏中显示，类似于使用 `POST` 请求传递的参数。

2. 刷新页面时的状态：

   • 当页面刷新时，`query` 参数不会丢失，它们会保留在 URL 中。
   • `params` 参数在刷新页面时会丢失，因为它们是路由的一部分，而不是 URL 的一部分。

3. 接收参数的方式：

   • 接收 `query` 参数可以使用 `this.$route.query.name`。
   • 接收 `params` 参数可以使用 `this.$route.params.name`。

4. 在 Ajax请求中的使用：

   • `query` 参数在 Ajax 请求中相当于 `GET` 请求中的参数。
   • `params` 参数在 Ajax 请求中相当于 `POST` 请求中的参数。

5、vue怎么获取DOM

在Vue中，可以通过$refs属性来访问DOM元素。

首先，需要为目标DOM元素添加ref属性，然后，就可以使用this.$refs.myElement来获取该DOM元素了。

6、flex布局怎么把元素搞到右上角

1. 将父元素设置为flex容器，并设置justify-content属性为flex-end，这将使子元素在水平方向上靠右对齐。
2. 同时，设置align-items属性为flex-start，这将使子元素在垂直方向上靠上对齐。

7、promise有几种状态，会不会改变

1.pending（初始状态）、fulfilled（操作成功）、rejected（操作失败）

2.状态的转变是单一的，一经转变不会再变

8、async、await解决什么问题

async/await 的作用有以下几点：

简化异步代码的编写：async/await 让异步代码的编写更像是同步代码的写法，提供了更直观、更易读的代码结构。

解决回调地狱问题：通过使用 async/await，可以避免回调函数的嵌套和层层传递，使代码结构更加清晰。

错误处理更方便：使用 try/catch 结构可以捕获 async 函数内部发生的异常，方便进行错误处理。

9、let和const的区别

• 使用 let 声明的变量可以被重新赋值，即可以多次赋予不同的值。
• 使用 const 声明的变量是一个常量，一旦被赋值后就不能再被修改。尝试重新赋值一个 const 声明的变量会导致语法错误。

10、const定义对象里面的属性值能不能改

对于const 声明的对象，对象的属性是可以被修改的。但是，不能将const 变量重新赋值为一个新的对象。

11、常见状态码

• 1xx（信息类）。这类状态码表示请求正在处理中，如100（继续）表示服务器已收到请求的第一部分，正在等待其余部分。

• 2xx（成功类）。这类状态码表示请求成功处理，如200（成功）表示服务器已成功处理了请求，通常返回网页内容。

• 3xx（重定向类）。这类状态码表示要完成请求，需要进一步操作，如301（永久移动）表示资源永久地移动到了另一个URL。

• 4xx（客户端错误类）。这类状态码表示请求可能出错，妨碍了服务器的处理，如400（错误请求）表示服务器不理解请求的语法。

• 5xx（服务器错误类）。这类状态码表示服务器在尝试处理请求时发生内部错误，如500（服务器内部错误）表示服务器遇到错误，无法完成请求。

12、对同步和异步的理解

同步与异步是指访问数据的机制，同步一般指主动请求并等待IO操作完成的方式。

异步则指主动请求数据后便可以继续处理其它任务，随后等待IO操作完毕的通知。

同步和异步最大的区别就在于：同步需要等待，异步不需要等待。

13、常见的宏任务、微任务

宏任务：

1. script 脚本的执行：当浏览器加载并执行HTML页面中的JavaScript代码时，会按照代码的顺序依次执行这些宏任务。
2. setTimeout, setInterval, setImmediate 一类的定时事件：这些定时器会在指定的时间后触发，并执行其中的宏任务。
3. I/O 操作：如网络请求、文件操作等，这些操作通常需要较长时间来完成，它们会在完成后触发相应的宏任务。
4. UI 渲染：如DOM元素的添加、删除或修改等，这些操作会影响页面的显示，它们会在完成后触发相应的宏任务。

微任务：

1. promise 的回调：当promise被resolve或reject时，会执行其then或catch方法中的微任务。
2. node 中的 process.nextTick：在node环境中，这个方法会在下一个宏任务队列中添加一个微任务。
3. 对 Dom 变化监听的 MutationObserver：当DOM元素发生变化时，MutationObserver会执行其回调函数中的微任务。
4. process.nextTick、MutationObserver、Promise.then catch finally：这些都是在当前宏任务执行完毕后，立即执行的微任务。

当一个宏任务队列中的任务全部执行完后，会查看是否有微任务队列，如果有就会优先执行微任务队列中的所有任务，如果没有就查看是否有宏任务队列。微任务队列上创建的微任务，仍会阻碍后方将要执行的宏任务队列。由微任务创建的宏任务，会被丢在异步宏任务队列中执行。

14、怎么判断两个数组相等

1. 循环比较
2. toString方法
3. join方法
4. JSON.stringify

15、es6遍历数组的方法

• forEach
• map
• filter
• some
• every
• reduce

16、前端怎么给数据加密

• Base64加密
• MD5加密
• SHA-1加密
• 编码解码加密

17、两个html文件怎么传值

1. URL参数（Query String）：可以使用URL查询字符串来传递数据。在第二个页面的URL后添加?号，然后按照key=value的格式添加需要传递的数据。例如：http://example.com/page2?name=John&age=30。在第二个页面中，可以使用JavaScript或服务器端语言获取这些参数并进行处理。
2. Cookie：Cookie是存储在客户端的小型文本文件，可以保存少量的信息。在第一个页面设置cookie，然后在第二个页面中读取该cookie。
3. LocalStorage / SessionStorage：LocalStorage和SessionStorage提供了更大容量的持久化存储空间，可以在多个页面之间共享数据。
4. AJAX请求：可以使用AJAX技术发送HTTP请求，将数据作为请求体发送到目标页面，并接收返回结果。