记录一面

50 阅读11分钟

1.自我介绍?

2.为什么选择前端?

3.vue3的优化?

4.项目中的难题?

5.v-model可以绑定自定义组件吗?

6.post put的区别

HTTP请求是客户端和服务器端之间数据传输的方式之一,是客户端向服务器发送请求消息,用于请求特点给的资源或者执行特定的操作。

方法

HTTP 请求可以使用 9 种方法,这些方法主要是用来约束客户端和服务器之间进行数据传递的行为和操作,其中 GET 和 POST 是我们最常用的方法:

  • GET:从服务器获取资源
  • POST:向服务器提交数据,常用于提交表单数据、上传文件等操作;POST可能导致对服务器状态进行更改、资源创建、更新或删除等重要操作。点击回退按钮返回到之前访问过的页面时,浏览器默认行为是再次向服务器发送相同的POST请求以保证执行那个特定操作。
  • PUT:将数据发送到服务器,常用于创建或替代资源
  • DELETE:从服务器删除指定的资源;
  • PATCH:用于对资源进行部分更新,只更新请求中指定的字段或属性;
  • HEAD:与 GET 方法类似,但只获取响应头信息,不返回响应体,常用于检查资源是否存在或获取资源的元数据;
  • OPTIONS:获取服务器支持的请求方法列表、服务器配置信息等;
  • TRACE:用于回显服务器收到的请求,用于测试或诊断;
  • CONNECT:将请求连接转换为透明的 TCP/IP 通道,通常用于进行加密隧道的建立,例如 HTTPS 。 答:PUT请求是向服务器端发送数据,从而修改数据的内容,但是不会增加数据的种类,也就是说不论进行多少次的put操作,结果没有变化,其实就是更新数据。 POST请求是向服务器端发送数据,提交数据,是创建资源

对数据的操作不同:

  • get:查询
  • post:新增
  • put:修改

7.ES6中的新增的数据类型

Symbol和BigInt

  • Symbol 代表创建后独一无二且不可变的数据类型,它主要是为了解决可能出现的全局变量冲突的问题。

  • BigInt 是一种数字类型的数据,它可以表示任意精度格式的整数,使用 BigInt 可以安全地存储和操作大整数,即使这个数已经超出了 Number 能够表示的安全整数范围。

8.高阶函数(不会)

这个说法还是第一次知道,而且还是在面试中,直接说不会 sadddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd

高阶函数是指对其他函数进行操作的函数,可以将其他的函数作为参数或者返回他们。 高阶函数是一个函数,它接收函数作为参数或将函数作为输出返回

常见的高阶函数

(1:map

  • map()返回一个新的数组,数组中的元素为原始数组调用函数处理后的值。
  • map()不会对空数组进行检测。
  • map()不会改变原始数组

传递给 map() 方法的回调函数接受 3 个参数:currentValueindex 和 array

  1. currentValue必须。当前元素的的值。
  2. index可选。当前元素的索引。
  3. arr可选。当前元素属于的数组对象。
       let arr = [10, 20, 45, 50, 65, 150, 70, 40]
       let newarr = arr.map((item) => {
           return item * 2
       })
       console.log(newarr);

(2:filter

  • filter()方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
  • filter()不会对空数组进行检测。
  • filter()不会改变原始数组。

传递给 filter() 方法的回调函数接受 3 个参数:currentValueindexarray

  1. currentValue必须。当前元素的的值。
  2. index可选。当前元素的索引。
  3. arr可选。当前元素属于的数组对象。
       let newarr1 = arr.filter((item) => {
           return item < 100
       })
       console.log(newarr1);

(3:forEach

  • forEach()方法类似于 map(),传入的函数不需要返回值,并将元素传递给回调函数。
  • forEach() 对于空数组是不会执行回调函数的。
  • forEach()不会返回新的数组,总是返回undefined.

传递给 forEach() 方法的回调函数接受 3 个参数:currentValueindexarray

  • currentValue必须。当前元素的的值。
  • index可选。当前元素的索引。
  • arr可选。当前元素属于的数组对象。

(4:sort()

  • sort()方法用于对数组的元素进行排序。
  • sort()会修改原数组

sort() 方法接受一个可选参数,用来规定排序顺序,必须是函数

如果没有传递参数, sort() 方法默认把所有元素先转换为 String 再排序 ,根据 ASCII 码进行排序。

如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。

        arr.sort(function (x, y) {
            if (x < y) {
                return -1
            }
            if (x > y) {
                return 1
            }
            return 0
            // return x < y
            return x > y
            // 从小到大的排序 是升序

        })
        console.log(arr);

(5:some

  • some() 方法用于检测数组中的元素是否满足指定条件。
  • some() 方法会依次执行数组的每个元素。
  • 如果有一个元素满足条件,则表达式返回 true, 剩余的元素不会再执行检测。
  • 如果没有满足条件的元素,则返回 false
  • some()不会对空数组进行检测。
  • some()不会改变原始数组。

传递给 some() 方法的回调函数接受 3 个参数:currentValueindexarray

  • currentValue必须。当前元素的的值。
  • index可选。当前元素的索引。
  • arr可选。当前元素属于的数组对象。
        let newarr4 = arr.some((item) => {
            return item > 50
        })
        console.log(newarr4);

(6:every

这个其实是检测是不是每一个元素都是满足指定的条件- every() 方法用于检测数组所有元素是否都符合指定条件。

  • every() 方法会依次执行数组的每个元素。
  • 如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。
  • 如果所有元素都满足条件,则返回 true
  • every()不会对空数组进行检测。
  • every()不会改变原始数组。

传递给 every() 方法的回调函数接受 3 个参数:currentValueindexarray

currentValue必须。当前元素的的值。 index可选。当前元素的索引。 arr可选。当前元素属于的数组对象。

(7:reduce

  • reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
  • reduce()对于空数组是不会执行回调函数的。

reduce 方法接收两个参数

  • 回调函数
  • 一个可选的 initialValue (初始值)。如果不传第二个参数 initialValue,则函数的第一次执行会将数组中的第一个元素作为 prev 参数返回。

传递给 reduce() 方法的回调函数接受 4 个参数:prev, current, currentIndex, arr

  1. prev必须。函数传进来的初始值或上一次回调的返回值。
  2. current必须。数组中当前处理的元素值。
  3. currentIndex可选。当前元素索引。
  4. arr可选。当前元素所属的数组本身。

8.reduceRight

reduceRight() 方法的功能和 reduce() 功能是一样的,不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加。

9.find

  • find()方法用于查找符合条件的第一个元素,如果找到了,返回这个元素,否则,返回undefined
  • find()不会对空数组进行检测。
  • find()不会改变原始数组。

传递给 find() 方法的回调函数接受 3 个参数:currentValueindexarray

  1. currentValue必须。当前元素的的值。
  2. index可选。当前元素的索引。
  3. arr可选。当前元素属于的数组对象。

有这样一个数组 [11, 20, 51, 82] 现在有如下需求

返回数组中第一个大于50的元素

js
复制代码
let arr = [11, 20, 51, 82];
let result = arr.find((item) => {
  return item > 50;
}, 0);
console.log(result);//51

10.findIndex

findindex()find() 类似,也是查找符合条件的第一个元素,不同之处在于 findindex() 会返回这个元素的索引,如果没有找到,返回 -1

有这样一个数组 [11, 20, 51, 82] 现在有如下需求。

返回数组中第一个大于 50 的元素索引。

js
复制代码
let arr = [11, 20, 51, 82];
let result = arr.findIndex((item) => {
  return item > 50;
}, 0);
console.log(result);// 2

链式调用高阶函数

假如有一个数组 [10, 20, 45, 50, 65, 150, 70, 40]

需求一:给数组中的每个元素 * 2

我们使用的是 map() ,得到了[20, 40, 90, 100, 130, 300, 140, 80]

需求二:返回需求一中得到的新数组所有小于 100 的元素

我们使用的是filter() , 得到了[20, 40, 90, 80]

需求三:计算需求二中得到的新数组所有元素之和

我们使用的是reduce(),得到了 230

我们可以链式调用上述三个函数,来得到最终的结果

let arr = [10, 20, 45, 50, 65, 150, 70, 40]; 
let total = arr.map(n => n * 2).filter(n => n < 100).reduce((pre, n) => pre + n); 
console.log(total);//230

9.元素隐藏的方式和区别

display:none visibility:hidden opacity:0 z-index:负值

10.前后端交互,是怎么做的?

image.png 前后端交互为前端和后端的互动,也可以理解为数据交互,前端需要获取(GET)的数据获取上传(POST)的数据,要通过请求来完成的,前端发送请求,后端接收到请求后,便对数据库进行操作,返回前端所需要的数据,即完成一次前后的交互。 然后前后端交互的方式有:

1.接口调用方式

  • 原生的ajax
  • 基于jQuery的ajax
  • fetch
  • axios

2. URL地址格式

image.png

Restful形式的URL

Restful形式的URL HTTP请求方式 - GET 查询 - POST 添加 - PUT 修改 - DELETE 删除

11.js中,函数柯里化是什么?

柯里化就是将接收多个参数的函数变换为接收一个参数的函数,并且返回一个新函数继续接收新参数,最终返回一个新结果(多参数组成的结果) 简单的说,将一个多参数函数转换为单参数函数,即可称为柯里化。 柯里化的好处:将函数的颗粒度变得更细,更容易组合,不受限于每次都要传递多个参数,比如多个参数的函数进行合成就非常麻烦,所以这个时候需要进行柯里化转换为单一参数函数,然后就可以合成了。 中间件的核心原理就是使用柯里化,接收单个参数返回新函数(结果)用于下一个中间件继续调用执行。

函数柯里化的作用

参数复用

通过柯里化方法,缓存参数到闭包内部参数,然后在函数内部将缓存的参数与传入的参数组合后给函数执行,来实现参数的复用,降低通用性,提高适用性.

延迟运行

如果调用柯里化函数传入参数是不调用的,会将参数添加到数组中存储,等到没有参数传入的时候进行调用.

12.节流和防抖有什么区别?

13.vue3中有哪些好用的地方?

14.组件复用是什么?有什么特点?

组件

组件,是一个具有一定功能,且不同组件间功能相对独立的模块。组件可以是一个按钮、一个输入框、一个视频播放器等等。 可复用组件,高内聚、低耦合。 在 Vue 组件中,状态称为 props,事件称为 events,片段称为 slots。组件的构成部分也可以理解为组件对外的接口。良好的可复用组件应当定义一个清晰的公开接口。

  • Props 允许外部环境传递数据给组件
  • Events 允许组件触发外部环境的副作用
  • Slots 允许外部环境将额外的内容组合在组件中。

组件需要注册后才可以使用,注册有全局注册局部注册两种方式。

使用步骤

组件全局注册之后,任何的vue实例都可以使用 使用component选项可以局部注册组件,注册后的组件只有在该实例作用域下有效

15.父子组件之间是什么通信的?

16.vue3做了哪些性能提升?

17.使用过git吗?常见的命令有哪些?

18.git如何进行版本回退?

关于git的内容另外做一个总结

19.自定义组件的v-model?

20.v-model具体传给组件的是什么?

21.说一下路由的模式?

22.页面刷新的时候,数据丢失怎么解决?

23.用户持久化是放在哪里的?