2022前端基础面试题

已知高度情况下， line-height 等于高度实现垂直居中；使用 text-align:center实现水平居中
display:flex; align-items:center;justify-content:center;
绝对定位的话，给父元素设置定位属性 relative，子元素设置 absolute，然后设置子元素 top:0;left:0;right:0;bottom:0;margin:auto；

盒子模型

H5新特性

语义化标签， header, footer, nav, aside,article,section
增强型表单
视频 video 和音频 audio
Canvas 绘图
SVG绘图
地理定位
拖放 API
WebWorker
WebStorage( 本地离线存储 localStorage、sessionStorage )
WebSocket

2、flex布局（其他常见布局）

前端常用布局_唯手熟尔⁡的博客-CSDN博客

二、JavaScript

数据类型

参考：js数据类型（基本数据类型 | 引用数据类型）_前端小峰的博客-CSDN博客

基本数据类型：Number、String、Boolean、Null、 Undefined、Symbol、bigInt（ES6），这些类型可以直接操作保存在变量中的实际值。

基本数据类型是指存放在栈中的简单数据段，数据大小确定，内存空间大小可以分配，它们是直接按值存放的，所以可以直接按值访问

引用数据类型：Object（在JS中除了基本数据类型以外的都是对象，数据是对象，函数是对象，正则表达式是对象）

引用数据类型也叫对象数据类型，包括function,object,array,date,RegExp等可以可以使用new创建的数据，又叫对象类型，他们是存放在堆(heap)内存中的数据

BigInt数据类型提供了一种方法来表示大于2^53-1的整数。BigInt可以表示任意大的整数。

作用：解决精度缺失的问题：BigInt数据类型比Number类型支持更大的整数值，Number类型只能安全的支持-9007199254740991(-(2^53-1)) 和 9007199254740991(2^53-1)之间的整数，任何超过这个范围的数值都会失去精度。

堆与栈

栈：是一种连续储存的数据结构，具有先进后出后进先出的性质。

通常的操作有入栈（压栈），出栈和栈顶元素。想要读取栈中的某个元素，就是将其之间的所有元素出栈才能完成。

堆：是一种非连续的树形储存数据结构，具有队列优先,先进先出；每个节点有一个值，整棵树是经过排序的。特点是根结点的值最小（或最大），且根结点的两个子树也是一个堆。常用来实现优先队列，存取随意。

判断数据类型方法

typeof

typeof null // "object"
typeof function(){} // "function"

弊端：可以发现当数据是 object，array，null 时，全部返回 object 类型。所以这个判断方法不太好。

instanceof

instanceof 是通过检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

其实现原理是，查找构造函数的原型对象是否在实例对象的原型链上，如果在返回true，如果不在返回false

"aaa" instanceof String // false
new String("aaa") instanceof String // true
new Date() instanceof Date // true
({}) instanceof Object // true
[] instanceof Array // true
[] instanceof Object // true

比较好用，但是也有一些小问题，比如 Array 和 Object 都出现在数组的原型链上，可能会将 [] 误认为 Object 类型。

toString.call()

toString.call(undefined) // "[object Undefined]"
toString.call(false) // "[object Boolean]"
toString.call('aaa') // "[object String]"
toString.call(123) // "[object Number]"
toString.call({}) // "[object Object]"
toString.call([]) // "[object Array]"
toString.call(null) // "[object Null]"
toString.call(function(){}) // "[object Function]"

可以根据返回的字符串判断是哪种类型。

constructor 比较常用

const flg = true;flg.constructor === Boolean // true
const aaa = 'aaa';aaa.constructor === String // true
const num = 123;num.constructor === Number // true
const obj = {};obj.constructor === Object // true
const arr = [];arr.constructor === Array // true
const fun = function(){};fun.constructor === Function // true

但是这种方式仍然有个弊端，就是 constructor 所指向的的构造函数是可以被修改的。

作用域

1、作用域

作用域就是一个变量可以使用的范围，主要分为全局作用域和函数作用域

全局作用域就是Js中最外层的作用域

函数作用域是js通过函数创建的一个独立作用域，函数可以嵌套，所以作用域也可以嵌套

Es6中新增了块级作用域（由大括号包裹，比如：if(){},for(){}等）

2、自由变量

当前作用域外的变量都是自由变量，一个变量在当前作用域没有定义，但是被使用了，就会向上级作用域，一层一层依次查找，直至找到为止，如果全局作用域都没有找到这个变量就会报错。这个自由变量查找的过程就是作用域链。

3、变量提升

每个var声明的变量，function声明的函数存在变量提升。let const不存在变量提升

在js中声明之前未定义，会在js的最上方会形成一个预解析池，用来存储声明了但没有先定义的变量名

4、作用域链

作用域链的作用是保证对执行环境有权访问的所有变量和函数的有序访问，通过作用域链，我们可以访问到外层环境的变量和函数，简单来说：内部函数访问外部函数的变量这种链式查找的机制被称为作用域链

跨域问题

浏览器同源策略：协议相同，域名相同，端口相同。

Websocket
jsonP原理：就是利用标签没有跨域限制的漏洞。通过标签指向一个需要访问的地址并提供一个回调函数来接收数据当需要通讯时。
JSONP 使用简单且兼容性不错，但是只限于 get 请求。
CORS ： 需要浏览器和后端同时支持。IE 8 和 9 需要通过 XDomainRequest 来实现。（跨域时，浏览器会拦截Ajax请求，并在http头中加Origin）浏览器会自动进行 CORS 通信，实现 CORS 通信的关键是后端。只要后端实现了CORS，就实现了跨域。
谷歌插件cors
document.domain：该方式只能用于二级域名相同的情况下，只需要给页面添加 document.domain = 'test.com' 表示二级域名都相同就可以实现跨域

深，浅拷贝

闭包

数组（数据）去重

js中的事件传播流程

捕获阶段-从外往里传播
事件源阶段-目标阶段
冒泡阶段-从里往外传播

1、this指向

如何改变this指向

call/apply/bind区别和原理？

call方法call()是apply()的一颗语法糖，作用和apply()一样，同样可实现继承，唯一的区别就在于call()接收的是参数列表，而apply()则接收参数数组。
bind方法bind()的作用与call()和apply()一样，都是可以改变函数运行时上下文，区别是call()和apply()在调用函数之后会立即执行，而bind()方法调用并改变函数运行时上下文后，返回一个新的函数，供我们需要时再调用.

2、ES6新特性

箭头函数
class类的继承
const、let变量定义
模板字符串
解构赋值
Promise对象
字面量简写（当属性值与属性名一样时）
拓展运算符
import和export，之前是commonJS的规范

3、promise

4、数组、字符串方法

5、原型，原型链

6、cookie，localstorage，sessionstorage的区别？

生命周期：

cookie：可设置失效时间，没有设置的话，默认是关闭浏览器后失效
localStorage：除非被手动清除，否则将会永久保存。
sessionStorage：仅在当前网页会话下有效，关闭页面或浏览器后就会被清除。

存放数据大小：

cookie：4KB左右
localStorage和sessionStorage：可以保存5MB的信息。

http请求：

cookie：每次都会携带在HTTP头中，如果使用cookie保存过多- 数据会带来性能问题
localStorage和sessionStorage：仅在客户端（即浏览器）中保存，不参与和服务器的通信

易用性：

cookie：需要程序员自己封装，源生的Cookie接口不友好
localStorage和sessionStorage：源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

应用场景：

从安全性来说，因为每次http请求都会携带cookie信息，这样无形中浪费了带宽，所以cookie应该尽可能少的使用，另外cookie还需要指定作用域，不可以跨域调用，限制比较多。但是用来识别用户登录来说，cookie还是比storage更好用的。其他情况下，可以使用storage，就用storage。
storage在存储数据的大小上面秒杀了cookie，现在基本上很少使用cookie了，因为更大总是更好的，哈哈哈你们懂得。 localStorage和sessionStorage唯一的差别一个是永久保存在浏览器里面，一个是关闭网页就清除了信息。localStorage可以用来夸页面传递参数，sessionStorage用来保存一些临时的数据，防止用户刷新页面之后丢失了一些参数。

HTTP请求返回状态码

200 OK：客户端请求成功。表示请求被服务器正常处理。

204 no content：请求成功，响应报文中没有相应体

206 partial content：服务器已经正确处理部分GET请求，实现断点续传或同时分片下载，该请求必须包含Range请求头来指示客户端期望得到的范围，

301 moved permanently（永久重定向）：该资源已被永久移动到新位置，新的URI在响应首部的Location字段。只要不是HEAD请求，响应实体应该包含新的uri的超链接和简短的说明。

302 move temporarily（临时重定向）：该资源临时移动到新位置了。与301相似

304 not modified：自上次请求后，再次请求时页面未被修改，服务器返回此响应，不会返回网页内容，客户端根据状态码得知网页没有变更，复用之前的网页。进而节省带宽与开销。

401 Unauthorized：表示发送的请求需要HTTP认证信息，或者认证失败了。

403 Forbidden：表示对请求资源的访问被服务器拒绝了

404 not found：服务器上没找到请求的资源

415：请求资源不支持请求项目格式

500：internal sever error：服务器端在执行请求时发生了错误

502：服务器暂时不可用，有时是为了防止发生系统过载

503：服务器过载或暂停维修

get 和post的区别

1、url可见性：

get，参数url可见；

post，url参数不可见

2、数据传输上：

get，通过拼接url进行传递参数；

post，通过body体传输参数

3、缓存性：

get请求是可以缓存的

post请求不可以缓存

4、后退页面的反应

get请求页面后退时，不产生影响

post请求页面后退时，会重新提交请求

5、传输数据的大小

get一般传输数据大小不超过2k-4k（根据浏览器不同，限制不一样，但相差不大）

post请求传输数据的大小根据php.ini 配置文件设定，也可以无限大。

6、安全性

这个也是最不好分析的，原则上post肯定要比get安全，毕竟传输参数时url不可见，但也挡不住部分人闲的没事在那抓包玩。安全性个人觉得是没多大区别的，防君子不防小人就是这个道理。对传递的参数进行加密，其实都一样。

防抖和节流？

防抖：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时（本质是一个定时器）。
例如：搜索框的联想功能，不断输入值的时候，使用防抖来节约资源。
节流：规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

共同点：

函数防抖和函数节流都是防止某一时间频繁触发，但是这两兄弟之间的原理却不一样。
函数防抖是某一段时间内只执行一次，而函数节流是单位时间执行一次。

继承

回流重绘

浏览器协议（http,https）

三、vue

1.test

四、react

1、什么是JSX？

JSX 是J avaScript XML 的简写。是 React 使用的一种文件，它利用 JavaScript 的表现力和类似 HTML 的模板语法。这使得 HTML 文件非常容易理解。此文件能使应用非常可靠，并能够提高其性能

1、常用hooks

函数组件和类组件的区别

2、组件生命周期

初始化阶段：
- getDefaultProps:获取实例的默认属性
- getInitialState:获取每个实例的初始化状态
- componentWillMount：组件即将被装载、渲染到页面上（新版本移除）
- render:组件在这里生成虚拟的 DOM 节点
- componentDidMount:组件真正在被装载之后
运行中状态：
- componentWillReceiveProps:组件将要接收到属性的时候调用（新版本移除）
- shouldComponentUpdate:组件接受到新属性或者新状态的时候（可以返回 false，接收数据后不更新，阻止 render 调用，后面的函数不会被继续执行了）
- componentWillUpdate:组件即将更新不能修改属性和状态（新版本移除）
- render:组件重新描绘
- componentDidUpdate:组件已经更新
销毁阶段：
- componentWillUnmount:组件即将销毁

setState

react里面key的作用

react diff 原理（常考，大厂必考）

把树形结构按照层级分解，只比较同级元素。
给列表结构的每个单元添加唯一的 key 属性，方便比较。
React 只会匹配相同 class 的 component（这里面的 class 指的是组件的名字）
合并操作，调用 component 的 setState 方法的时候, React 将其标记为 dirty.到每一个事件循环结束, React 检查所有标记 dirty 的 component 重新绘制.
选择性子树渲染。开发人员可以重写 shouldComponentUpdate 提高 diff 的性能。