面试题

三分钟自我介绍

js

1.防抖和节流

防抖 ：n秒后执行该事件，若在n秒内被重复触发，则重新计算
节流：n秒内只运行一次，如果n秒内重复触发，则只有一次生效
详细内容

变量提升

js引擎把变量的声明部分和函数的声明部分提升到代码的开头的行为。变量提升后，会给变量默认设置成undefined。
函数数声明不会被提升，变量式声明会被提升
但是ES6 中的新语法 let const 不会被提升
详细内容

同步和异步

同步：阻塞的 同步方法表明调用一旦开始，调用者必须等待方法执行完成，才能继续执行后续方法。
异步：非阻塞的 异步方法一旦开始，立即返回，调用者无需等待其中方法执行完成，就可以继续执行后续方法。
异步变同步： async await
promess：内部是异步的

Promess

promess 是用来处理异步操作的,可以同then 一直回调，用来解决回调地狱问题
状态：1.padding 待定 ， 2.resolved 解决（结果）状态 3 . rejected：拒绝状态
常用方法： 1. all(): 多个promess并行执行异步操作的能 2.race():排队执行，一个完成下一个开始
详细内容

闭包

• 读取其他函数内部变量的函数，本质上就是将函数内部和外部连接的一个桥梁
• 将变量始终保持在内存中 且何以封装私有属性和私有方法，但是可能引起内存泄漏

箭头函数和普通函数的区别

• 箭头函数 的this指向的是函数外部的this
• 不能 new ， 不能使用arguments 数组

ES6 新语法

结构赋值 、箭头函数、let 、 const 、 模板字符串 、Promess 以及用来遍历数组的 for in

数组常用的方法

push 、pop 、 unshift、 shift (后推、后删、前推、前删)
forEach 、find 、 some 、map 、filter 循环相关
sort 、slice 、join 、 concat 、（排序、删除、以某值转为字符春 、连接数组）

call 、 apply、bind 方法

call 方法是预定义的 JavaScript 方法, 通过 call()，您能够使用属于另一个对象的方法：该对象内的方法能够通过this调用属于另一个对象的方法
apply：apply() 方法与 call() 方法非常相似；call() 方法分别接受参数，apply() 方法接受数组形式的参数，如果要使用数组而不是参数列表，则 apply() 方法非常方便。
bind：和call很相似，但是不会直接调用函数，需要手动的调用。

http和https对比

http:超文本传输协议，用于客户端和服务器端的数据传输，简单方便但是有一下三个问题：
1.使用明文通讯，内容可以被窃听，
2.不验证通讯方的真事身份，可能与遭到伪装。
3.无法证明报文的完整性，容易被篡改。

https:http + 加密+ 认证:
1.https解决新人问题，采用数字证书，服务器在创建之初会向第三方平台申请可靠的数字证书，浏览器在浏览时会先核对数字证书，如果证书有问题则会立即停止通信
2.解决明文传输和完整性问题：https使用“对称加密和非对称加密”，当数字证书有效时，服务器端会生成一个共享秘钥和加密数据，或者非对称加密的公钥加密共享私钥。

深克隆的几种方式

浅拷贝 浅拷贝相当于值是复制了栈中的引用类型，而不对堆中的数据进行复制，只是让堆中的对象多个一个指向 当我们修改浅拷贝对象内数据时，会造成多个指向此数据地址的变量都受到影响

1. 结构赋值 -- 只能深拷贝一层
2. Object.create
3. JSON.parse 和 JSON.stringify // 解决了 结构赋值只拷贝第一层的问题， 对于多层对象同样有效。
4. structuredClone 内置克隆方法，有深度的克隆 ，问题和用json克隆一样 对于多层对象也能很好地执行拷贝，但同样对方法或自定义对象无力。

我们为什么要避免直接操作DOM元素 ？

1. 性能问题：每次直接的操作DOM元素，都会使得浏览器重新的渲染整个页面。
2. 容易出错：当DOM元素的结构发生变化或者更复杂的时候，就会容易出错，尤其是增加了代码的耦合度。
3. 不易维护：操作DOM会使业务逻辑显得混乱，从而不易维护。

虚拟DOM为什么能减少页面重新的渲染

1. 减少真实的DOM操作，虚拟DOM是内存中的js的对象，我们直接对虚拟DOM操作，这样可以减少对真实DOM的操作次数，从而达到减少页面重排、重绘的问题
2. 批量操作DOM：虚拟DOM会将需要更新的组件批量处理，然后统一更新到真实DOM上，从而减少对DOM的操作，提高渲染效率。
3. Diff算法 虚拟 DOM 在更新组件时，会通过 diff 算法，只更新需要更新的部分，减少了不必要的更新，从而降低了浏览器的计算和渲染时间。

axios和fetch的区别？

最根本区别：
Fetch是浏览器原生提供的一种HTTP请求API
Axios需要引入Axios库
Axios是对XMLHttpRequest的封装， Fetch是一种新的获取资源的接口方式，并不是对XMLHttpRequest的封装。

Axios 和Fetch对比：

1. axios请求可以直接设置timeout属性来控制响应超时
   fetch请求需要使用AbortController属性，使用起来没有axios方便
2. Axios也更加灵活和可控，可以对请求和响应进行拦截和处理。
   Fetch没有拦截器功能，但是要实现该功能并不难，直接重写全局Fetch方法就可以办到。
3. Axios会将返回的数据自动进行JSON转换
   Fetch则不同，它需要使用者进行手动转化。
4. 浏览器原生支持
   Fetch唯一碾压Axios的一点就是现代浏览器的原生支持。
   在当前网页打开Chrome的控制台使用Fetch几乎不需要什么配置就可以直接进行请求。
   Fetch和Axios到底有什么区别?

跨域解决方案

1. Proxy代理来解决
2. JSONP：它利用了 HTML 中的 script 标签不受跨域限制的特性，动态创建 script 标签，用 src 属性指向一个接口，这个接口会返回一个调用某个函数的 JS 代码。我们在页面中预定义一个回调函数，并把函数名作为参数传递给接口，当接口返回时就执行该回调函数，JSONP 数据也随之传递。
3. CORS:前端什么都不需要做。需要目标服务器端配合,目标服务器需要在 HTTP 头信息中添加 Access-Control-Allow-Origin 字段，指定哪些域名可以访问该资源

vue

双向绑定

双向绑定是基于mvvm结构 。m:model层 v:view层 vm：viewModel数据层
双向绑定是采用数据劫持结合发布者-订阅者的模式，通过object.defineProperty()来劫持各个属性的getter、setter，在数据变化时发消息给订阅者，触发响应的监听回调。

react 实现双向绑定 1. 监听input 事件，2.通过this.setState 改变数据

生命周期函数

钩子函数	触发的行为	在此阶段可以做的事情
beforeCreadte	还未初始化。	加loading事件
creadted	vue实例的数据对象data有了
beforeMount	但还是虚拟的dom节点	--------
mounted	vue实例挂载完成	--------
beforeUpdate	--------	--------
updated	--------	--------
beforeDestroy	--------	--------
destroyed	--------	--------

vuex

• Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化
• Vuex 的规则使用方法更加趋近于react，有规定的数据储存和修改、改变的方法，尽管其它state内数据在各处都能修改，但Vuex有自己的规则

// 创建实例仓库  
var  store = new Vuex.Store({
    state:{  
        //相当一vue中的data  
    },
    getters:{  
        //this.$stort.gerrers.*** 相当于vue中的 computed（计算属性）或filters（过滤器）  
        //从基本数据派生出来的数据,用于提供外部调用
    },
    mutations:{ 
        //相当于vue中的methods ，用来控制state中定义的变量，类似于父子之间传值
    },
    actions:{ 
        // actions:行动动作 , 完成复杂的运算方法、处理数据. Action 提交的是 mutation，而不是直接变更state内状态
    },
})

路由跳转方式和传参方式

跳转方式 : 1. router-link 2.this.$router
传参方式 :1.query 2.params

vue 父子组件传值方式

• props
• 路由传参
• ref
• vuex
• attrs、listeners
• EventBus

Computed和Watch的区别

• computed 计算属性 : 依赖其它属性值,并且 computed 的值有缓存,只有它依赖的 属性值发生改变,下一次获取 computed 的值时才会重新计算 computed 的值。
• watch 侦听器 : 更多的是观察的作用,无缓存性,类似于某些数据的监听回调,每 当监听的数据变化时都会执行回调进行后续操作。
  总结：凡是用到数据计算的都要用computed ， 当多个数据变化，而引起目标数据变化的用computed，当一个数据变化，会影响多个数据变化的用watch

过滤器 (Filter)

在Vue中使用filters来过滤(格式化)数据，filters不会修改数据，而是过滤(格式化)数据，改变用户看到的输出。
使用场景： 比如需要处理时间、数字等的的显示格式；

的作用是什么？

主要是用于需要频繁切换的组件时进行缓存，不需要重新渲染页面

• activated 在 keep-alive 组件激活时调用
• deactivated 在 keep-alive 组件停用时调用

路由导航守卫有什么作用?如何实现?

作用：1.监视路由跳转 2.控制路由跳转

方法：router.beforeEach((to,from,next) => {})
// to 即将要进入的目标路由对象
// from 当前导航正要离开的路由
// next: function 调用方法执行resolve钩子

react 问题

react 生命周期

componentWillMount() – 在渲染之前执行，在客户端和服务器端都会执行。
componentDidMount() – 仅在第一次渲染后在客户端执行。
componentWillReceiveProps() – 当从父类接收到 props 并且在调用另一个渲染器之前调用。
shouldComponentUpdate()– 根据特定条件返回 true 或 false。如果你希望更新组件，请返回true* 否则返回 false。默认情况下，它返回 false。
componentWillUpdate() – 在 DOM 中进行渲染之前调用。
componentDidUpdate() – 在渲染发生后立即调用。
componentWillUnmount() – 从 DOM 卸载组件后调用。用于清理内存空间。

列出 Redux 的组件

redux原理是将整个应用状态存储到一个地方上称为store，里面保存着一个状态树store tree，组件可以派发（dispatch）行为（action）给store，而不是直接通知其他组件，组件内部通过订阅store中的状态state来刷新自己的视图。state是只读的，唯一改变state的方法就是触发action。

Redux 由以下组件组成：

• Action – 这是一个用来描述发生了什么事情的对象。
• Reducer – 这是一个确定状态将如何变化的地方。
• Store – 整个程序的状态/对象树保存在Store中。
• View – 只显示 Store 提供的数据。

react hooks 解决了react那些痛点

1、从组件中提取状态逻辑，解决了在组件之间复用状态逻辑很难的问题；
2、将组件中相互关联的部分拆分成更小的函数，解决了复杂组件的问题；
3、在非class的情况下使用更多的React特性，解决了class组件与函数组件有差异的问题。

React中函数组件与类组件的区别是什么？

函数组件又被称为无状态组件，类组件是有状态组件
区别： 函数组件是一个纯函数，它接收一个props对象返回一个react元素；而类组件需要去继承React.Component并且创建render函数返回react元素。2、函数组件没有生命周期和状态state，而类组件有。

1、语法上
函数组件是一个纯函数，它接收一个props对象返回一个react元素。而类组件需要去继承React.component并且创建render函数返回react元素。
2、状态管理
因为函数组件是个纯函数，所以不能使用setState()。
3、生命周期钩子
函数组件不能使用生命周期钩子，英文所以的生命周期钩子都继承于React.component

详细内容

React 和 Jquery 的区别是什么 ？

Reac和Jquery是两种不同的工具，React是一个用来构建用户界面的库，而Jquery是用来操作DOM的库
相比jquery，React的优势有：

1. 更高效的虚拟dom机制，可以更快的更新页面，并且避免了直接的操作dom
2. 更加的组件化开发，使得代码易维护性更高
3. 更好的数据绑定和状态管理，可以使得组件之间的数据传递更加的直白简单