[特殊字符] 字节内部流出版！19道前端核心面试题解析——速存

1. 对Flex布局的理解及其使用场景

Flex布局是一种灵活的布局方式，可以让容器内的子元素自适应大小、位置和间距，非常适用于移动端开发。通过对容器和项目的属性设置，可以实现各种布局方式，如水平居中、垂直居中、等分、流式布局等。在实际开发中，可以使用flex布局来实现响应式设计、网格布局、导航菜单、卡片列表等多种布局效果。

2. 介绍一下Js中的原型和原型链

JavaScript中的原型（prototype）是每个函数对象都具有的一个属性，它指向一个对象，这个对象包含了共享的属性和方法。当我们创建一个新的对象实例时，该对象会继承其构造函数的原型上的属性和方法。原型链则是由对象的 __proto__ 属性连接起来的，通过原型链，一个对象可以访问到其原型对象的属性和方法。这样的层层连接形成了原型链，使得所有的对象最终都可以访问到 Object.prototype 上的属性和方法。

3. React组件之间的传值有几种方式？

父组件向子组件传递属性（Props）：可以使用Props将数据从父组件传递给子组件，子组件可以按照需要使用这些数据进行渲染和操作。

子组件向父组件传递事件：可以在子组件中定义事件处理函数，并使用Props将这些函数传递给父组件。当子组件触发事件时，可以通过Props调用父组件的事件处理函数。

上下文（Context）：使用上下文可以在组件树中共享数据，而不必通过Props逐级传递。上下文提供了一种在祖先组件和后代组件之间传递信息的方法，但应该慎重使用，因为过度使用上下文会导致组件之间的耦合度增加。

发布/订阅模式：可以使用事件发布/订阅机制来实现组件之间的通信。一个组件可以向事件总线（或事件中心）发布消息，其他组件可以订阅这些消息，并在需要时进行响应。

共享状态（State）：可以将状态放在共享的Store中，例如Redux或MobX，然后在各个组件中获取和修改状态。共享状态可以实现高效的组件通信，但需要保证状态的一致性和正确性。

4. 常见的水平垂直方式有几种？

水平方向居中	属性	取值
水平居中	margin	0 auto
水平居中	text-align	center
水平居中	display	flex; justify-content: center;
水平居中	position + transform	left: 50%; transform: translateX(-50%);

垂直方向居中	属性	取值
垂直居中	line-height	和父元素高度相等的值
垂直居中	display + table-cell	display:table-cell; vertical-align:middle;
垂直居中	flexbox	display:flex; align-items:center;
垂直居中	position + transform + flex	display:flex; align-items:center; position:relative; top: 50%; transform:translateY(-50%);

5. 说一下类组件和函数组件的区别？

1. 语法上的区别： 函数式组件是一个纯函数，它是需要接受props参数并且返回一个React元素就可以了。类组件是需要继承React.Component的，而且class组件需要创建render并且返回React元素，语法上来讲更复杂。
2. 调用方式 函数式组件可以直接调用，返回一个新的React元素；类组件在调用时是需要创建一个实例的，然后通过调用实例里的render方法来返回一个React元素。
3. 状态管理 函数式组件没有状态管理，类组件有状态管理。
4. 使用场景 类组件没有具体的要求。函数式组件一般是用在大型项目中来分割大组件（函数式组件不用创建实例，所有更高效），一般情况下能用函数式组件就不用类组件，提升效率。

关注点赞收藏评论区留言“需要111 ”！都可以分享给大家！大家注意看后台消息就行！

 关注后才会发送哦！

6. 在地址栏里输入一个地址回车会发生哪些事情？

• 1、浏览器的地址栏输入URL并按下回车。
• 2、浏览器查找当前URL是否存在缓存，并比较缓存是否过期。
• 3、DNS解析URL对应的IP。
• 4、根据IP建立TCP连接（三次握手）。
• 5、HTTP发起请求。
• 6、服务器处理请求，浏览器接收HTTP响应。
• 7、渲染页面，构建DOM树。
• 8、关闭TCP连接（四次挥手）

7. 说一下for...in 和 for...of的区别？

for...in循环主要是为了遍历对象而生,不适用遍历数组; for....of循环可以用来遍历数组、类数组对象、字符串、Set、Map以及Generator对象

8. 虚拟DOM转换成真实DOM

1. 首先，对比新旧虚拟DOM树的差异，找出需要更新的部分。
2. 然后，根据差异进行局部更新，生成一系列DOM操作指令。
3. 接下来，批量执行这些指令，将更新应用到真实DOM上。
4. 最后，更新完成，用户可以看到页面上相应的变化。

9. 实现节流函数和防抖函数

• 节流：是在每个时间段里，最多只允许运行一次。比如说resize调整窗口，在调整窗口的过程中，事件一直在高频率的触发，可以利用节流函数让其在一定的间隔时间段内最多触发一次。
• 防抖：在高频调用中，只有足够的空闲时间，代码才会执行一次，常见的就是input的change事件，只有停顿输入的事件大于指定的时间，代码才会执行一次。

10. 点击刷新按钮或者按 F5、按 Ctrl+F5 （强制刷新）、地址栏回车有什么区别？

• 点击刷新按钮或者按 F5： 浏览器直接对本地的缓存文件过期，但是会带上If-Modifed-Since，If-None-Match，这就意味着服务器会对文件检查新鲜度，返回结果可能是 304，也有可能是 200。
• 用户按 Ctrl+F5（强制刷新）： 浏览器不仅会对本地文件过期，而且不会带上 If-Modifed-Since，If-None-Match，相当于之前从来没有请求过，返回结果是 200。
• 地址栏回车： 浏览器发起请求，按照正常流程，本地检查是否过期，然后服务器检查新鲜度，最后返回内容。

关注点赞收藏评论区留言“需要111 ”！都可以分享给大家！大家注意看后台消息就行！

 关注后才会发送哦！

11. 实现模板字符串解析

点击下方，阅读原文，查看详细答案

12. Cookie有哪些字段，作用分别是什么？

字段	作用
Name	Cookie 的名称，用于标识和检索 Cookie
Value	Cookie 的值，存储具体的数据或信息
Domain	Cookie 可以被发送到的域名列表，指定哪些域名可以访问该 Cookie
Path	定义 Cookie 的路径，指定哪些路径下的页面可以访问该 Cookie
Expires	Cookie 的过期时间，指定 Cookie 过期的日期和时间
Max-Age	Cookie 的最大存活时间（秒），指定 Cookie 存在的持续时间
Secure	布尔值，表示 Cookie 是否仅通过 HTTPS 连接进行传输
HttpOnly	布尔值，限制 Cookie 是否能够通过 JavaScript 访问
SameSite	控制 Cookie 跨站点请求时是否包含在请求中，用于防止跨站点请求伪造攻击
Priority	Cookie 的优先级，指定浏览器发送 Cookie 的顺序
SameParty	布尔值，指示 Cookie 是否仅限同一站点的上下文使用

13. 介绍一下Promise.race

当传递给Promise.race的可迭代对象中的任意一个Promise对象解决或拒绝时，返回的Promise对象会立即解决或拒绝，并采用第一个解决或拒绝的Promise的值或原因。

这种特性使得Promise.race在处理竞态条件（race condition）时非常有用。例如，可以使用Promise.race来实现超时功能，即如果某个异步操作在指定时间内未完成，就进行相应的处理。

14. 说一下slice splice split 的区别？

方法	功能	返回值类型	原数组/字符串是否被修改
slice	提取数组的一部分	新的数组	不修改原数组
splice	删除、替换或插入数组的元素	被删除的元素组成的新数组	修改原数组
split	将字符串拆分为数组	新的数组	不修改原字符串

15. 浏览器的渲染过程

• 首先解析收到的文档，根据文档定义构建一棵 DOM 树，DOM 树是由 DOM 元素及属性节点组成的。
• 然后对 CSS 进行解析，生成 CSSOM 规则树。
• 根据 DOM 树和 CSSOM 规则树构建渲染树。渲染树的节点被称为渲染对象，渲染对象是一个包含有颜色和大小等属性的矩形，渲染对象和 DOM 元素相对应，但这种对应关系不是一对一的，不可见的 DOM 元素不会被插入渲染树。还有一些 DOM元素对应几个可见对象，它们一般是一些具有复杂结构的元素，无法用一个矩形来描述。
• 当渲染对象被创建并添加到树中，它们并没有位置和大小，所以当浏览器生成渲染树以后，就会根据渲染树来进行布局（也可以叫做回流）。这一阶段浏览器要做的事情是要弄清楚各个节点在页面中的确切位置和大小。通常这一行为也被称为“自动重排”。
• 布局阶段结束后是绘制阶段，遍历渲染树并调用渲染对象的 paint 方法将它们的内容显示在屏幕上，绘制使用 UI 基础组件。

16. 说一下你对盒模型的理解？

• CSS3中的盒模型有以下两种：标准盒模型、IE盒模型
• 盒模型都是由四个部分组成的,分别是margin、border、padding和content
• 标准盒模型和IE盒模型的区别：在于设置width和height时, 所对应的范围不同
  • 1、标准盒模型的width和height属性的范围只包含了content
  • 2、IE盒模型的width和height属性的范围包含了border、padding和content
• 可以通过修改元素的box-sizing属性来改变元素的盒模型； 1、box-sizing：content-box表示标准盒模型（默认值） 2、box-sizing：border-box表示IE盒模型（怪异盒模型）

17. Vue实现双向数据绑定原理是什么？

• 双向数据绑定就是：数据劫持 + 发布订阅模式（观察者模式）。
• Vue2中在实例初始化时遍历 data 中的所有属性，并使用 Object.defineProperty把这些属性全部转为 getter/setter。并 劫持各个属性 getter 和 setter，在数据变化时发布消息给订阅者，触发相应的监听回调，而这之间存在几个问题
• Vue3中使用 Proxy 来监控数据的变化。Proxy 是 ES6 中提供的功能，其作用为：用于定义基本操作的自定义行为（如属性查找，赋值，枚举，函数调用等）。

18. 介绍一下Promise.any

与Promise.race不同，Promise.any会等待传递给它的所有Promise对象都被拒绝后才会拒绝，只有当至少有一个Promise对象被解决时，返回的Promise对象才会解决。它将采用第一个解决的Promise的值作为其解决值。

这种特性使得Promise.any在处理多个异步操作的情况下非常有用，只要有一个操作成功完成，即可继续执行相关的逻辑。如果所有操作都失败，则可以在Promise.any返回的Promise对象上进行错误处理。

19. 闭包的应用场景

1. return回一个函数
2. 函数作为参数
3. IIFE（自执行函数）
4. 循环赋值
5. 使用回调函数就是在使用闭包
6. 节流防抖
7. 函数柯里化