本文介绍了CSS盒模型的基本概念及其在网页布局中的作用，探讨了如何合并异步请求、Vue的v-model语法糖、query和params的区别、Vue获取DOM的方法，以及flex布局和Promise的相关知识。此外，还讲述了let/const的区别、同步/异步理解、数组比较和前端数据处理方法。
1、说一下盒模型
CSS盒子模型就是在网页设计中经常用到的一种思维模型，是CSS布局的基石，主要规定了元素是如何显示元素间相互关系。定义所有元素都可以有像盒子一样的平面空间和外形。包含内容区、填充、边框和外边距，这就是盒模型。
作用：网页元素是如何显示及元素间相互关系的。
盒模型的组成：content（内容区）+padding（填充区）+border（边框区）+margin（外边界区）
网页中经常用到以下四个属性：
- Content：元素的宽和高，内容，也就是元素的width、height
- Border ：盒子的边缘，盒子边缘或盒子边缘的厚度
- Padding ：在盒子里面，盒子和内容之间，显示在盒子和内容之间的空白区，补白、内填充或叫内边距
- 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的区别
-
用法上的区别：
- `query` 参数通常用于在 URL 中拼接额外的查询参数，这些参数会在浏览器地址栏中显示，类似于使用 `GET` 请求传递的参数。
- `params` 参数则用于在路由配置中传递参数，这些参数不会在浏览器地址栏中显示，类似于使用 `POST` 请求传递的参数。
-
刷新页面时的状态：
- 当页面刷新时，`query` 参数不会丢失，它们会保留在 URL 中。
- `params` 参数在刷新页面时会丢失，因为它们是路由的一部分，而不是 URL 的一部分。
-
接收参数的方式：
- 接收 `query` 参数可以使用 `this.$route.query.name`。
- 接收 `params` 参数可以使用 `this.$route.params.name`。
-
在 Ajax请求中的使用：
- `query` 参数在 Ajax 请求中相当于 `GET` 请求中的参数。
- `params` 参数在 Ajax 请求中相当于 `POST` 请求中的参数。
5、vue怎么获取DOM
在Vue中，可以通过$refs属性来访问DOM元素。
首先，需要为目标DOM元素添加ref属性，然后，就可以使用this.$refs.myElement来获取该DOM元素了。
6、flex布局怎么把元素搞到右上角
- 将父元素设置为flex容器，并设置
justify-content属性为flex-end，这将使子元素在水平方向上靠右对齐。 - 同时，设置
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、常见的宏任务、微任务
宏任务：
- script 脚本的执行：当浏览器加载并执行HTML页面中的JavaScript代码时，会按照代码的顺序依次执行这些宏任务。
- setTimeout, setInterval, setImmediate 一类的定时事件：这些定时器会在指定的时间后触发，并执行其中的宏任务。
- I/O 操作：如网络请求、文件操作等，这些操作通常需要较长时间来完成，它们会在完成后触发相应的宏任务。
- UI 渲染：如DOM元素的添加、删除或修改等，这些操作会影响页面的显示，它们会在完成后触发相应的宏任务。
微任务：
- promise 的回调：当promise被resolve或reject时，会执行其then或catch方法中的微任务。
- node 中的 process.nextTick：在node环境中，这个方法会在下一个宏任务队列中添加一个微任务。
- 对 Dom 变化监听的 MutationObserver：当DOM元素发生变化时，MutationObserver会执行其回调函数中的微任务。
- process.nextTick、MutationObserver、Promise.then catch finally：这些都是在当前宏任务执行完毕后，立即执行的微任务。
当一个宏任务队列中的任务全部执行完后，会查看是否有微任务队列，如果有就会优先执行微任务队列中的所有任务，如果没有就查看是否有宏任务队列。微任务队列上创建的微任务，仍会阻碍后方将要执行的宏任务队列。由微任务创建的宏任务，会被丢在异步宏任务队列中执行。
14、怎么判断两个数组相等
- 循环比较
- toString方法
- join方法
- JSON.stringify
15、es6遍历数组的方法
- forEach
- map
- filter
- some
- every
- reduce
16、前端怎么给数据加密
- Base64加密
- MD5加密
- SHA-1加密
- 编码解码加密
17、两个html文件怎么传值
- URL参数（Query String）：可以使用URL查询字符串来传递数据。在第二个页面的URL后添加
?号，然后按照key=value的格式添加需要传递的数据。例如：http://example.com/page2?name=John&age=30。在第二个页面中，可以使用JavaScript或服务器端语言获取这些参数并进行处理。 - Cookie：Cookie是存储在客户端的小型文本文件，可以保存少量的信息。在第一个页面设置cookie，然后在第二个页面中读取该cookie。
- LocalStorage / SessionStorage：LocalStorage和SessionStorage提供了更大容量的持久化存储空间，可以在多个页面之间共享数据。
- AJAX请求：可以使用AJAX技术发送HTTP请求，将数据作为请求体发送到目标页面，并接收返回结果。
扫一扫
21万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
