No121.精选前端面试题，享受每天的挑战和学习
文章目录
-
- 1、flex布局
- 2、position定位：fixed、relative和absoluted区别
- 3、js数据类型，Symbol是什么、有什么用
- 4、ES6新增哪些API
- 5、TCP四次挥手
- 6、localStorage和sessionStorage，存储大小
- 7、跨域怎么解决（开发环境和生成环境）
- 8、跨域是浏览器的行为吗
- 9、除了状态管理库（redux等）、组件间通讯还有其他什么方法
1、flex布局
Flex 布局（Flexible Box Layout）是一种用于页面布局的 CSS3 弹性盒子布局模型。它通过为父元素设置 display: flex;，将其内部的子元素组织成一个灵活的容器，可以实现自适应和响应式的布局效果。
Flex 布局主要使用以下几个关键属性：
-
display: flex;：将容器设置为一个 Flex 容器，用于容纳子元素。 -
flex-direction: row | row-reverse | column | column-reverse;：定义了主轴的方向，默认为横向，即row，也可以设置为纵向，即column。 -
flex-wrap: nowrap | wrap | wrap-reverse;：定义了子元素在一行（主轴上）排不下时如何换行，默认不换行，即nowrap。 -
justify-content: flex-start | flex-end | center | space-between | space-around;：定义了子元素沿着主轴上的对齐方式。 -
align-items: flex-start | flex-end | center | baseline | stretch;：定义了子元素沿着交叉轴上的对齐方式。 -
align-content: flex-start | flex-end | center | space-between | space-around | stretch;：定义了多行子元素沿着交叉轴上的对齐方式。
子元素可以通过以下属性进行灵活布局：
-
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];：定义了子元素的伸缩比例、收缩比例和基础宽度。 -
align-self: auto | flex-start | flex-end | center | baseline | stretch;：定义了单个子元素沿着交叉轴上的对齐方式，优先级高于父容器的align-items属性。
Flex 布局的优点是可以快速实现各种复杂的页面布局效果，尤其适合移动端和响应式网页设计。但对于较老的浏览器可能不支持 Flex 布局。
2、position定位：fixed、relative和absoluted区别
| 属性 | 固定定位（fixed） | 相对定位（relative） | 绝对定位（absolute） |
|---|---|---|---|
| 定位方式 | 相对于浏览器窗口固定位置 | 相对于元素原来位置进行偏移 | 相对于最近的已定位祖先元素进行偏移 |
| 脱离文档流 | 是 | 否 | 是 |
| 可以使用的偏移属性 | top, right, bottom, left | top, right, bottom, left | top, right, bottom, left |
| 可以使用的z-index属性 | 是 | 否 | 是 |
| 元素的位置 | 固定不变 | 原来位置加上偏移量 | 原来位置加上偏移量 |
| 对父元素的影响 | 无 | 无 | 不改变前后元素对父元素布局的影响 |
| 元素过大时是否会被裁剪 | 否 | 否 | 是 |
固定定位（fixed）是相对于浏览器窗口视口的位置进行固定定位，不随滚动而移动，可以使用 top、right、bottom 和 left 属性进行偏移定位。常用于实现固定的导航栏或悬浮的元素。
相对定位（relative）是相对于元素原来的位置进行偏移定位，不会脱离文档流，仍会占据原来的位置，通过 top、right、bottom 和 left 属性进行定位。常用于微调元素的位置。
绝对定位（absolute）是相对于最近的已定位祖先元素进行偏移定位，或者如果没有已定位的祖先元素，则相对于浏览器窗口进行偏移定位。通过 top、right、bottom 和 left 属性进行定位。绝对定位的元素会脱离文档流，不会占据原来的位置。常用于实现页面布局中的定位元素。
对于父元素的影响方面，固定定位和相对定位不会影响父元素的布局，而绝对定位可能会改变前后元素对父元素的布局影响。
需要注意的是，使用绝对定位时，还可以通过设置 z-index 属性来控制元素的堆叠顺序，使叠加元素的层级关系正确展示。同时，当元素过大时，固定定位和相对定位不会被裁剪，而绝对定位会根据父元素的大小进行裁剪。
3、js数据类型，Symbol是什么、有什么用
在 JavaScript 中，数据类型主要包括以下几种：
-
基本数据类型：
- 数字（Number）：表示数值（整数和浮点数）。
- 字符串（String）：表示文本。
- 布尔值（Boolean）：表示真或假。
- 空值（Null）：表示一个空的或不存在的值。
- 未定义（Undefined）：表示未赋值的变量。
- 大整数（BigInt）：表示任意精度的整数。
-
引用数据类型：
- 对象（Object）：一组键值对的集合，可以通过对象的属性（键）来访问对应的值。
- 数组（Array）：一组有序的值的集合，通过索引（从 0 开始）来访问对应的值。
- 函数（Function）：一段可执行的代码块，可以接受参数，并返回一个值。
- 日期（Date）：表示一个日期和时间。
- 正则表达式（RegExp）：用于匹配和处理字符串。
Symbol 是 ECMAScript6 新增的一种基本数据类型，用于表示唯一的标识符。每个由 Symbol 创建的值都是唯一的，不会与其他任何值相等，可以用作对象属性的键，防止键名冲突。
使用 Symbol 可以创建一个唯一的标识符，例如：
let sym1 = Symbol();
let sym2 = Symbol("description");
let sym3 = Symbol("description");
console.log(sym1); // Symbol()
console.log(sym2); // Symbol(description)
console.log(sym3); // Symbol(description)
console.log(sym2 === sym3); // false
Symbol 可以用作对象的属性键，可以防止键名冲突的问题，例如：
let obj = {
[sym1]: "value"
};
console.log(obj[sym1]); // value
另外，Symbol 还有一些内置的属性和方法，例如 Symbol.iterator、Symbol.toStringTag 等，可以用于自定义对象的行为。Symbol 的引入提供了一种更灵活和安全的键生成方式，增加了 JavaScript 语言的表达能力。
4、ES6新增哪些API
ES6（ECMAScript 6）引入了许多新的 API（应用程序编程接口）和功能来增强 JavaScript 语言的能力。
下面是一些 ES6 中新增的主要 API：
-
块级作用域变量声明：使用
let和const关键字来声明块级作用域的变量。 -
模板字面量：使用反引号（`）来创建多行字符串，并包含变量的插入。
-
箭头函数：使用箭头（=>）来定义函数，以简化函数的编写和语法。
-
默认参数：允许在函数定义中为参数提供默认值。
-
参数解构赋值：可以通过解构赋值从数组或对象中提取值，并将其赋给变量。
-
类和继承：引入了类和继承的概念，以更简洁和面向对象的方式来创建对象。
-
模块化导入和导出：使用
import和export关键字来实现模块之间的依赖管理和代码复用。 -
迭代器和生成器：引入了迭代器和生成器的概念，用于简化迭代和异步编程模式。
-
Promise 对象：用于处理异步编程，避免了回调函数地狱，提供了更直观和可靠的处理方式。
-
Symbol 类型：新增了一种基本数据类型 Symbol，用于表示唯一的标识符。
-
Set 和 Map 数据结构：引入了 Set 和 Map 两种新的数据结构，用于存储唯一的值和键值对。
-
Proxy 和 Reflect 对象：Proxy 对象用于拦截并定义对象的基本操作，Reflect 对象提供了一组静态方法来操作对象。
-
数组的新方法：引入了一些方便的数组方法，如
find、findIndex、includes等。 -
字符串的新方法：引入了一些方便的字符串方法，如
startsWith、endsWith、padStart、padEnd等。
这些是 ES6 中新增的一些主要 API，它们扩展了 JavaScript 的语法和功能，使得编写和维护代码变得更加简单和可靠。
5、TCP四次挥手
TCP（传输控制协议）是一种面向连接的协议，用于在网络上可靠地传输数据。TCP 的四次挥手是指在 TCP 连接关闭时，双方结束数据传输并释放资源的过程。下面是 TCP 四次挥手的步骤：
-
FIN 响应：一方（通常是发送方）发送一个带有 FIN（结束）标志的 TCP 报文段给另一方（通常是接收方），表示它想要关闭连接。
-
ACK 确认：接收方收到 FIN 报文段后，发送 ACK（确认）报文段作为确认应答。该 ACK 报文段中的序列号是上一个报文段的序列号加 1。
-
关闭通知：接收方同样发送一个带有 FIN 标志的 TCP 报文段给发送方，表示它也想要关闭连接。
-
ACK 确认：发送方接收到 FIN 报文段后，发送 ACK 报文段作为确认应答。
这样，每个方向都发送了一个 FIN 和接收到了一个 ACK，所以需要进行四次握手才能完成连接的关闭。其中，第一次和第二次握手是关闭连接的请求和确认，第三次和第四次握手是关闭连接的通知和确认。四次握手确保了双方都对连接的关闭有了明确的认可，并且释放了连接所占用的资源。
需要注意的是，在这个过程中，每个方向都可同时进行关闭，也就是双方可以同时发送 FIN 报文段。这是为了防止出现等待的情况，可以更快地关闭连接。
6、localStorage和sessionStorage，存储大小
localStorage和sessionStorage是HTML5提供的用于在客户端（浏览器）存储数据的API。
localStorage和sessionStorage的存储大小都是根据浏览器的实现有所不同。
对于localStorage来说，它的存储大小通常是以MB为单位，可以存储相对较大的数据。
而sessionStorage的存储大小通常较小，具体大小可能因浏览器和操作系统而异，一般在几十KB到几百KB之间。
需要注意的是，这些限制仅是大致估计，实际存储大小还受到浏览器设置、设备性能以及其他因素的影响。在实际使用过程中，如果需要存储大量数据，最好进行数据分片或使用其他适合的数据存储方式。
7、跨域怎么解决（开发环境和生成环境）
在开发环境中，为了解决跨域问题，可以通过启用跨域资源共享（CORS）来实现。CORS是一种机制，允许服务器在响应头中添加一些特殊的HTTP头，以允许客户端跨域访问资源。可以在服务端的响应中添加以下头部信息：
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type
这些头部信息指定了允许跨域的来源，允许的HTTP方法以及允许的请求头。
在生成环境中，一般不会继续使用CORS解决跨域问题，而是采用其他方式，如JSONP、代理、反向代理等。
JSONP是一种利用