前端面试笔记

React

特性

1. 组件设计，声明式，函数编程
2. jsx，虚拟DOM（diff算法最小化BOM操作），单向数据绑定

生命周期

useEffect

useEffect模拟三个生命周期 (挂载, 更新, 卸载前)

• componentDidMount
• componentDidUpdate
• componentWillUnmount

router传参方式

1. 路由参数<Route path="/users/:userId"} />与 let { userId } = useParams();
2. 查询参数<Link to="/users?userId=123" />与
   let searchParams = new URLSearchParams(location.search); let userId = searchParams.get('userId');
3. state
   <Link to={{ pathname: '/users', state: { userId: 123 } }}/ >与 let { userId } = location.state;
   这种方式通常用于向下一个路由传递一些数据，但不在URL中暴露。

注意点

1. react18之前在生命周期函数和合成事件中表现为异步，在原生事件中表现为同步。 在react18优化批处理之后，在任何地方调用setState都会批处理，因此都表现为异步。

HTTP请求

• fetch，原生API，
• axios，更方便，基于ajax

状态码

1. 2xx - 成功状态码
2. 3xx - 重定向状态码
3. 4xx - 客户端错误状态码

• 400 Bad Request: 服务器无法处理请求，通常是因为请求格式有误。
• 401 Unauthorized: 请求需要用户认证。
• 403 Forbidden: 服务器拒绝请求，权限不足。
• 404 Not Found: 未找到请求的资源。

4. 500 服务器错误状态码

HTML

行内元素

• a img picture span input textarea select label

语义化

H5新特性

HTML5最新版本。例如语义化标签（如 <header>, <footer>, <article>等）、新的表单输入类型、音视频支持、Canvas绘图等。

cookie，session，token

• cookie存储在浏览器中。
• session存储在服务器而不是用户浏览器中，安全性更高
• token是用于身份验证和授权的令牌

cookie sessionStorage localStorage 联系区别

1.都是浏览器存储 2.都存储在浏览器本地
区别：
1.cookie由服务器写入， sessionStorage以及localStorage都是由前端写入
2.cookie的生命周期由服务器端写入时就设置好的，localStorage是写入就一直存在，除非手动清除，sessionStorage是由页面关闭时自动清除
3.cookie存储空间大小约4kb， sessionStorage及localStorage空间比较大，大约5M
4.数据共享都遵循同源原则，sessionStorage还限制必须是同一个页面
5.前端给后端发送请求时，自动携带cookie, session 及 local都不携带
6.cookie一般存储登录验证信息或者token，localStorage常用于存储不易变动的数据，减轻服务器压力，sessionStorage可以用来监测用户是否是刷新进入页面，如音乐播放器恢复进度条功能

前端性能优化

1. 文件加载：图片压缩，精灵图
2. 渲染：避免无用渲染：懒加载 ，减少渲染次数

XSS

• 跨站脚本攻击，攻击者可以通过向Web页面里面插入script代码，当用户浏览这个页面时，就会运行被插入的script代码，达到攻击者的目的
• 危害：泄露用户的登录信息cookie ;恶意跳转：直接在页面中插入window.location.href进行跳转

CSRF

1.概念：跨域请求伪造。
2.原理：诱导用户跳转到新的页面，利用 服务器的验证漏洞 和 用户之前的登入状态，来模拟用户进行操作。
3.防范：利用cookie的sameSize属性规定其他网站不能使用本网站的cookie。或者使用token验证，再去验证用户身份。

BEM命名规范

bolck-element–modifier
例如nav-header btn--error
对特殊的样式，不应该直接修改基础样式，而应该加一个class修饰。

JS

判断变量的类型

• typeof 但无法区分 null 和 object 类型
• instanceof ,不能判断字面量！

 let str = new String('Hello');
console.log(str instanceof String); // 返回 true
let num = new Number(10);
console.log(num instanceof Number); // 返回 true
let bool = new Boolean(true);
console.log(bool instanceof Boolean); // 返回 true
// 但是...
console.log('Hello' instanceof String); // 返回 false（因为字符串字面量不是 String 对象的实例）
console.log(10 instanceof Number); // 返回 false（因为数字字面量不是 Number 对象的实例）
console.log(true instanceof Boolean); // 返回 false（因为布尔值字面量不是 Boolean 对象的实例）

• Object.prototype.toString

作用域链

输出小红，就近原则

事件委托

事件委托又叫事件代理，是一种在父元素上监听事件，然后通过事件冒泡机制来处理子元素的事件的技术。通过事件委托，可以避免为每个子元素都绑定事件处理程序，提高性能并简化代码。例子：list绑定事件，而不是每个li元素绑定事件

闭包

闭包即是方法里返回一个方法

	let counter=makecounter()//返回一个对象
	counter.add() couter.value()

闭包形成的原理：作用域链，当前作用域可以访问上级作用域中的变量
闭包解决的问题：能够让函数作用域中的变量在函数执行结束之后不被销毁，同时也能在函数外部可以访问函数内部的局部变量。
闭包带来的问题：由于垃圾回收器不会将闭包中变量销毁，于是就造成了内存泄露，内存泄露积累多了就容易导致内存溢出。 加分回答
闭包的应用，能够模仿块级作用域，能够实现柯里化，在构造函数中定义特权方法、Vue中数据响应式Observer中使用闭包等。

ES6新特性

• 箭头函数
• let/const
• 模版字符串
• 解构赋值 {a}={a:1,b:2}
• Array.from()将类数组转为数组，例如"abc"—>[a,b,c]
• 基本类型Symbol

节流和防抖

防抖：将多个操作变成一次 。例子：输入框中输入一个调用一次，导致太频繁会产生抖动

节流：一定时间内只调用一次 例子：点击提交多次，只提交一次

二者都用到了闭包的思想

Promise

1. 处理异步操作
2. 解决地狱回调问题问题

Promise 实例具有链式调用的特点，可以通过 then()方法进行链式调用，将多个异步操作连接起来，实现更复杂的异步控制流程。
同时，Promise 提供了 catch() 方法用于捕获Promise 链中任何一个 Promise 的 reject 状态，
以及，finally() 方法用于在 Promise链的最后添加处理逻辑，不管 Promise 是成功还是失败都会执行。

遍历Map方法

• of方法

for (let [key, value] of myMap)

CSS

盒模型

CSS盒模型由内容区域、内边距、边框和外边距组成
分为两种：标准盒模型（默认）、怪异盒模型
标准盒模型在设置width和height时设置的是content的大小, 不包括padding，margin。
怪异盒模型在设置width和height时设置的是盒子的大小, 包括padding，margin。

样式优先级

!important > 内联样式（style） > ID选择器（id） > 类选择器(class) > 标签选择器

CSS尺寸设置的单位

px、rem、em、vw、vh

• em它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px；
• rem是相对于应用在根元素的字体尺寸

BFC

块级格式化上下文

浮动

浮动盒子可以向左、右移动，直到它的外边沿接触父级的外边沿或另一个浮动盒子的外边沿。浮动盒子会脱离文档流，所以文档流中的元素几乎认为浮动盒子不存在。

清除浮动的方法：

1. 下一个兄弟元素设置属性clear: both; both代表l,r
2. 父元素设置overflow:hidden,触发BFC

权重

1. !important
2. 内联样式
3. ID 选择器
4. 类选择器、属性选择器(type=‘int’)、伪类选择器(a:hover)
5. 元素选择器，标签

background-image

div背景图片根据字内容铺满

1. background: url(https://images.jdycdn.com/) 0% 0% / 100% 100%;
2. background-size: contain

background-repeat: no-repeat;
background-position: center;