前端面试题

for in 和for of的区别

for in 适用于可枚举属性，例如 对象、数组、字符串

for of 适用于可迭代对象，像Array、String

for in 能遍历自身的可枚举属性 && 原型上的可枚举属性

for of 一般只能遍历自身的可枚举属性

for in 得到的是key

for of 一般得到的是value

ES6之后版本新增特性（不全）

1.Array.prototype.includes：用于检查数组是否包含某个元素返回布尔值

2.**指数运算符，用于指数运算

3.String.prototype.padStart() 和 String.prototype.padEnd() 方法用于填充字符串

4.Object.values() 和 Object.entries()：返回对象的所有值或键值对数组

5.Promise.finally()：无论 Promise 是成功还是失败，都会执行。 

6.异步迭代器：允许使用 for await...of 循环来异步迭代 

7.Array.prototype.flat() 和 Array.prototype.flatMap()：数组扁平化

8.String.prototype.trimStart() 和 String.prototype.trimEnd()：分别用于删除字符串开头和结尾的空白符。

Set和Map

Set是es6新增的数据结构，类似于数组，但是成员的值都是唯一的，没有重复的值，我们一般称为集合

Set.add()增加一个set成员；Set.delete()删除一个set成员；Set.has()判断set是否有该成员；Set.clear()清除

扩展运算符和Set 结构相结合实现数组或字符串去重

Map类型是键值对的有序列表，而键和值都可以是任意类型

Map本身是一个构造函数，用来生成 Map 数据结构

map.size属性返回 Map 结构的成员总数。

中断请求

axios拦截器  instance.interceptors.request.use；新版本推荐使用AbortController，终止请求用AbortController.abort();

ajax中断请求 XMLHttpRequest.abort()

原型与原型链

每一个类（构造函数）都有一个显示原型prototype（本质就是个对象）

每一个实例都有一个隐式原型__proto__

显式原型的prototype等于其创建的实例的隐式原型__proto__例如：var arr = []; arr.__proto__ === Array.prototype

查找对象实例的方法和属性时，先在自身找，找不到则沿着__proto__向上查找，我们把__proto__形成的链条关系称原型链

继承 

原型链继承：原理： 将父类的实例(new Person())作为子类的原型对象(Student.prototype)

1.子类的构造函数指向出现错误，需要手动修改 （Student.prototype.constructor = Student）重新指回原构造函数。

2.若父类中存在引用类型的属性，继承者实例们共享该引用属性，一个修改，其他继承者的该属性值也会跟随改变。

3.子类实例对象无法向父类构造函数传参。

构造函数继承原理：在子类构造函数调用父类构造函数，并使用call/apply修改父类构造函数的this指向 此种方式摒弃原型链继承存在的实例化时无法向父类传参的问题。

1.只能访问父类实例上的属性或方法，不能够访问父类原型对象上的属性方法。

2.子类实例对象身上会出现父类实例对象的属性方法的副本，这显然是没有必要的

es6类继承原理： 封装的class，创建类，并通过extends实现继承。 语法简单，易书写

vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

State提供唯一的公共数据源，所有共享的数据统一放到store的state进行储存，相似与data，通过this.$store.state获取

mutations ： 使用它来修改数据(类似于methods)，通过this.$store.commit('方法名')提交mutations中的方法来更改状 态

getters： 类似于computed(计算属性，对现有的状态进行计算得到新的数据-------派生 )

actions： 发起异步请求，通过提交mutation来实现，可以包含异步操作，通过 this.$store.dispatch('方法名')分发action

modules： 模块拆分

优点：集中管理共享的数据,易于开发和后期维护；Vuex 的状态存储是响应式的，当 Vue 组件从 store中读取状态的时候，若 store 中的状态发生变化，能够触发响应式的渲染页面更新；

限定了一种可预测的方式改变数据, 避免大项目中, 数据不小心的污染

缺点：刷新浏览器，vuex中的state会重新变为初始状态 ；解决方案-插件 vuex-persistedstate

vue中为什么将数据定义在data里：

集中保存有利于管理；data里的属性可以被组件中的其他模块访问；Vue的响应式系统需要监视组件的数据变化，只有data属性中的属性才会被监视。

data中的数据写在return中是因为不使用return包裹，数据是全局可见，容易造成污染，包裹后是当前组件可见。

因为vue组件可以复用，为了防止data被复用，data就被定义为了函数

vue3初始数据在setup中定义一个返回对象存放

深浅拷贝

浅拷贝：新对象与原始对象共享相同的内存地址，因此对其中一个对象进行更改会影响到另一个对象。浅拷贝仅复制对象的第一层结构，而不会递归复制嵌套的对象或数据。

浅拷贝示例：扩展运算符；Object.assign()；Array.concat() 方法

深拷贝：创建一个全新的对象或数据结构，其中包含原始对象完全独立的副本。新对象与原始对象具有不同的内存地址，因此彼此之间的更改是相互独立的。深拷贝会递归复制所有嵌套的对象或数据，确保整个对象及其子对象都被复制。

深拷贝示例：JSON.parse(JSON.stringify())；cloneDeep()

双向绑定

Vue数据双向绑定原理是通过数据劫持结合发布者-订阅者模式的方式来实现的，首先是对数据进行监听，然后当监听的属性发生变化时则告诉订阅者是否要更新，若更新就会执行对应的更新函数从而更新视图

通过Object.defineProperty()来劫持各个属性的setter， getter，在数据发生变动时通

知Vue实例，触发相应的​getter​和​setter​回调函数。

当把一个普通 Javascript 对象传给Vue 实例来作为它的 data 选项时， Vue 将遍历它的属性，用 Object.defineProperty 将

它们转为 ​getter/setter​。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化

首页白屏优化

1. 代码优化和压缩

2. 懒加载和按需加载

3. 预加载关键资源

4. 优化压缩图片和多媒体资源

5. 减少重定向和请求次数

6.适当使用缓存