92期

1. 请实现一个多维数组展开的方法？

2. 说说你对dom树的理解，为什么需要虚拟dom

3. 文件上传时，如何限制用户可选择的文件类型

上面问题的答案会在第二天的公众号(程序员每日三问)推文中公布

91期问题及答案

1. JSONP的原理是什么？

JSONP（JSON with Padding）是一种跨域数据请求的技术，它的原理是通过动态创建 <script> 标签来请求数据，以绕过同源策略的限制。以下是 JSONP 的工作原理：

1. 客户端请求数据：当客户端（通常是浏览器）需要从不同域的服务器获取数据时，它会创建一个 <script> 标签，并将请求发送到服务器。

2. 服务器响应包装的数据：服务器接收到请求后，将数据包装在一个函数调用中，这个函数名通常由客户端指定，并作为请求的一个参数传递给服务器。服务器返回的数据形式如下：

   functionName({ "data": "some data" });

   这里的 functionName 是客户端指定的回调函数名，{ "data": "some data" } 是实际的数据。

3. 客户端解析数据：当客户端接收到响应后，它会自动执行 <script> 中包含的 JavaScript 代码。这将调用指定的函数，并传递数据作为参数。

4. 处理数据：客户端在自己的 JavaScript 中定义了该函数，以便在数据到达后进行处理。这意味着客户端可以在页面上动态地处理来自不同域的数据。

JSONP 的优点是简单易用，并且不受同源策略的限制，因此可以用于跨域数据请求。然而，它也有一些缺点：

• 安全性问题：由于 JSONP 请求是通过 <script> 标签加载的，因此存在潜在的安全风险，可能会导致跨站脚本攻击（XSS）。

• 只支持 GET 请求：JSONP 仅支持 GET 请求，无法用于发送敏感数据或执行更复杂的操作。

• 依赖回调函数：客户端必须提供一个回调函数来处理数据，这意味着服务器和客户端之间的通信必须事先协商好函数名。

由于 JSONP 的一些潜在问题，现代前端开发通常更倾向于使用 CORS（跨源资源共享）来进行跨域数据请求，因为它更安全且功能更强大。不过，JSONP 仍然在某些情况下仍然有用，特别是在需要支持老旧浏览器的情况下。

2. css优先级是什么样的？

在 CSS 中，样式的应用顺序和优先级是由一系列规则和权重来决定的，通常按以下顺序进行应用：

1. 浏览器默认样式：浏览器为每个 HTML 元素定义了默认样式。这些默认样式是最低优先级的，因为它们可以被后续的样式规则覆盖。

2. 外部样式表：外部 CSS 文件（如.css文件）中的样式规则。这些规则会应用到整个页面。

3. 内部样式表：在 HTML 文档中使用 <style> 标签定义的样式规则。内部样式表的优先级高于外部样式表，因为它们更接近文档结构。

4. 内联样式：在 HTML 元素中使用 style 属性定义的样式规则。内联样式的优先级最高，因为它们直接应用于单个元素。

5. !important：如果样式规则中使用了 !important 标志，它会覆盖其他所有样式，除非另一个样式规则也使用了 !important，这时权重比较。

6. 选择器权重：当多个规则都适用于同一个元素时，CSS 根据选择器的权重来决定哪个规则应用。选择器的权重通常按以下规则计算：

• 内联样式（1000）

• ID 选择器（100）

• 类选择器、伪类选择器、属性选择器（10）

• 元素选择器、伪元素选择器（1）

• 通用选择器（0）

特殊性：如果选择器权重相同，那么特殊性将决定哪个规则应用。特殊性是一个四元组，通常以 a, b, c, d 的形式表示，其中 a 表示 ID 选择器的数量，b 表示类选择器、伪类选择器和属性选择器的数量，c 表示元素选择器和伪元素选择器的数量，d 表示通用选择器的数量。

例如，对于选择器 div.content p，特殊性为 (0, 0, 2, 1)。

总的来说，选择器权重和特殊性是确定哪个样式规则应用的关键因素。在编写 CSS 时，了解这些规则可以帮助你更好地管理样式并解决冲突。在可能的情况下，最好避免使用 !important，以便保持代码的可维护性。

3. display的值有哪些，分别有什么作用？

display 是 CSS 中一个重要的属性，它用于定义元素的显示方式。不同的 display 值会影响元素在页面中的布局和呈现方式。以下是一些常见的 display 值及其作用：

1. block：

• 元素将以块级元素的方式呈现，即独占一行，从上到下排列。

• 元素会自动扩展到其父容器的宽度。

• 常见的块级元素包括 <div>、<p>、<h1> 等。

inline：

• 元素以行内元素的方式呈现，即在同一行上，从左到右排列。

• 元素的宽度和高度由其内容决定，不会自动扩展父容器。

• 常见的行内元素包括 <span>、<a>、<strong> 等。

inline-block：

• 元素以行内块级元素的方式呈现，即在同一行上，但可以设置宽度和高度。

• 元素的宽度和高度由自身的设置决定，不会自动扩展父容器。

• 常见的使用场景包括创建水平排列的块级元素，如导航菜单。

none：

• 元素不会在页面上显示，完全隐藏。

• 该元素不会占据页面空间，也不会影响布局。

• 常用于通过 JavaScript 动态控制元素的显示与隐藏。

table、table-cell、table-row：

• 这些值用于模拟表格布局，将元素呈现为表格、表格单元格和表格行。

• 通常用于创建复杂的布局结构，例如，垂直居中元素。

flex：

• 元素成为一个弹性容器，子元素可以在其内部进行灵活的布局。

• 通过设置弹性容器和子元素的属性，可以实现响应式的布局。

grid：

• 元素成为一个网格容器，可以使用网格布局定义行和列，实现复杂的二维布局。

• 用于创建复杂的网格式布局。

list-item：

• 用于将元素显示为列表项（通常用于 <li> 元素）。

• 在默认的列表前面添加项目符号（如圆点或数字）。

这只是 display 属性的一部分值，还有其他一些值可以用于特定的布局需求。选择适当的 display 值对于页面布局和设计至关重要，可以根据元素的语义和样式需求来选择合适的值。

学习不打烊，充电加油只为遇到更好的自己,每天早上9点纯手工发布面试题，每天坚持花20分钟来学习与思考，在千变万化，类库层出不穷的今天，不要等到找工作时才狂刷题，提倡每日学习。