前端常见问题
本文最后更新于 128 天前，其中的信息可能已经有所发展或是发生改变。
1、说一说cookie sessionStorage localStorage 区别？
共同点都是存储在浏览器本地的，都遵循同源原则（sessionStorage还必须是同一个页面） cookie是由服务端写入的，后两者是前端写入的。 cookie的生命周期是服务端设置好的，sessionStorage在浏览器关闭后就被删除，localStorage生命周期一直存在除非手动删除 cookie的存储空间只有4KB，后两者为5M 在前端请求后端时会自动携带cookie，后两者不会 cookie一般用于存储登录的信息（如sessionId，token），sessionStorage可以用于检测用户是否时页面刷新进入的，localStorage一般用于存储不易改变的数据
2、说一说JS数据类型有哪些,区别是什么？
基本数据类型：Number、Boolen、String、NaN、Symbol、Null、Undefined、BigInt 复杂数据类型：Object（function），也被称为引用类型，常见的有数组、对象、Math函数等 区别：基本数据类型存储在栈中，数据结构简单，占用空间小，使用比较频繁。复杂数据类型存储在堆中，数据结构复杂，占用空间较大。在栈中存储的是指向堆中的指针地址。
3、说一说你对闭包的理解？
闭包指的是有权访问另一作用域中变量的函数。 闭包会造成内存泄露的问题。 闭包应用：防抖节流
- 防抖：一定时间内多次触发事件则重新计时
- 节流：一定时间内多次触发事件只执行一次
- 举个例子： 防抖：小明借了小红100元，小红说2天后还钱，如果小明不停催促，重新开始计算2天，若中途不再催促，2天后还钱。 节流：小明借了小红100元，小红说2天后还钱，如果小明不同催促，还是2天后才会还钱。
- 实现方式：
<!-- 防抖节流 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
</head>
<style>
#btn,
#btn2 {
width: 60px;
border: 1px solid #676767;
padding: 5px 10px;
text-align: center;
user-select: none;
cursor: pointer;
margin-bottom: 10px;
}
</style>
<body>
<div id="btn" title="防抖：一定时间内多次触发事件则重新计时">点击我</div>
<div id="btn2" title="节流：一定时间内多次触发事件只生效一次">点击我</div>
</body>
<script>
let btn = document.getElementById('btn')
// 防抖事件
function fd(fn, time, immediate=false) {
let timer = null;
let isImmidiate = false; // 是否立刻执行
return function () {
if (timer) clearTimeout(timer)
if (!isImmidiate && immediate) {
fn.call(this, arguments)
isImmidiate = true
} else {
timer = setTimeout(() => {
fn.call(this, arguments)
isImmidiate = false
}, time)
}
}
}
// 节流事件
function jl(fn, time) {
let lastTime = 0;
return function () {
let nowTime = new Date().getTime();
let remainTime = time - (nowTime - lastTime);
if (remainTime <= 0) {
fn.call(this, arguments);
lastTime = nowTime;
}
}
}
btn.addEventListener('click', fd(function () {
console.log(this);
console.log('123');
}, 1000, true))
btn2.addEventListener('click', jl(function () {
console.log(this);
console.log('456');
}, 1000))
</script>
</html>4、什么是promise，怎么使用？
promise是异步编程的解决方案，可以解决回调地狱的问题 有三种状态，分别是pending（执行中）、resolved（成功，也可以是fulfilled）、rejected（失败），一旦状态发生改变就不会再变。 使用new Promise((resolved,rejected)=>{}).then(res=>{}).catch(err=>{})
5、什么是跨域，怎么解决？
网页中请求地址的协议、域名、端口号不同，就会产生跨域。 jsonp，通过script标签可以跨域请求资源的特性，将回调函数作为参数拼接在url中，后端收到请求调用该函数，并将数据作为参数返回即可实现跨域。 cors，res.setHeader(‘Access-Control-Allow-Origin’, ‘*’);res.setHeader("Access-Control-Allow-Methods", "GET, PUT, OPTIONS, POST"); nginx反向代理，利用代理服务器和页面同源的特性来实现跨域。 postmessage，H5新增的Api，通过发送和接收API实现跨域。
6、什么是BFC？
BFC，块级格式化上下文。页面中独立的渲染区域，不会影响其它的元素。 条件：float是left或right，position是absolute或fixed，overflow不是visible
7、vuex是什么，有哪些属性，怎么使用？
vuex是vue的状态管理工具。包括actions、state、mutations、getters、module。 其中，state存放数据（通常以对象方式）；actions包含异步操作（ajax）； mutations包含改变state中数据的方法（同步方法），可通过store.commit调用actions，通过store.dispatch触发getters； getters中定义store的计算属性，可通过store.getters调用；module将store划分成模块。
8、JavaScript怎么判断变量类型？
typeof，可用于判断基本数据类型，判断引用数据类型时，除了函数返回function，其他返回object。 instanceof，不能用于检测symbol，undefined，null。 Object.prototype.toString.call()，判断对象原型链 constructor，用于检测引用数据类型
9、说说样式的优先级是什么？
!important > 行内样式 > 嵌入样式/外链样式（比较同级后面会覆盖前面的）> ID选择器 > Class选择器/伪类选择器/属性选择器 > 标签选择器 > 通配符选择器
10、JS实现异步的方式？
回调函数、定时器、迭代器和生成器函数、async/await
11、说说vue2和vue3的双向绑定原理？
- vue2双向绑定原理 通过数据劫持结合发布者-订阅者模式来实现数据的响应式，也就是通过Object.defineProty来劫持数据的getter和setter，在数据变化后发布消息给订阅者，订阅者收到消息进行处理。缺陷是如果数据量很大，一次性递归会导致栈溢出，不能监听对象的新增和删除属性，不能监听通过下标改变的数组
- vue3双向绑定原理 通过es6新增的proxy劫持整个对象并返回新的对象。 proxy使用方法：var proxy = new Proxy(target, handler)，其中，target表示被代理的对象，handler表示代理的操作。
12、说说数组去重的方法？
1、使用ES6新增语法set 2、使用indexof 3、使用数组方法includes
13、null和undefined区别？
null指的是变量定义并赋值成null，undefined指的是变量定义但未赋值 console.log(null == undefind) // true console.log(null !== undefind) // true
14、什么是浮动，有哪些属性，怎么清除浮动？
浮动float常用属性是left、right、none
设置了浮动的元素会脱离文档流，会导致盒子坍塌。
清楚浮动的方法：
1、标签法，在浮动的元素下方添加一个标签，并设置样式clear: both
2、给父元素设置样式overflow: hidden
3、通过伪元素清除浮动。设置样式div::after{content: ''; display: table; clear: both}
15、谈谈对箭头函数的理解？
箭头函数是ES6新增语法。简化了函数定义，是一种匿名函数。当函数体是单条语句可以省略{}和return。 箭头函数没有自己的this，只能够继承外部函数的上下文，没有arguments，不能够作为构造函数（不能new） 当使用call和apply方法时只传递一个参数（第一个参数也就是this会被忽略） 箭头函数没有原型，没有super，不能使用yield关键字，不能够作为生成器（generator）
16、call、apply和bind的区别？
都可以改变this的指向。call和apply可以直接调用。 call(this,a,b,c)，第二个参数表示具体的函数参数。 apply(this,arr)，第二个参数表示函数参数数组。 bind(this)，返回一个执行上下文的函数，需要自行调用。 使用场景：call用于对象继承，伪数组转真数组；apply用于找出数组的最大值和最小值以及数组合并；bind用于vue和react中函数指向。
17、谈谈对语义化的理解？
语义化：根据页面结构选择合适的标签。 作用：有利于SEO（搜索引擎优化）、代码可读性更高、利于页面内容的结构化
18、谈谈this的指向？
普通函数指向window，严格模式下为undefined，node环境下指向global 箭头函数本身没有this。继承函数所在上下文 函数中的this，随调用指向谁。
19、谈谈css中的尺寸单位？
px：绝对像素 em：相对父元素像素 rem：相对根元素像素 vw：视口宽度 vh：视口高度
20、在未知宽高实现元素水平垂直居中？
1、使用弹性盒布局 2、使用transform布局 3、使用table-cell布局
21、什么是变量提升？
变量提升是指使用var关键字声明的变量在解析时会被提升到最前面。变量声明会被提升，赋值不会被提升。变量提升后在初始化变量后返回的是undefined。 let、const不存在变量提升。let和const声明的变量会形成暂时性死区，为赋初始值直接访问会报错。
22、说说hashrouter和historyrouter的区别？
两者都是前端路由，hashrouter是监听location的hash值进行实现，特点是地址中含有#，historyrouter是浏览记录的api实现。 相同的url，哈希路由不会添加进历史记录中，history路由会被添加到历史记录中。 historyrouter需要配合后端不然会出现跳转页面返回出现404问题，hash路由不会。 通过window.onhashchange获取url中hash值。 通过history.pushState使用它做页面跳转不会触发页面刷新，使用window.onpopstate监听浏览器的前进和后退
23、map和foreach区别？
map会改变原数组，返回一个长度和原来一样的新数组。
foreach不会改变原数组，返回undefined。
map处理速度更快，而且可以链式调用。如：arr.map(v=>v*v).filter(v=>v>10)
24、说一说事件循环Event loop，宏任务与微任务？
在js代码执行过程中，遇到同步任务，直接推到调用栈中执行，遇到异步任务，将其挂起，等到有返回值将它推到任务队列中。 当调用栈中所有的同步任务执行完成后，再将任务队列中的异步任务一个一个的推入并执行。 异步任务分为宏任务和微任务，每个宏任务都包含一个微任务队列。 常见的宏任务有：script标签中的代码，定时器，ajax，setImmediate，I/O。 常见的微任务有：promise，Object.observe。
25、什么是diff算法？
diff算法主要是在虚拟dom树发生改变后，生成dom树的一种更新方式。 通过对比他们之间的差异，将更新补丁直接作用在真实dom树上。以最小成本完成视图更新。 框架会将所有节点转化成vnode，在发生更改后将vnode和更改前oldnode比较，然后以vnode为基准，在oldnode上进行更改。 原本没有新版有则添加，反之，则删除。
26、什么是CSRF跨站请求伪造？
用户在访问并登录网站A后会产生一个cookie，用户在没退出网站A继续访问网站B， 网站B收到用户请求返回代码获取用户浏览器上登录网站A的cookie，浏览器直接以用户的权限将cookie返回网站B
27、什么是XSS跨站脚本攻击？
攻击者将脚本放在网站A上，在用户访问完网站A的时候运行脚本并获取用户的cookie。
28、Vue中计算属性computed和监听watch有什么区别？
computed有缓存，依赖于其他属性值，只有其他属性值发生改变才会重新计算 watch无缓存，可以进行异步操作，每当坚挺的值发生变化后就会立即回调进行后续操作
29、Vue中$nextTick的作用？
为了立刻获取更新后DOM。 Vue中更新DOM是异步的，当数据发生变化后，vue会开启一个异步更新队列，队列中的所有数据更新完才会更新视图。 \$nextTick就解决了这个问题。原理是返回一个promise
30、浏览器渲染页面原理？
浏览器将html文件解析成DOM树，将css解析成stylesheet，然后将DOM树和style结合形成Render树，之后浏览器通过Render树计算出每个元素节点的位置并将其绘制出来
31、说说defer和async的区别？
两者都是异步的，区别在于何时执行script脚本。 defer是在加载完JS并且HTMl解析完成后再执行JS脚本 async是在加载完JS就执行JS脚本，会阻塞HTML的渲染
32、浏览器输入url后会发生什么？
判断是搜索内容还是url 查找本地缓存，如果本地存在直接访问页面（304），反之，进入网络请求阶段 DNS域名解析 三次握手建立TCP连接 合成请求头信息，发送http请求 处理响应数据 四次挥手释放TCP连接 浏览器渲染页面（将html解析成dom树，将css解析成stylesheet，并生成render，通过render计算各个节点位置并绘制到页面上）
33、说说对盒模型的理解？
盒模型包括标准盒模型和怪异盒模型（IE盒模型） 标准盒模型：box-sizing: content-box（盒子的宽度=width+margin+padding+border） 怪异盒模型：box-sizing: border-box（盒子的宽度=width+margin）
34、伪数组转数组方式？
- 使用for循坏
- 使用扩展运算符（[…nodelist]）
- Array.from(nodelist)
- Array.prototype.slice.call(nodelist)
- Array.prototype.concat.apply([], nodelist)
35、说说Vue中的keep-alive？
keep-alive是vue的内置组件。通常将数据量多且不易变动的组件放在keep-alive中，起到缓存的作用。 防止因为dom重复渲染，减少资源消耗。 keep-alive有3个属性： include 需要保存的组件 exclude 不需要保存的组件 max 最多能保存的组件数
36、说说new操作会发生什么？
1、创建一个新的对象。 2、为该对象添加_proto_属性，该属性链接到构造函数的原型对象。 3、为新创建的对象作为this。 4、如果函数有返回值则返回，没有返回值则返回this。
37、说一下token 能放在cookie中吗？
token可以放在cookie中。token一般是用来判断用户是否登录的，它内部包含的信息有：uid(用户唯一的身份标识)、time(当前时间的时间戳)、sign（签名，token 的前几位以哈希算法压缩成的一定长度的十六进制字符串） token可以存放在Cookie中，token是否过期，应该由后端来判断，不该前端来判断，所以token存储在cookie中只要不设置cookie的过期时间就行了，如果 token失效，就让后端在接口中返回固定的状态表示token失效，需要重新登录，再重新登录的时候，重新设置cookie中的token就行了。
token验证流程： 客户端使用账号密码请求登录，服务端收到请求会验证账户名和密码，验证成功后服务端会签发一个token，并发送给客户端。客户端收到token后会把他存储下来。每次客户端发送请求都会携带token，服务端会对它进行验证，验证通过则返回数据。
38、说一说Vue中 v-if 和 v-show区别？
作用：都是控制元素隐藏和显示的指令 区别： v-show: 控制的元素无论是true还是false，都被渲染出来了，通过display：none控制元素隐藏 v-if: 控制的元素是true，进行渲染，如果是false不渲染，根本在dom树结构中不显示 应用： v-show: 适合使用在切换频繁显示/隐藏的元素上 v-if: 适合使用在切换不频繁，且元素内容很多，渲染一次性能消耗很大的元素上
39、简单的说明下react的生命周期
constructor：完成了数据的初始化。 render：render()函数会将jsx生成的dom插入到目标节点中。在每次组件更新时，react通过diff算法比较更新前和更新之后的dom节点，找到最小的有差异的dom位置并更新，花费最小的开销。 componentDidMount：组件第一次渲染完成，此时dom节点已经生成，在这里调用接口请求，返回数据后使用setState()更新数据后重新渲染。 componentDidUpdate：组件更新完成。每次react重新渲染之后都会进入这个生命周期，可以拿到更新之前的props和state。 componentWillUnmount：在这个生命周期完成组件的数据销毁和卸载，移除所有的定时器和监听。
getDerivedStateFromProps(nextProps,prevState)： 代替老版的componentWillReceiveProps()。官方将更新state与触发回调重新分配到了componentWillReceiveProps()中，让组件整体的更新逻辑更加清晰，并且在当前生命周期中，禁止使用this.props，强制让开发者们通过比较nextProps和PrevState去保证数据的正确行为。 shouldComponentUpdate()： return true可以渲染，return false不重新渲染。 getSnapshotBeforeUpdate(prevProps,prevState)： 代替componentWillUpdate()，核心区别在于getSnapshotBeforeUpdate()中读取到的dom元素状态是可以保证和componentDidUpdate()中的一致。
40、如何实现可过期的localstorage数据？
一般来说，localstorage定义的数据是默认永久保存在浏览器中的，知道手动删除。 要实现数据的过期（有效时间），可以使用惰性删除和定时删除，原理相差不大。 惰性删除： 惰性删除是指某个键值过期后，该键值不会被马上删除，而是等到下次被使用的时候，才会被检查到过期，此时才能得到删除。实现方法是，获取数据的时候，从存储的数据对象中拿到存储的时间和当前时间做对比，如果超过过期时间就清除Cookie。 定时删除：每隔一段时间执行一次删除操作，并通过限制删除操作执行的次数和频率，来减少删除操作对CPU的长期占用。另一方面定时删除也有效的减少了因惰性删除带来的对localStorage空间的浪费。实现过程，获取所有设置过期时间的key判断是否过期，过期就存储到数组中，遍历数组，每隔1S（固定时间）删除5个（固定个数），直到把数组中的key从localstorage中全部删除。 LocalStorage清空应用场景：token存储在LocalStorage中，要清空。
41、HTML中重排和重绘的区别，解决方案？
重排：当DOM的变化影响了元素的几何信息(元素的的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排 重绘：当一个元素的外观发生改变，但没有改变布局，重新把元素外观绘制出来，这个过程叫做重绘。 重排一定重绘，重绘不一定重排。 可以使用GPU加速（transform）、脱离文档流（定位）、样式集中改变来避免。
42、Vue 列表为什么加 key？
为了性能优化 因为vue是虚拟DOM，更新DOM时用diff算法对节点进行一一比对，比如有很多li元素，要在某个位置插入一个li元素，但没有给li上加key，那么在进行运算的时候，就会将所有li元素重新渲染一遍，但是如果有key，那么它就会按照key一一比对li元素，只需要创建新的li元素，插入即可，不需要对其他元素进行修改和重新渲染。 加分回答 key也不能是li元素的index，因为假设我们给数组前插入一个新元素，它的下标是0，那么和原来的第一个元素重复了，整个数组的key都发生了改变，这样就跟没有key的情况一样了。
43、react的antd中的表格数据怎么根据数字字母进行排序？
数组对象中：
字母/文字按照A-Z(a-z)顺序： sorter: (a, b) => a.introduction.localeCompare(b.introduction),
数字按照大小排序：sorter: (a, b) => a.number - b.number,
在javascript中也可以使用这类方法。
43、react中怎么使用三元表达式实现多个条件判断？
import styles from './index.less'
let tbody = data.map(item,index) => {
<tr key={index}>
<td className={index === 6 && item.number < 0 ? styles.orange : (index === 7 && item.number <= 0 ? styles.red : (index === 6 || index === 7 || index === 8 ? styles.black : ''))}>{item.number}
</td>
</tr>
}这里表示第7行的值如果小于0为橙色，第8行的值如果小于等于0为红色，其他的值为黑色