> 今日问题：css隐藏元素有哪些方法？




Q：如果在前端面试中，被问到css隐藏元素有哪些方法，怎么回答比较好，全面详细一点，尽量把所有方法都列出来并说明优缺点？

A：在前端面试中，当被问到 CSS 隐藏元素的方法时，你可以全面详细地列出以下常用方法：

1. display: none;

- 这是最常用的隐藏元素的方法之一。
- 设置元素的 display 属性为 none 将会使元素不显示，并且不占据页面布局空间。
- 优点：
    - 完全隐藏元素，不占据页面布局空间。
    - 易于实现，语义明确。

- 缺点：
    - 元素隐藏后，无法通过 CSS 或 JavaScript 直接触及。

```css
.element {
    display: none;
}
```

2. visibility: hidden;

- 使用 visibility 属性可以隐藏元素，但是元素在页面中仍然占据布局空间。
- 元素的尺寸和位置仍然保留，只是内容不可见。
- 优点：
    - 元素隐藏后，仍然占据页面布局空间。
    - 元素尺寸和位置保持不变，对页面布局影响较小。

- 缺点：
    - 对于完全隐藏元素，不适用。
    - 元素虽然不可见，但仍然可被键盘焦点和鼠标事件访问到。

```css
.element {
    visibility: hidden;
}
```

3. opacity: 0;

- 设置元素的 opacity 属性为 0 可以使元素不可见，但是仍然占据页面布局空间。
- 优点：
    - 元素透明度设置为 0，不可见但仍然占据页面布局空间。
    - 元素保留在文档流中，对布局影响较小。

- 缺点：
    - 元素仍然可以接收用户的交互事件，因为它仍然存在于页面上。

```css
.element {
    opacity: 0;
}
```

4. position: absolute;

- 将元素的 position 属性设置为 absolute 或 fixed，并且将其移出屏幕可视区域以隐藏元素。
- 优点：
    - 可以将元素移出屏幕可视区域，完全隐藏元素。
    - 可以使用动画效果来实现元素的显示与隐藏。

- 缺点：
    - 需要手动调整位置，不够灵活，可能会影响其他元素的布局。

```css
.element {
    position: absolute;
    left: -9999px; /* 移出屏幕左侧 */
    /* 或 */
    top: -9999px; /* 移出屏幕顶部 */
}
```

5. clip-path: polygon(0 0, 0 0, 0 0, 0 0);

- 使用 clip-path 属性可以定义一个裁剪区域，将超出此区域的部分裁剪掉，从而达到隐藏元素的效果。
- 优点：
    - 可以定义复杂的裁剪区域，实现不规则形状的隐藏效果。

- 缺点：
    - 部分浏览器支持不完全，跨浏览器兼容性需要考虑。

```css
.element {
    clip-path: polygon(0 0, 0 0, 0 0, 0 0); /* 定义一个不可见的裁剪区域 */
}
```

6. height: 0; width: 0; overflow: hidden;

- 将元素的高度和宽度都设置为 0，并且隐藏溢出内容。
- 优点：
    - 使用 CSS 属性设置高度和宽度为 0，隐藏元素。
    - 不影响页面布局。

- 缺点：
    - 无法完全隐藏元素的内容，仍然可被访问到。

```css
.element {
    height: 0;
    width: 0;
    overflow: hidden;
}
```

7. transform: scale(0);

- 使用 transform 属性的 scale 函数将元素缩放至不可见。
- 优点：
    - 可以使用 CSS 动画来实现渐变式的显示与隐藏效果。

- 缺点：
    - 元素虽然不可见，但仍然占据页面布局空间，可能会影响其他元素的布局。

```css
.element {
    transform: scale(0);
}
```

8. z-index: -1;

- 将元素的 z-index 设置为负值，使其在屏幕的下方，从而隐藏元素。
- 优点：
    - 可以将元素放置在页面的下方，实现隐藏效果。
- 缺点：
    - 仅适用于绝对定位或固定定位的元素。
    - 其他元素可能会覆盖该元素，需要谨慎使用。

```css
.element {
    z-index: -1;
}
```

9. visibility: collapse; (仅适用于表格元素)

- 对于表格中的行或列，可以使用 visibility: collapse; 来隐藏。
- 不同于 visibility: hidden;，collapse 只适用于表格元素。
- 优点：
    - 适用于表格元素的行或列的隐藏，保留表格结构。

- 缺点：
    - 仅适用于表格元素。
    - 对于非表格元素，无法使用该方法隐藏。

```css
tr.hidden-row {
    visibility: collapse;
}
```

这些是常见的 CSS 隐藏元素的方法，你可以根据具体的情况选择合适的方法。

css隐藏元素有哪些方法

> 今日问题：instanceof与typeof的区别？




Q：如果在前端面试中，被问到instanceof与typeof，怎么回答比较好，全面详细一点？

A：当被问到 instanceof 和 typeof 的区别时，你可以这样回答：

1. typeof 运算符：

- typeof 是 JavaScript 中的一个运算符，用于检测给定变量的数据类型。
- 返回的结果是一个字符串，表示变量的数据类型。
- 主要用于判断基本数据类型，如 number、string、boolean、undefined、symbol、bigint 和 object。
- typeof 对于引用类型（对象、数组、函数等）返回的结果都是 'object'，这是它的一个局限。

2. instanceof 运算符：

- instanceof 也是 JavaScript 中的一个运算符，用于检测一个对象是否是某个构造函数的实例。
- 返回的结果是一个布尔值，如果对象是指定构造函数的实例，则返回 true，否则返回 false。
- 主要用于检查对象的原型链，因此可以判断对象是否属于某个类或其父类的实例。
- instanceof 通常用于检查自定义对象的类型，而不是基本数据类型。

3. 区别总结：

- typeof 检查数据类型，返回字符串。
- instanceof 检查对象的原型链，判断对象是否属于某个类的实例。
- typeof 适用于基本数据类型和 undefined，但对于引用类型的区分能力有限。
- instanceof 适用于检查自定义对象的类型，可以准确地判断对象是否属于某个类的实例。

4. 示例：

```js
typeof 42; // 'number'
typeof 'hello'; // 'string'
typeof true; // 'boolean'
typeof undefined; // 'undefined'
typeof Symbol(); // 'symbol'
typeof 123n; // 'bigint'
typeof []; // 'object'
typeof {}; // 'object'
typeof function() {}; // 'function'

function Car() {}
var myCar = new Car();
myCar instanceof Car; // true
```

在回答时，可以结合示例说明 typeof 和 instanceof 的用法和区别，这样能够更直观地展示你对这两个运算符的理解。

instanceof与typeof

> 今日问题：箭头函数与普通函数的区别？





Q：如果在前端面试中，被问到箭头函数与普通函数的区别，怎么回答比较好，全面详细一点？

A：当被问到箭头函数与普通函数的区别时，你可以采取以下方式回答：

1. 语法形式：

- 普通函数使用 function 关键字声明，例如：function add(a, b) { return a + b; }。
- 箭头函数使用箭头 => 定义函数，例如：(a, b) => a + b。

2. this 指向：

- 普通函数中的 this 指向运行时的上下文，可以通过调用方式或者 bind()、apply()、call() 方法来改变。
- 箭头函数中的 this 指向在定义时所在的上下文，而不是调用时。箭头函数没有自己的 this，它继承了外围作用域中的 this 值。

3. arguments 对象：

- 普通函数内部可使用 arguments 对象访问传入的参数。
- 箭头函数没有自己的 arguments 对象，但可以使用剩余参数 ...rest 来获取所有传入的参数。

4. 构造函数：

- 普通函数可以作为构造函数使用，并通过 new 关键字来创建新的实例。
- 箭头函数不能被用作构造函数，使用 new 关键字会抛出错误。

5. 绑定：

- 普通函数可以通过 bind()、apply()、call() 方法显式地绑定 this。
- 箭头函数无法通过这些方法改变 this 指向，它们始终保持其定义时的上下文。

6. 返回值：

- 普通函数在单行情况下，需要使用 return 显示地返回值。
- 箭头函数在只有一条表达式的情况下，默认将其作为返回值，并且不需要显式地使用 return。

7. 适用场景：

- 普通函数适用于需要动态 this 绑定、作为构造函数、使用 arguments 对象等情况。
- 箭头函数适用于简单的函数表达式，以及需要保持词法作用域 this 的情况下。

这样的回答可以展示你对 JavaScript 中函数的理解，并且可以提供一些具体的示例来说明这些区别。

箭头函数与普通函数

> 今日问题：null和undefined的区别？




Q：如果在前端面试中，被问到null和undefined的区别，怎么回答比较好，全面详细一点？

A：当被问到null和undefined的区别时，你可以通过以下方式进行回答：

1. null 和 undefined 的定义：

- null 是 JavaScript 中的一个特殊值，表示“空”或“无值”，通常用于显式地指示变量的值为空。
- undefined 也是 JavaScript 中的一个特殊值，表示未定义或未初始化的变量。

2. 赋值来源：

- null 通常是由程序员显式地赋值给变量的，表示变量的值为空。
- undefined 则表示变量被声明了但没有被赋值，或者被赋值为 undefined。

3. 类型：

- null 是一个 JavaScript 的数据类型，被认为是一个对象（虽然技术上它不是一个对象类型）。
- undefined 是一个类型和一个值。在早期的 JavaScript 版本中，它是一个全局变量，后来被定义为一个原始值类型。

4. 用法：

- null 通常用于表示一个对象存在但不包含任何值。
- undefined 则通常表示未初始化的变量，或者一个函数在没有返回值时的默认返回值。

5. 行为差异：

- 在条件判断中，null 会被转换为 false，而 undefined 会被转换为 false 或者 undefined。
- 当你访问一个不存在的对象属性时，JavaScript 会返回 undefined，而不是 null。

6. 严格相等性比较：

- 使用严格相等运算符（===）时，null 和 undefined 是不相等的。因为它们是不同的类型。

7. 空值检查：

- 当你想要检查一个变量是否为 null 时，你应该使用严格相等运算符（===），而不是松散相等运算符（==），因为松散相等运算符会将 null 视为与 undefined 相等。

8. 推荐实践：

- 在代码中，应该尽量避免使用 null 和 undefined 来表示不同的状态，而是使用一致的方式，例如使用 undefined 表示未初始化的变量或属性，而不是使用 null。

这样的回答能够全面解释 null 和 undefined 的区别，以及它们在 JavaScript 中的使用和行为。

null和undefined的区别

> 今日问题：HTTP三次握手和四次挥手？为什么是三次握手而不是二次或者四次呢？





Q：如果在前端面试中，被问到HTTP的三次握手和四次挥手，怎么回答比较好，详细全面一些，为什么不是两次握手不是四次握手？

A：在前端面试中，被问及 HTTP 的三次握手和四次挥手时，你可以通过以下详细全面的回答来展示你对网络通信过程的理解：

**三次握手（Three-way Handshake）：**

- **第一次握手（SYN）**： 客户端向服务器发送 SYN 包，包含一个随机序列号。这一步的必要性在于确保客户端和服务器之间的通信能够建立起来。客户端向服务器发送 SYN 包，表示客户端发送数据的能力正常。
- **第二次握手（SYN-ACK）**： 服务器收到 SYN 包后，会回复一个 SYN-ACK 包，表明服务器已经收到了客户端的请求，并同意建立连接。这一步的必要性在于确认服务器已经准备好接收客户端的数据，同时向客户端发送 SYN 包，表明服务器发送数据的能力正常。
- **第三次握手（ACK）**： 客户端收到服务器的 SYN-ACK 包后，会回复一个 ACK 包，表示客户端已经收到了服务器的确认，并且已准备好接收来自服务器的数据。这一步的必要性在于确认客户端和服务器之间的连接已经建立，可以进行双向数据传输。

总体来说，三次握手确保了客户端和服务器之间的连接能够可靠地建立起来，同时保证了双方发送和接收数据的能力正常，避免了无效的连接请求或数据丢失。

**四次挥手（Four-way Handshake）：**

- **第一次挥手（FIN）**： 客户端发送 FIN 包给服务器，表示客户端已经没有数据要发送了，并且希望关闭连接。这一步的必要性在于客户端希望关闭连接，不再发送数据。
- **第二次挥手（ACK）**： 服务器收到 FIN 包后，会回复一个 ACK 包作为确认，但此时服务器仍然可以向客户端发送数据。这一步的必要性在于服务器确认客户端的关闭请求，并且通知客户端服务器还有数据需要发送。
- **第三次挥手（FIN）**： 当服务器确认数据已发送完毕后，会发送一个 FIN 包给客户端，表示服务器已经没有数据要发送了，并且希望关闭连接。这一步的必要性在于服务器希望关闭连接，不再发送数据。
- **第四次挥手（ACK）**： 客户端收到服务器的 FIN 包后，会回复一个 ACK 包作为确认，表示客户端已经收到服务器的关闭请求，并且关闭了连接。这一步的必要性在于客户端确认服务器的关闭请求，并且关闭了连接。

总体来说，四次挥手确保了客户端和服务器之间的连接能够正确地关闭，避免了数据的丢失或连接的继续存在。每一步都是必要的，以确保连接的可靠性和正确性。


**为什么不是两次握手而是三次握手？**

- **防止失效的连接请求到达服务器**： 如果是两次握手，客户端发送的连接请求到达服务器后，由于网络延迟等原因，可能在一段时间内无法及时响应，此时客户端以为连接已建立成功，开始发送数据，而服务器并没有接收到客户端的请求，导致连接建立失败。通过三次握手，服务器可以确认客户端确实请求建立连接，避免了这种情况。
- **防止已失效的连接请求被服务器接受**： 如果是两次握手，客户端发送的连接请求到达服务器后，服务器发送的响应在网络中滞留，客户端收到响应后以为连接建立成功，开始发送数据。但实际上，服务器并没有收到连接请求，这样就产生了一条无效连接。通过三次握手，服务器可以确认客户端确实发送了连接请求，并且连接成功建立后，才开始传输数据。
- **防止出现已连接的旧数据包请求报文被误认为新连接的请求**： 如果是两次握手，A 发送了一个连接请求，但在路由器长时间滞留，超时了，A 不断重发数据，因为超时了，这时会发一个新的请求 B，B 很可能和原来的 A 的请求一样，这样如果 B 成功了，会发送数据，路由器这时候把原来那个滞留的 A 请求发送过来，这时候 B 的数据就会发送给 A 的服务端。如果是三次握手，B 的成功才是建立的连接。


**为什么不是四次握手而是三次握手？**


如果是四次握手，可能会导致不必要的复杂性和延迟。在 TCP 连接的建立过程中，最关键的是确认双方的通信能力和同步初始序列号，而这可以通过三次握手来实现。

HTTP三次握手四次挥手

欢迎来到我的博客，这里是我分享前端、web3、理财、互联网等方面的知识和心得的地方。我是一名热爱编程的前端程序员，我希望通过我的博客能够帮助更多的人学习和进步。在这里，你可以找到最新最实用的前端技术教程，了解最前沿的互联网动态和趋势，掌握最有效的理财方法和策略。我也会不定期地发布一些个人项目和作品，展示我的创意和能力。如果你对我的博客感兴趣，欢迎你留言、评论、收藏、关注，也可以通过邮箱或社交媒体与我联系，交流学习和合作。谢谢你的支持！