2022前端面试题（答案）积累

1.事件委托 代理

事件监听不直接放在触发的元素上面，而监听其共有的父元素上，通过事件冒泡和事件对象（event.target）判断具体元素；好处：可以对动态添加的子元素添加事件

2.如何事件先冒泡后捕获

同意事件同时监听冒泡和捕获，分别对应处理函数

3.事件流

冒泡流：先最具体元素到最不具体

捕获流：反之

addEvent.Listener(事件类型，回调函数，是否捕获)

4.如何实现继承

1.extend关键字 类实现继承

2.原型链继承

function Parent() { }

function Son(){

 //继承构造函数
 Parent.call(this,参数)
}
//继承原型

Son.prototype = Object.create(Parent.protype)

//修正构造函数
Son.prototype.constructor = Son

5.如何解决异步

回调函数（出现回调地狱）

Promise

async/await

生成器genorator(函数前加个* yeild next)

订阅发布模式

6.闭包

函数嵌套函数，函数作为参数被传入，函数作为返回值被返回

在函数外部修改函数内部的局部变量

创建作用域，毕免变量的全局污染

7.get与post

get缓存，post不缓存

get由于浏览器url现在只能2K, post没有理论上没有限制

get 收藏书签与分享

post常用于向服务器获取数据，post常用于修改，增加删除数据

8.如何让事件先冒泡后捕获

对同一事件同时监听冒泡和捕获，分别对应处理函数

9.图片懒加载和预加载

图片懒加载：用户不需要的时候，先不加载图片                         缓解服务器前端压力

图片预加载：网络空闲时提前把需要的图片缓存到内存中          增加服务器前端压力

 10.mouseover和mouseenter的区别

mouseover：鼠标移入元素或子元素都会触发事件

mouseenter：移除元素本身（不包含子元素）会触发事件

11.js的new操作符做了哪些事情

• 创建空的对象
• 通过call apply执行函数 并把空对象作为this传入
• 把空对象原型构造函数指向构造函数prototype

12. 描述一下http和https

https：加密；端口号443

http:明文；端口80

13.tcp三次握手，简单概括

C代表客户端，S代表服务端

第一次握手，S只可以确认自己可以接受C发送的报文段

第二次握手，C只可以确认S收到了自己发送的报文段，并且可以确认自己可以接受S发送的报文段

第三次握手，S可以确认C收到了自己发送的报文段

14.TCP和UDP的区别

• TCP是面向连接的，UDP是无连接的即发送数据前不需要先建立连接
• TCP提供可靠的服务，也就是说，通过TCP连接传送的数据，无差错，不丢失，不重复，且按序到达；UDP尽最大努力，即不保证可靠交付
• TCP只能是一对一的，UDP支持一对一，一对多

15.webscoket 

head只发送请求头，不发送请求体

options：允许客户端查看服务器的性能，比如说服务器支持的请求方式等

16.一个图片URL访问后直接下载怎样实现

1. 域名解析IP
2. 发送请求头
3. 服务器应答响应头和响应体（图片内容）
4. 客户端渲染图片

17.web Quality(无障碍) 

能够被残障个人士使用的网站才能称得上是一个易用的（易访问的）网站.

如：设置img的alt属性 图片提示（通过语音也知道图片是什么）

18.什么是Bom?有哪些常用的Bom属性

Bom是浏览器对象

location地址信息

location.href地址

location.reload()刷新

location.replace()跳转

history 历史记录

history.go()跳转

history.back()后退

history.forward()前进

window.navigator.userAgent浏览器的标识

19.http2.0

提升访问速度；允许多路复用；二进制，容量更大，分割更小

20.iframe是什么？有什么特点？

行内框架，在网页中可以嵌入另外一个网页

缺点：阻塞onload加载事件，不理seo(搜索引擎优化)

解决办法：使用js动态添加iframe设置src

21.Doctype作用？严格模式与混杂模式如何区分？他们有何意义

Doctype告诉浏览器是什么模式渲染页面；严格模式按浏览器最新标准；混杂模式兼容渲染

22.Cookie如何防范XSS攻击

XSS攻击用户使用非法JavaScript与网站交互实现非法的目的

后端：httpONLY防止js 访问cookie，sure让httpscai

 23.v-if和v-show的区别

v-show通过修改元素的css属性来完成显示与隐藏，不满足条件的元素被设置成display：none;

v-if通过操作dom元素来进行显示与隐藏，不满足条件不渲染到html中；

频繁的切换用v-show;反之用v-if。

24.ES5和ES6的区别

系统库的引用：

ES5中的引用需要先使用require导入包，成为对象，再去进行真正引用；

在ES6里，可以使用import直接实现系统库引用，不需要额外制作一个类库对象；

导出及引用单个类：

ES5中，要导出一个类给别的模块使用，一般通过module.exports来实现，引用时通过require方法来获取；

ES6中，使用export default实现同样的功能，但要使用import方法来实现导入：；

ES5 和 ES6 继承的区别：

this指向的区别：

25.ES5把数组中的东西拿出来拼成字符串怎么做

26.为什么跨域，有什么方法 

跨域就是一个域名请求另外一个域名的资源

答：因为浏览器的同源政策，就会产生跨域。比如说发送的异步请求是不同的两个源，就比如是不同的的两个端口或者不同的两个协议或者不同的域名。由于浏览器为了安全考虑，就会产生一个同源政策，不是同一个地方出来的是不允许进行交互的。

方法1.通过PHP设置响应头允许跨域(CORS方式)

方法2.使用php做代理去请求第三方api接口

方法3.jsonp方法 只能get

27.VUE3和VUE2有什么区别

双向绑定

 vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的
vue3发生了改变，使用proxy替换Object.defineProerty

跟节点不同：vue3在组件中支持多个根节点.

vue2和vue3最大的区别就是，vue3使用了Composition API (组合api)

生命周期的区别：

28.弹性容器

弹性盒子是css3中最常用的一种布局模块，用于实现盒子里项目的对齐、方向、排序

29.Vue响应式原理

1.通过Object.defineProperty来实现监听数据的改变和读取（属性中的getter和setter方法） 实现数据劫持

2.观察者模式（发布者-订阅者）
观察者(订阅者) – Watcher：
update()：当事件发生时，具体要做的事情

目标(发布者) – Dep:
①subs 数组：存储所有的观察者
②addSub()：添加观察者
③notify()：当事件发生，调用所有观察者的 update() 方法

3.当数据发生改变通过发布者订阅者模式来进行通知 进行界面刷新
 

30.Vue生命周期

31.vue传参方式 

vue传参的三种方式：1、利用路由的name属性来传参，通过“$route.name”来接收参数；2、通过router-link中的to属性来传参；3、使用path来匹配路由组件，采用url来传参。

 32.js数据类型

String 字符串
Number 数值
Boolean 布尔值
Null 空值
Undefined 未定义
Object对象

其中String、Number、Boolean、Null、Undefined属于基本数据类型
而Object属于引用数据类型。

33.vue页面传参

第一种方式：利用路由导航router-link中to属性传递参数

第二种方式：通过this.$router.push()传递参数

34.css3新增属性

新增边框属性：border-color   border-image  border-radius   box-shadow

新增背景属性：background-size  background-origin  background-clip

text-show   transform动画

35.怎么把两个对象合并到一起

方法一：ES6中的对象拓展运算符，可用于合并两个对象，拓展运算符（...）用于取出参数对象所有可遍历属性然后拷贝到当前对象。

let age = {age: 15};
let name = {name: "Amy"};
let person = {...age, ...name};
console.log(person)//{age: 15, name: "Amy"}

36.computed与watch的区别

computed:从现有数据计算出新的数据；

watch:监听数据的变化，执行回调函数

37.路由守卫的几种方法

38.vueX是什么

Vuex是一个用来管理组件之间通信的插件，它是一个专为【vue.js】应用程序开发的状态管理模式，它解决了组件之间同一状态的共享问题，它能够更好地在组件外部管理状态。

39.vue守卫有关：路由守卫写在路由的js文件内

导航守卫的作用：vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。

项目中应用场景举例：路由页面跳转时候进行登陆验证；路由跳转判断；

http://t.csdn.cn/CLcvihttp://t.csdn.cn/CLcvi

39.Dom 和虚拟Dom

虚拟dom(VNode),假的,不是真实的dom

真实的DOM在浏览器通过dom.api操作的,复杂的对象

虚拟DOM:可以通过this.$slots.default查看

真实的dom是一个对象,它的属性非常多,在浏览器中做dom操作,会比较消耗性能

虚拟dom是一个对象,它的属性相比较于真实的dom就比较少---用少量的属性描述一个dom,无法在浏览器中直接显示
 

40.钩子函数（HOOK）

钩子（Hook）是Windows消息处理机制的一个很重要的内容

应用程序可以通过钩子机制截获处理Window消息或是其他一些特定事件。

41.vue是双向绑定，react是单向数据流

Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

React是一个用于构建用户界面的开源JavaScript库，主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

42.vue的两个核心点分别是数据驱动和组件系统

43.小程序生命周期

44.let和const 的区别是什么? 

• let 命令不存在变量提升，如果在 let 前使用，会导致报错
• 如果块区中存在 let 和 const 命令，就会形成封闭作用域
• 不允许重复声明
• const定义的是常量，不能修改，但是如果定义的是对象，可以修改对象内部的数据

45.vue全局状态管理 （vueX）

全局状态管理就是vuex，

 46.vueX的属性

state ：基本数据(数据源存放地)

getters ：从基本数据派生出来的数据

mutations ：提交更改数据的方法，同步！

actions ：像一个装饰器，包裹mutations，使之可以异步。

modules ：模块化Vue

修改state里面的内容

47.vue生命周期

48.js数值类型

基础类型、值类型

string number boolean  undefined symbol符号 null

复杂数据类型，引用类型

array数组， object对象  function函数或者class类   Map图   set集合   weakMap   Date

49.值类型与引用类型的区别

值类型key和value都存储在栈中

引用类型栈中存内存地址，真正的值存储在堆中。

一个引用类型堆中可以被多个变量引用，修改其中一个会影响到其它。

50.什么是闭包，应用场景，缺点

闭包就是函数中嵌套函数，函数作为参数被传入，作为返回值被返回。

作用：

• 形成局部作用域。
• 在函数外部可以访问函数内部的局部变量

闭包缺点：

被闭包引用的变量不会被js垃圾回收机制销毁，会常驻内存，使用不当容易造成内存崩溃。

51.原型，原型链

每个构造函数都有一个显示的原型prototype

每个实例对象都有个隐藏原型_proto_

实例的隐式原型_proto_等于其构造函数的显示原型protype

当查找一个对象的属性或方法时，先在实例上查找，找不到沿着_proto_向上逐级查找

我们把_proto_的_proto_形成的链条关系称为原型链

作用：1原型链实现了js继承2.原型可以给构造函数创建的实例添加公用方法

52.js如何实现继承

1.class使用extends关键字实现继承

2.通过原型链实现继承

function B（）{
     A.call(this) //实现构造函继承
}
B.protoytpe = Object.create(A.prototype) //实现原型继承
B.prototype.constructor= B //修正构造函数

53.call,apply区别

call与apply都是执行一个函数，用第一个参数冒充函数的this

apply参数用的是数组形式

54.new关键字做了什么

• 创建空对象
• call执行构造函数并传入空对象作为this
• 指定空对象的构造函数

55.浅拷贝

• object.assign(A,B)
• for in 遍历拷贝
• {...A}对象扩展

56.深拷贝

转字符串

var obj2 = JSON.parse(JSON.stringify(obj1))

递归

function deeCopy(obj){
    if(typeof obj==="object"&&obj!==null){
      var result；
      if(obj.instanceof Array){
         result = [];
         for(var i=0;i<obj.length;i++){
               result[i] = deepCopy(obj[i])
         }
      }else{
         result = {};
         for(var k in obj){
             result[k] = deepCopy(obj[k])
         }
      }
      return result;
    }else {
        return obj;
    }
}

今天先积累这么多啦