2025面试大全（18）1. 遍历数组的方式有哪些？在JavaScript中，遍历数组有多种方式，以下是几种常见的方法

1. 遍历数组的方式有哪些？

在JavaScript中，遍历数组有多种方式，以下是几种常见的方法：

for循环：

for (let i = 0; i < array.length; i++) {
  console.log(array[i]);
}

for...in循环（不推荐用于遍历数组，因为它会遍历数组对象的所有可枚举属性，包括原型链上的属性）：
```
for (let index in array) {
  if (array.hasOwnProperty(index)) {
    console.log(array[index]);
  }
}
```
for...of循环（ES6引入，用于遍历可迭代对象，如数组）：
```
for (let value of array) {
  console.log(value);
}
```

forEach方法：

array.forEach(function(value, index, array) {
  console.log(value);
});

map方法（会返回一个新数组，每个元素都是回调函数的结果）：
```
array.map(function(value, index, array) {
  return value * 2;
});
```
filter方法（会返回一个新数组，包含通过测试（由函数提供）的所有元素）：
```
array.filter(function(value, index, array) {
  return value > 10;
});
```
reduce方法（对数组中的每个元素执行一个由你提供的reducer函数(接受四个参数：累加器accumulator, 当前值currentValue, 当前索引currentIndex, 源数组array)，将其结果汇总为单个返回值）：
```
array.reduce(function(accumulator, currentValue, currentIndex, array) {
  return accumulator + currentValue;
}, 0);
```
some方法（测试数组中的元素是否至少有一个满足条件）：
```
array.some(function(value, index, array) {
  return value > 10;
});
```

every方法（测试数组中的所有元素是否都满足条件）：

array.every(function(value, index, array) {
  return value > 10;
});

Object.keys()（结合使用for...of循环或forEach方法，用于获取数组的索引）：

for (let index of Object.keys(array)) {
  console.log(array[index]);
}
// 或者
Object.keys(array).forEach(function(index) {
  console.log(array[index]);
});

Array.from()（结合使用for...of循环，可以创建一个新数组，并对每个元素执行操作）：
```
for (let value of Array.from(array, value => value * 2)) {
  console.log(value);
}
```

选择哪种方法取决于你的具体需求，例如是否需要返回新数组、是否需要索引、是否需要累加器等。

2. 说说你对 Electron 的了解

Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用程序的框架。它基于 Node.js 和 Chromium，允许开发者使用网页技术来开发桌面应用。以下是我对 Electron 的一些了解： 核心组件：

Chromium：Electron 使用了 Chromium 作为其渲染引擎，这意味着 Electron 应用可以使用最新的网页技术，并且能够渲染复杂的网页内容。
Node.js：Electron 集成了 Node.js，使得开发者可以在 Electron 应用中直接使用 Node.js 的 API，从而实现文件系统操作、网络通信等桌面应用常见的功能。 主要特点：
跨平台：Electron 应用可以在 Windows、macOS 和 Linux 上运行，实现了“一次编写，到处运行”。
丰富的 API：Electron 提供了丰富的 API，包括创建窗口、管理菜单、托盘图标、对话框等，满足桌面应用的各种需求。
社区活跃：Electron 拥有庞大的社区和丰富的第三方库，开发者可以轻松找到各种解决方案和工具。 应用场景：
桌面应用开发：Electron 适用于开发各种桌面应用，如文本编辑器、音乐播放器、聊天应用等。
跨平台开发：对于需要同时在多个平台上运行的应用，Electron 是一个很好的选择。
快速原型开发：由于 Electron 使用网页技术，开发者可以快速构建原型并迭代。优点：
开发效率高：使用熟悉的网页技术进行开发，降低了学习成本。
跨平台兼容性好：只需编写一次代码，即可在多个平台上运行。
功能强大：结合了 Node.js 和 Chromium 的优势，可以实现丰富的功能。缺点：
资源消耗大：由于集成了 Chromium 和 Node.js，Electron 应用的资源消耗相对较大。
性能问题：对于性能要求极高的应用，Electron 可能不是最佳选择。
安全性问题：由于 Electron 应用可以访问本地文件系统和网络，需要特别注意安全性问题。 一些著名的 Electron 应用：

Visual Studio Code：微软开发的流行的代码编辑器。
Slack：团队协作和沟通工具。
Discord：游戏社区和通信平台。
Atom：GitHub 开发的文本编辑器。总的来说，Electron 是一个强大且灵活的框架，适用于开发各种桌面应用。然而，开发者也需要根据具体需求权衡其优缺点。

3. 说说你对flutter的了解

Flutter 是由谷歌开发的一个开源的移动UI框架，用于构建高性能、高保真的跨平台移动应用。它允许开发者使用单一的代码库同时为iOS和Android平台开发应用。以下是关于Flutter的一些关键点： 核心特性：

跨平台：Flutter允许开发者使用相同的代码库构建iOS和Android应用，实现了真正的跨平台开发。
高性能：Flutter应用直接编译为本地ARM代码，性能接近原生应用。
热重载：Flutter提供了热重载功能，允许开发者在应用运行时实时查看代码更改的效果，大大提高了开发效率。
丰富的UI组件：Flutter提供了丰富的内置UI组件，同时支持自定义组件，可以满足各种UI需求。
响应式框架：Flutter采用响应式编程模型，使得UI的构建和状态管理变得简单直观。 技术架构：
Dart语言：Flutter使用Dart语言进行开发，Dart是一种面向对象的编程语言，具有简洁、易学的特点。
Skia渲染引擎：Flutter使用Skia作为其渲染引擎，可以直接渲染到Canvas上，提供了流畅的图形和动画效果。
平台通道：Flutter通过平台通道与原生代码进行交互，可以调用原生API和功能。 应用场景：
移动应用开发：Flutter适用于开发各种类型的移动应用，包括社交、电商、教育等。
快速原型开发：由于Flutter的热重载功能和丰富的UI组件，它非常适合快速构建和迭代原型。
跨平台开发：对于需要同时在iOS和Android平台上运行的应用，Flutter是一个很好的选择。优点：
开发效率高：单一代码库和热重载功能大大提高了开发效率。
性能优秀：接近原生应用的性能表现。
UI一致性：可以轻松实现跨平台UI的一致性。
社区活跃：Flutter拥有活跃的社区和丰富的第三方库。缺点：
学习曲线：对于不熟悉Dart语言的开发者，需要一定的学习成本。
工具链：虽然Flutter的工具链在不断改进，但与成熟的iOS和Android开发工具相比，仍有一定差距。
平台限制：某些特定平台的特性可能需要额外的原生代码实现。 一些著名的Flutter应用：

Google Ads：谷歌的广告管理应用。
Alibaba Xianyu：阿里巴巴的二手交易平台。
Reflectly：一款日记和心理健康应用。总的来说，Flutter是一个强大且灵活的框架，适用于开发高性能、高保真的跨平台移动应用。随着Flutter社区的不断发展，它的应用场景和优势将进一步扩大。

4. 说说你对React Native的了解？

React Native 是由Facebook开发的一个开源框架，允许开发者使用JavaScript和React来开发跨平台的移动应用。它将React的声明式UI编程模型与原生移动平台的渲染能力结合起来，使得开发者可以同时为iOS和Android平台构建应用，而无需编写原生代码。以下是我对React Native的一些了解： 核心特性：

跨平台：React Native允许开发者使用同一套代码库构建iOS和Android应用，提高了开发效率。
原生组件：React Native使用原生组件来渲染UI，这意味着应用的性能和用户体验接近原生应用。
热重载：React Native支持热重载功能，允许开发者在应用运行时实时查看代码更改的效果，加快了开发流程。
丰富的生态系统：React Native拥有庞大的社区和丰富的第三方库，提供了各种工具和组件来扩展应用功能。
声明式UI：React Native采用声明式UI编程模型，使得UI的构建和状态管理变得简单直观。 技术架构：
JavaScript：React Native使用JavaScript作为主要的编程语言，结合React的语法和概念。
React：React Native基于React框架，利用其虚拟DOM和组件化思想来构建移动应用。
原生桥接：React Native通过原生桥接（Native Modules）与原生代码进行交互，可以调用原生API和功能。 应用场景：
移动应用开发：React Native适用于开发各种类型的移动应用，包括社交、电商、教育等。
快速原型开发：由于React Native的热重载功能和丰富的组件库，它非常适合快速构建和迭代原型。
跨平台开发：对于需要同时在iOS和Android平台上运行的应用，React Native是一个很好的选择。优点：
开发效率高：跨平台特性和热重载功能大大提高了开发效率。
性能优秀：使用原生组件渲染UI，性能接近原生应用。
社区活跃：React Native拥有庞大的社区和丰富的第三方库。
学习曲线平缓：对于熟悉React和JavaScript的开发者来说，学习React Native相对容易。缺点：
原生集成：某些复杂的功能可能需要编写原生代码或使用原生模块。
性能差异：虽然性能接近原生，但在某些情况下可能仍存在细微差异。
平台一致性：虽然React Native努力保持UI一致性，但不同平台之间可能仍存在一些差异。 一些著名的React Native应用：

Facebook Ads Manager：Facebook的广告管理应用。
Instagram：社交媒体平台。
Walmart：零售巨头沃尔玛的应用。总的来说，React Native是一个强大且灵活的框架，适用于开发跨平台的移动应用。它的跨平台能力、性能和丰富的生态系统使得它在移动开发领域非常受欢迎。

5. 前端领域有哪些跨端方案？

前端领域的跨端方案指的是能够在多个平台上运行的应用程序开发方法，这些平台包括但不限于Web、iOS、Android、Windows等。以下是一些常见的跨端方案：

Web技术栈跨端：
- ** Progressive Web Apps (PWA)**：通过Web技术提供类似原生应用的体验，可以在浏览器中运行，也可以添加到主屏幕像原生应用一样使用。
- Hybrid Apps：结合Web技术和原生容器（如Cordova、Ionic），通过Web视图展示Web页面，同时可以访问原生设备功能。
JavaScript框架跨端：
- React Native：由Facebook开发，允许使用React和JavaScript编写原生移动应用。
- Weex：由阿里巴巴开发，使用Vue.js或React编写跨平台应用。
- NativeScript：允许使用JavaScript或TypeScript编写原生移动应用，支持Angular和Vue.js。
编译型跨端：
- Flutter：由Google开发，使用Dart语言编写，编译为原生ARM代码，提供高性能的跨平台体验。
- Xamarin：由Microsoft开发，使用C#和.NET框架编写跨平台应用。
多端统一框架：
- Taro：由京东开发，支持使用React语法编写代码，编译为H5、小程序、React Native等多端应用。
- uni-app：由DCloud开发，支持使用Vue.js语法编写代码，编译为H5、小程序、App等多端应用。
快应用和轻应用：
- 快应用：由中国主要手机厂商联合推出，基于Web技术，提供类似小程序的体验，主要在中国市场使用。
- 轻应用：类似于快应用，但可能由不同的厂商或平台推出，侧重于轻量级和快速启动。
桌面端跨平台：
- Electron：由GitHub开发，使用Web技术（HTML、CSS、JavaScript）构建跨平台的桌面应用。
- NW.js：类似于Electron，允许使用Web技术构建桌面应用。
游戏引擎跨端：
- Unity：使用C#编写游戏逻辑，可以编译为多个平台，包括PC、移动设备、游戏主机等。
- Unreal Engine：使用C++编写，同样支持多平台发布。
小程序跨端框架：
- Mpvue：基于Vue.js的小程序开发框架，可以编译为微信小程序、支付宝小程序等。
- Taro：如前所述，也支持小程序的开发。这些跨端方案各有优缺点，选择哪种方案取决于项目的具体需求、开发团队的技能栈、以及对性能和用户体验的要求。随着技术的发展，未来还可能出现新的跨端方案。

6. 说说你对跨平台的理解

跨平台指的是软件或应用程序能够在不同的操作系统、设备或环境中运行，而无需进行大量的修改。这种能力使得开发人员可以更高效地开发应用，因为它们可以为多个平台创建一个通用的代码库，而不是为每个平台单独开发。以下是我对跨平台理解的几个关键点：

代码复用：
- 跨平台开发允许开发者在多个平台上重用相同的代码库，这大大减少了开发时间和成本。
一致性：
- 跨平台应用可以在不同设备上提供一致的用户体验，这意味着用户可以在不同设备上获得相似的功能和界面。
多平台支持：
- 跨平台技术使得应用可以轻松地部署到多个平台，如Windows、macOS、Linux、iOS、Android等。
技术多样性：
- 跨平台开发可以采用多种技术实现，如Web技术（HTML、CSS、JavaScript）、原生技术（Objective-C、Swift、Kotlin）、以及各种框架和工具（如React Native、Flutter、Electron等）。
性能考量：
- 跨平台应用在性能上可能不如原生应用，因为它们通常需要通过抽象层与底层系统交互。然而，随着技术的进步，这一差距正在逐渐缩小。
开发效率：
- 跨平台开发提高了开发效率，因为开发者可以为多个平台编写一次代码，而不是为每个平台单独开发。
市场覆盖：
- 通过跨平台开发，开发者可以更广泛地覆盖市场，因为他们的应用可以在多个平台上运行，触及更多的用户。
维护和更新：
- 跨平台应用通常更容易维护和更新，因为更改可以在一个代码库中完成，然后部署到所有平台。
用户体验：
- 虽然跨平台开发致力于提供一致的用户体验，但有时可能需要针对特定平台进行优化，以充分利用其独特功能和特性。
工具和框架：
- 有许多工具和框架支持跨平台开发，如React Native、Flutter、Xamarin、Ionic等，它们提供了不同的方法和优势。跨平台开发是一种强大的策略，但它也带来了一些挑战，如性能优化、平台特定功能的访问以及用户界面的一致性。因此，选择跨平台开发时，需要仔细考虑项目的具体需求和对用户体验的期望。

7. HTML5 有哪些 drag 相关的 API ？

HTML5 引入了一系列与拖放（drag and drop）相关的 API，使得在网页上实现拖放功能变得更加简单和直观。以下是一些主要的 drag 相关的 API：

DragEvent 接口：
- DragEvent 是一个包含拖放事件详细信息的对象。它继承自 MouseEvent，并添加了与拖放相关的属性和方法。
拖放事件：
- dragstart：当用户开始拖动一个元素时触发。
- drag：当元素被拖动时持续触发。
- dragend：当拖动操作结束时触发。
- dragenter：当拖动的元素进入一个有效的放置目标时触发。
- dragover：当拖动的元素在放置目标上移动时触发。
- dragleave：当拖动的元素离开一个有效的放置目标时触发。
- drop：当元素被放置在放置目标上时触发。
DataTransfer 对象：
- DataTransfer 对象用于在拖放过程中存储和传输数据。它可以通过 DragEvent 对象的 dataTransfer 属性访问。
- setData(format, data)：设置要传输的数据。
- getData(format)：获取传输的数据。
- clearData(format)：清除传输的数据。
- setDragImage(image, x, y)：设置拖动时显示的图像。
EffectAllowed 和 DropEffect：
- effectAllowed：设置或获取允许的拖放效果，如 copy、move、link 等。
- dropEffect：设置或获取当前拖放操作的预期效果。
拖放属性：
- draggable：HTML 属性，用于指定元素是否可拖动。
事件监听器：
- 可以使用 addEventListener 方法为上述拖放事件添加事件监听器。以下是一个简单的示例，展示了如何使用这些 API 实现一个基本的拖放功能：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drag and Drop Example</title>
<style>
  .draggable {
    width: 100px;
    height: 100px;
    background-color: blue;
    color: white;
    padding: 10px;
    cursor: move;
  }
  .dropzone {
    width: 200px;
    height: 200px;
    background-color: lightgray;
    position: absolute;
    top: 150px;
    left: 150px;
  }
</style>
</head>
<body>
<div id="draggable" class="draggable" draggable="true">Drag me!</div>
<div id="dropzone" class="dropzone">Drop here</div>
<script>
  const draggable = document.getElementById('draggable');
  const dropzone = document.getElementById('dropzone');
  draggable.addEventListener('dragstart', (e) => {
    e.dataTransfer.setData('text/plain', 'Dragged content');
  });
  dropzone.addEventListener('dragover', (e) => {
    e.preventDefault(); // Necessary to allow drop
  });
  dropzone.addEventListener('drop', (e) => {
    e.preventDefault();
    const data = e.dataTransfer.getData('text/plain');
    dropzone.textContent = `Dropped: ${data}`;
  });
</script>
</body>
</html>

在这个示例中，我们创建了一个可拖动的元素和一个放置区域。通过监听 dragstart、dragover 和 drop 事件，我们实现了基本的拖放功能。

8. 浏览器乱码的原因是什么？如何解决？

浏览器乱码的原因通常有以下几种：

字符编码设置错误：
- 网页的字符编码与实际内容不匹配，例如页面声明为UTF-8，但内容实际上是GBK编码。
- 浏览器默认编码与页面编码不一致。
服务器配置问题：
- 服务器没有正确设置Content-Type头部，导致浏览器无法识别正确的编码。
文件保存编码错误：
- 编辑器保存网页文件时使用了错误的编码。
浏览器缓存问题：
- 浏览器缓存了错误编码的页面，导致再次访问时仍然显示乱码。
字体不支持：
- 页面中使用了特殊字符，而浏览器或操作系统中没有相应的字体支持。解决浏览器乱码的方法：
检查并设置正确的字符编码：
- 确保网页的<meta>标签中指定的编码与实际内容编码一致，例如<meta charset="UTF-8">。
- 在浏览器中手动设置正确的编码显示（通常在浏览器的查看或设置菜单中可以找到编码选项）。
服务器配置：
- 确保服务器正确设置了Content-Type头部，例如Content-Type: text/html; charset=UTF-8。
使用正确的编辑器保存文件：
- 使用支持UTF-8的编辑器保存网页文件，并确保在保存时选择了正确的编码。
清除浏览器缓存：
- 清除浏览器缓存或尝试使用隐私模式访问页面，以避免缓存导致的乱码问题。
安装缺失的字体：
- 如果是因为字体不支持导致的乱码，可以尝试安装相应的字体。
检查HTTP头部信息：
- 使用开发者工具检查HTTP响应头部，确保Content-Type字段正确。
转换编码：
- 如果内容编码错误，可以使用编码转换工具将内容转换为正确的编码。
避免使用特殊字符：
- 如果可能，避免在网页中使用浏览器或操作系统不支持的特殊字符。通过以上方法，通常可以解决大部分的浏览器乱码问题。如果问题依然存在，可能需要进一步检查网页的源代码、服务器配置或网络传输过程中的编码设置。

9. Canvas和SVG有什么区别？

Canvas和SVG都是HTML5中用于绘制图形的技术，但它们之间有一些关键的区别：

本质区别：
- Canvas：是一个位图渲染环境，它通过JavaScript在画布上绘制像素来创建图形。Canvas是一个HTML元素，可以用于绘制图形、动画、游戏等。
- SVG：是可缩放矢量图形（Scalable Vector Graphics）的缩写，它是一种基于XML的矢量图形格式。SVG用于定义二维图形，可以包括形状、路径、文本等。
分辨率：
- Canvas：依赖于像素，因此其图形在放大时可能会失真，出现像素化。
- SVG：是矢量图形，可以无限放大而不失真，始终保持清晰。
交互性：
- Canvas：不支持事件处理器，要实现交互需要手动计算元素的位置并添加事件监听。
- SVG：每个元素都是独立的DOM节点，可以直接添加事件处理器，实现交互更为简单。
文档结构：
- Canvas：没有内置的文档结构，所有图形都是通过JavaScript绘制在画布上的。
- SVG：具有内置的文档结构，每个图形元素都是XML文档的一部分，可以单独操作和修改。
性能：
- Canvas：在绘制大量图形或复杂动画时，性能通常优于SVG，因为它是直接操作像素的。
- SVG：在处理较少或简单的图形时，性能较好，但在处理大量或复杂的图形时，性能可能不如Canvas。
可编辑性：
- Canvas：一旦绘制完成，就不能再单独编辑画布上的图形元素。
- SVG：可以随时编辑和修改图形元素，因为它们是XML文档的一部分。
文件大小：
- Canvas：通常用于实时渲染，文件大小取决于画布的大小和复杂度。
- SVG：由于是矢量图形，文件大小通常较小，适合用于图标、图表等。
浏览器兼容性：
- Canvas和SVG都被现代浏览器广泛支持，但旧版浏览器可能对SVG的支持不如Canvas。
使用场景：
- Canvas：适合游戏开发、图像处理、实时数据可视化等需要高性能渲染的场景。
- SVG：适合图标、图表、动画、复杂的图形设计等需要高分辨率和交互性的场景。选择Canvas还是SVG取决于具体的项目需求，例如是否需要矢量图形、交互性、性能要求等。在实际应用中，有时也会将两者结合使用，以充分利用它们各自的优点。

10. title与h1的区别、b与strong的区别、i与em的区别？

title与h1的区别：

定义与用途：
- title：是HTML文档的标题标签，它定义了文档的标题，该标题显示在浏览器的标题栏或页面标签上，也用于搜索引擎的结果显示。
- h1：是HTML中的标题元素，用于表示页面内容的主要标题。h1到h6表示六级标题，h1是最高级别的标题。
位置与使用：
- title：位于HTML的<head>部分，每个页面只能有一个title标签。
- h1：位于HTML的<body>部分，一个页面可以有多个h1标签，但通常建议每个页面只有一个h1，以保持语义结构的清晰。
显示与可见性：
- title：不直接在页面内容中显示，而是显示在浏览器的标题栏或标签上。
- h1：直接在页面内容中显示，通常是页面中最突出的标题。
SEO影响：
- title：对SEO非常重要，是搜索引擎判断页面主题的主要依据之一。
- h1：也对SEO有影响，但主要是用于定义页面内容结构，帮助搜索引擎理解页面内容。 b与strong的区别：
语义：
- b：表示文本的样式为粗体，没有实际的语义意义，主要用于视觉上的强调。
- strong：表示文本的重要性、严重性或紧急性，具有实际的语义意义，表示强烈的强调。
使用场景：
- b：用于不需要强调语义，只是想要文本以粗体显示的场景。
- strong：用于需要强调文本重要性的场景。
屏幕阅读器：
- b：屏幕阅读器可能不会特别强调。
- strong：屏幕阅读器会特别强调，以传达文本的重要性。 i与em的区别：
语义：
- i：表示文本的样式为斜体，没有实际的语义意义，最初用于表示不同的语言或技术术语。
- em：表示文本的强调，具有实际的语义意义，表示强调的语气。
使用场景：
- i：用于不需要强调语义，只是想要文本以斜体显示的场景，如外来语、术语等。
- em：用于需要强调文本语气的场景。
屏幕阅读器：
- i：屏幕阅读器可能不会特别强调。
- em：屏幕阅读器会特别强调，以传达文本的强调语气。总结来说，title与h1在定义、位置、显示和SEO影响上有明显区别；b与strong、i与em主要在语义和屏幕阅读器的处理上有区别。在现代网页设计中，推荐使用具有语义意义的标签（如strong、em）来确保内容的可访问性和语义清晰。

11. 浏览器是如何对 HTML5 的离线储存资源进行管理和加载？

浏览器对HTML5的离线存储资源进行管理和加载主要通过以下技术实现：应用程序缓存（AppCache）和IndexedDB。以下是这些技术的基本工作原理：

应用程序缓存（AppCache）

AppCache允许开发者指定哪些文件在用户离线时可用。这通过在HTML文档的<html>标签中添加manifest属性来实现，该属性指向一个缓存清单文件（.appcache文件）。

缓存清单文件（.appcache）

缓存清单文件列出了需要缓存的资源，以及缓存的行为规则。一个简单的缓存清单文件可能如下所示：

CACHE MANIFEST
# 版本号，更新资源时需要更改版本号以更新缓存
# Version 1.0
CACHE:
index.html
styles.css
scripts.js
images/logo.png
NETWORK:
*
FALLBACK:
/ /offline.html

CACHE: 后面列出的资源将在首次加载时被缓存。
NETWORK: 表示哪些资源永远不缓存，总是从网络获取。
FALLBACK: 定义了当资源无法加载时的替代资源。

缓存过程

首次访问：当用户首次访问页面时，浏览器会下载并缓存清单中列出的所有资源。
后续访问：在后续访问中，浏览器会首先检查清单文件是否有更新。如果有更新，浏览器会下载新的清单和列出的资源。
离线访问：当用户离线时，浏览器会使用已缓存的资源来显示页面。

缓存更新

手动更新：通过更改缓存清单文件中的版本号，浏览器会检测到变化并更新缓存。
自动更新：浏览器会定期检查缓存清单文件是否有更新。

IndexedDB

IndexedDB是一种低级API，用于客户端存储大量结构化数据。它允许开发者存储和检索对象，使用索引进行快速搜索。

数据存储

打开数据库：使用indexedDB.open()方法打开或创建数据库。
创建对象存储空间：在数据库中创建对象存储空间，类似于关系数据库中的表。
添加数据：使用事务将数据添加到对象存储空间。

数据检索

使用索引或键来检索存储在IndexedDB中的数据。

离线加载

当用户离线时，浏览器会根据以下规则加载资源：

缓存优先：如果资源在AppCache中，浏览器会直接从缓存加载。
网络回退：如果资源不在缓存中，且定义为NETWORK:，浏览器会尝试从网络加载。
替代资源：如果资源无法加载，且定义了FALLBACK:，浏览器会加载替代资源。

注意事项

缓存管理：开发者需要小心管理缓存，以避免缓存过时或资源浪费。
兼容性：不同浏览器对离线存储的支持程度不同，需要考虑兼容性问题。
安全性：离线存储的数据可能包含敏感信息，需要确保数据安全。随着技术的发展，一些新的API（如Service Workers）也为离线存储和资源管理提供了更强大的功能。Service Workers可以更精细地控制资源的缓存和更新，以及处理复杂的离线场景。

12. HTML5的离线储存怎么使用，它的工作原理是什么

HTML5的离线存储主要通过两种技术实现：应用程序缓存（AppCache）和Web存储（包括localStorage和sessionStorage）。以下是这两种技术的使用方法和工作原理：

应用程序缓存（AppCache）

使用方法

创建缓存清单文件：创建一个扩展名为.appcache的文件，例如cache.manifest。

编辑缓存清单文件：在文件中列出需要缓存的资源，以及缓存的行为规则。例如：

CACHE MANIFEST
# 版本号，更新资源时需要更改版本号以更新缓存
# Version 1.0
CACHE:
index.html
styles.css
scripts.js
images/logo.png
NETWORK:
*
FALLBACK:
/ /offline.html

在HTML文档中引用缓存清单：在HTML文档的<html>标签中添加manifest属性，指向缓存清单文件：
```
<!DOCTYPE html>
<html lang="en" manifest="cache.manifest">
```
配置服务器：确保服务器正确配置，以支持.appcache文件的MIME类型text/cache-manifest。

工作原理

首次访问：当用户首次访问页面时，浏览器会下载并缓存清单中列出的所有资源。
后续访问：在后续访问中，浏览器会首先检查清单文件是否有更新。如果有更新，浏览器会下载新的清单和列出的资源。
离线访问：当用户离线时，浏览器会使用已缓存的资源来显示页面。
缓存更新：
- 手动更新：通过更改缓存清单文件中的版本号，浏览器会检测到变化并更新缓存。
- 自动更新：浏览器会定期检查缓存清单文件是否有更新。

Web存储（localStorage和sessionStorage）

使用方法

存储数据：使用localStorage或sessionStorage对象存储数据：

// localStorage存储数据
localStorage.setItem('key', 'value');
// sessionStorage存储数据
sessionStorage.setItem('key', 'value');

检索数据：使用getItem方法检索数据：

// 获取localStorage中的数据
var value = localStorage.getItem('key');
// 获取sessionStorage中的数据
var value = sessionStorage.getItem('key');

删除数据：使用removeItem方法删除数据：

// 删除localStorage中的数据
localStorage.removeItem('key');
// 删除sessionStorage中的数据
sessionStorage.removeItem('key');

清空存储：使用clear方法清空所有存储的数据：

// 清空localStorage
localStorage.clear();
// 清空sessionStorage
sessionStorage.clear();

工作原理

localStorage：
- 数据永久存储，直到被显式删除。
- 数据在所有同源页面之间共享。
sessionStorage：
- 数据只在当前会话中有效，当浏览器标签关闭后，数据被清除。
- 数据只在当前标签页中有效，不同标签页之间的数据不共享。

注意事项

兼容性：不同浏览器对离线存储的支持程度不同，需要考虑兼容性问题。
存储限制：浏览器对离线存储的大小有限制，通常在5MB左右。
安全性：离线存储的数据可能包含敏感信息，需要确保数据安全。随着技术的发展，一些新的API（如Service Workers）也为离线存储和资源管理提供了更强大的功能。Service Workers可以更精细地控制资源的缓存和更新，以及处理复杂的离线场景。

13. img的srcset属性的作⽤？

img标签的srcset属性是响应式网页设计中的一个重要特性，它允许开发者根据不同屏幕尺寸、分辨率或设备像素比（DPR）提供不同大小的图像资源。这样可以让浏览器根据用户的设备条件选择最合适的图像进行加载，从而提高页面加载速度和用户体验。

`srcset`属性的基本用法

srcset属性接受一个或多个图像资源描述，每个描述包括图像的URL和对应的条件（如像素密度或视口宽度）。描述之间用逗号分隔。例如：

<img src="image.jpg" srcset="image-320w.jpg 320w, image-480w.jpg 480w, image-800w.jpg 800w" alt="示例图片">

在这个例子中，srcset属性列出了三个不同宽度的图像文件。每个文件后跟着一个宽度描述符（如320w），表示图像的原始宽度。

`srcset`与`sizes`属性结合使用

为了更精确地控制在不同条件下加载的图像，srcset通常与sizes属性结合使用。sizes属性定义了一组媒体条件（如屏幕宽度）和对应的图像显示宽度。例如：

<img src="image.jpg" srcset="image-320w.jpg 320w, image-480w.jpg 480w, image-800w.jpg 800w" sizes="(max-width: 600px) 320px, (max-width: 900px) 480px, 800px" alt="示例图片">

在这个例子中，sizes属性指定了在不同屏幕宽度下图像的显示宽度。浏览器会根据这些信息选择最合适的图像资源。

`srcset`的像素密度描述符

除了宽度描述符，srcset还可以使用像素密度描述符（如1x, 2x, 3x）来指定不同设备像素比下的图像。例如：

<img src="image.jpg" srcset="image-1x.jpg 1x, image-2x.jpg 2x, image-3x.jpg 3x" alt="示例图片">

在这个例子中，浏览器会根据设备的像素密度选择相应的图像文件。

`srcset`的作用

提高性能：通过只加载适合设备条件的图像，减少不必要的数据传输，提高页面加载速度。
改善用户体验：在不同设备上提供适当大小的图像，避免图像过小或过大，提升视觉效果。
响应式设计：使图像适应不同屏幕尺寸和分辨率，实现真正的响应式网页设计。

注意事项

兼容性：虽然现代浏览器普遍支持srcset属性，但旧版浏览器可能不支持。为了确保兼容性，应始终提供src属性作为默认图像。
图像服务器：使用srcset可能需要服务器支持图像的动态裁剪和缩放，以生成不同尺寸的图像文件。
清晰度：在选择图像大小时，应考虑图像的清晰度和细节，避免因过度压缩而损失质量。通过合理使用srcset属性，开发者可以更好地控制网页中的图像资源，为用户提供更快、更优的浏览体验。

14. 怎么实现一个宽高自适应的正方形？

要实现一个宽高自适应的正方形，可以使用多种CSS技术。以下是几种常见的方法：

方法1：使用CSS的`padding-top`属性

利用CSS的padding-top属性，可以根据父容器的宽度来设置高度，从而创建一个正方形。这种方法基于一个事实：padding-top的百分比是基于包含块的宽度来计算的。

<div class="square-container">
  <div class="square-content">
    <!-- 内容 -->
  </div>
</div>

.square-container {
  width: 100%; /* 容器宽度 */
  position: relative; /* 相对定位 */
}
.square-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.square-container:before {
  content: '';
  display: block;
  padding-top: 100%; /* 高度设为宽度的100% */
}

方法2：使用CSS的`vw`单位

使用视口宽度单位vw可以创建一个基于视口宽度的正方形。

<div class="square">
  <!-- 内容 -->
</div>

.square {
  width: 50vw; /* 宽度设为视口宽度的50% */
  height: 50vw; /* 高度与宽度相同 */
}

这种方法的问题在于，正方形的尺寸会随着视口宽度的变化而变化，可能不是所有情况下都适用。

方法3：使用CSS的`flexbox`

利用Flexbox布局，可以很容易地创建一个宽高相同的正方形。

<div class="square-flex">
  <!-- 内容 -->
</div>

.square-flex {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  width: 100%; /* 容器宽度 */
}
.square-flex:before {
  content: '';
  display: block;
  padding-top: 100%; /* 高度设为宽度的100% */
}

方法4：使用CSS的`grid`

CSS Grid布局也可以用来创建正方形。

<div class="square-grid">
  <!-- 内容 -->
</div>

.square-grid {
  display: grid;
  width: 100%; /* 容器宽度 */
  grid-template-rows: 1fr; /* 设置网格行 */
  grid-template-columns: 1fr; /* 设置网格列 */
}
.square-grid:before {
  content: '';
  width: 100%; /* 宽度设为100% */
  padding-top: 100%; /* 高度设为宽度的100% */
  grid-row: 1 / 2; /* 占据第一行 */
  grid-column: 1 / 2; /* 占据第一列 */
}

方法5：使用CSS的`aspect-ratio`

CSS的aspect-ratio属性可以直接设置元素的宽高比，从而创建一个正方形。

<div class="square-aspect">
  <!-- 内容 -->
</div>

.square-aspect {
  width: 100%; /* 容器宽度 */
  aspect-ratio: 1 / 1; /* 宽高比为1:1 */
}

这种方法是最直接和简单的，但请注意aspect-ratio属性的浏览器兼容性。选择哪种方法取决于你的具体需求和浏览器兼容性要求。以上方法都可以实现一个宽高自适应的正方形，可以根据实际情况进行选择。

15. z-index属性在什么情况下会失效？

z-index属性用于控制元素的堆叠顺序（即层叠上下文），但在某些情况下可能会失效或表现不如预期。以下是一些可能导致z-index失效的情况：

没有定位的元素： z-index只对定位元素（position: absolute、position: relative、position: fixed或position: sticky）有效。如果元素没有设置这些定位属性，z-index将不起作用。
层叠上下文的问题： z-index只在同一个层叠上下文中有效。如果两个元素的层叠上下文不同，那么即使一个元素的z-index值较高，它也可能被另一个层叠上下文中的元素覆盖。
父元素的z-index：如果一个元素的父元素创建了新的层叠上下文（例如，父元素设置了z-index、opacity小于1、transform不是none等），那么该元素的z-index值将只在父元素的层叠上下文中有效。
z-index值为auto：如果z-index的值为auto，元素将根据其在DOM中的位置进行堆叠，而不是根据z-index值。
同级元素的z-index：如果两个同级元素都没有设置z-index，或者都设置为auto，那么它们将根据在DOM中的顺序堆叠，后出现的元素将覆盖先出现的元素。
position: static的子元素：即使父元素设置了z-index，如果子元素是position: static，子元素的z-index也不会起作用。
浏览器兼容性问题：不同浏览器对z-index的实现可能略有不同，可能导致在某些浏览器中z-index的表现不如预期。
CSS滤镜和混合模式：使用某些CSS滤镜（如blur）或混合模式（如mix-blend-mode）可能会影响元素的层叠上下文，从而影响z-index的行为。
will-change属性：如果元素设置了will-change属性，且值为transform或opacity，它可能会创建一个新的层叠上下文，从而影响z-index。
HTML5视频元素：在某些浏览器中，<video>元素可能会创建一个独立的层叠上下文，导致z-index无法将其覆盖。为了避免z-index失效，确保你正确地设置了元素的定位属性，并且理解了层叠上下文的工作原理。在复杂布局中，特别是在使用CSS3属性时，要特别注意层叠上下文的创建和影响。

16. 说说对 CSS 工程化的理解

CSS工程化是指将工程化的理念应用于CSS开发中，以提高开发效率、可维护性和可扩展性。随着前端项目的规模和复杂性不断增加，传统的CSS编写方式已经无法满足现代开发的需求，因此CSS工程化应运而生。以下是对CSS工程化的一些理解： 1. 模块化

将CSS代码分割成多个模块，每个模块负责一个特定的功能或组件。
通过模块化，可以避免全局污染，提高代码的可维护性。
常用的模块化方案包括CSS Modules、BEM等。 2. 组件化
将UI拆分成独立的、可复用的组件。
每个组件包含自己的HTML、CSS和JavaScript，形成封闭的单元。
组件化有助于提高开发效率和代码复用性。 3. 预处理器
使用CSS预处理器（如Sass、Less、Stylus等）来扩展CSS的功能。
预处理器提供了变量、嵌套、混合、函数等高级功能，使CSS更加灵活和强大。
通过预处理器，可以更好地组织代码，提高开发效率。 4. 后处理器
使用CSS后处理器（如PostCSS）对CSS代码进行转换和优化。
后处理器可以自动添加浏览器前缀、压缩代码、转换未来的CSS语法等。
通过后处理器，可以确保CSS代码的兼容性和性能。 5. 工作流
建立高效的CSS开发工作流，包括代码编写、编译、打包、压缩等环节。
使用构建工具（如Webpack、Gulp等）自动化工作流，提高开发效率。
通过工作流，可以确保代码的质量和一致性。 6. 性能优化
优化CSS代码的性能，包括减少重绘和回流、压缩代码、移除未使用的样式等。
使用性能分析工具来识别和解决性能问题。
性能优化是CSS工程化的重要目标之一。 7. 可维护性
通过良好的代码组织和命名规范，提高CSS代码的可维护性。
使用文档和注释来记录代码的功能和用法。
可维护性是确保项目长期稳定发展的关键。 8. 可扩展性
设计可扩展的CSS架构，以适应项目的不断变化和增长。
使用变量和混合等高级功能来创建可复用的样式。
可扩展性有助于减少未来开发的成本和复杂性。 9. 工具和插件
利用各种CSS工具和插件来提高开发效率和质量。
例如，使用CSS Lint进行代码检查，使用PurgeCSS移除未使用的样式等。 10. 团队协作
建立团队协作规范，确保团队成员之间的代码风格和标准一致。
使用版本控制工具（如Git）来管理代码变更和协作。总之，CSS工程化是一种将工程化理念应用于CSS开发的方法论，旨在提高开发效率、可维护性和可扩展性。通过模块化、组件化、预处理器、后处理器、工作流、性能优化、可维护性、可扩展性、工具和插件以及团队协作等手段，可以更好地应对现代前端开发的需求和挑战。

17. Sass、Less 是什么？为什么要使用他们？

Sass和Less是什么？ Sass和Less都是CSS预处理器，它们为CSS增加了一些编程特性，使得CSS的开发更加灵活和强大。

Sass（Syntactically Awesome Stylesheets）：是最早的CSS预处理器之一，使用Ruby编写。Sass提供了变量、嵌套、混合（mixins）、继承等功能，并且有两种语法格式：一种是缩进语法（Indented Syntax），另一种是SCSS（Sassy CSS），后者与CSS语法类似，使用大括号和分号。
Less（Leaner CSS）：是另一种流行的CSS预处理器，使用JavaScript编写。Less也提供了变量、嵌套、混合、函数等功能，并且它的语法与CSS非常相似，易于学习和使用。 为什么要使用Sass和Less？ 使用Sass和Less等CSS预处理器的主要原因是它们提供了以下优势：

变量：允许定义变量来存储颜色、字体大小、宽度等常用值，便于统一管理和修改。
嵌套：允许嵌套CSS规则，使得代码结构更加清晰，与HTML结构保持一致。
混合（Mixins）：允许创建可复用的代码块，减少重复代码，提高开发效率。
继承：允许一个选择器继承另一个选择器的属性，实现代码的复用和扩展。
函数和运算：提供数学运算和颜色函数等，便于实现复杂的样式效果。
模块化：通过分割文件和组织代码，实现模块化开发，提高可维护性。
编译时优化：在编译过程中可以自动添加浏览器前缀、压缩代码、移除未使用的样式等，优化性能。
提升开发效率：通过预处理器的高级功能，可以更快地编写和维护CSS代码。
兼容性：Sass和Less最终都会编译成标准的CSS，确保兼容所有浏览器。
社区和生态系统：Sass和Less都有庞大的社区和丰富的插件生态系统，提供了大量的资源和工具。总之，Sass和Less通过提供编程特性、优化开发流程、提高代码可维护性等优点，成为了现代前端开发中不可或缺的工具。选择使用Sass还是Less通常取决于个人偏好、项目需求以及团队习惯。

18. 怎么实现单行、多行文本溢出隐藏？

在CSS中，实现单行和多行文本溢出隐藏通常涉及到使用text-overflow属性。以下是一些实现方法：

单行文本溢出隐藏

要隐藏单行溢出的文本，可以设置white-space属性为nowrap，并结合overflow属性为hidden：

 Overflow: hidden;
 white-space: nowrap;

多行文本溢出隐藏

对于多行文本溢出，只需设置overflow属性为hidden：

 Overflow: hidden;

示例

.div {
  width: 100px;
  border: 1px solid black;
  padding: 10px;
  overflow: hidden;
  white-space: nowrap; /* 对于单行溢出 */
}
.div {
  width: 100px;
  border: 1px solid black;
  padding: 10px;
  overflow: hidden; /* 对于多行溢出 */
}

说明

overflow: hidden：隐藏溢出的内容。
white-space: nowrap：禁止换行，使得所有文本都在一行显示，适用于单行溢出。通过组合使用这些属性，可以灵活地控制文本溢出的行为，满足不同布局需求。

注意

使用white-space: nowrap时，应注意避免过长的不可换行文本导致布局问题。
隐藏溢出内容时，应确保内容对用户仍是可访问的，比如通过滚动或展开按钮。通过这些方法，可以有效地控制文本溢出，提升页面布局的整洁性和用户体验。

19. CSS预处理器/后处理器是什么？为什么要使用它们？

CSS预处理器和CSS后处理器是两种不同的工具，它们用于增强CSS的功能，使得编写和维护样式表变得更加高效和强大。

CSS预处理器

CSS预处理器是一种语言，它为CSS增加了编程特性，如变量、嵌套、混合（mixins）、函数和运算等。这些特性在编译时会被转换成普通的CSS，然后由浏览器解析。常见的CSS预处理器包括：

Sass（Syntactically Awesome Stylesheets）
Less（Leaner CSS）
Stylus 为什么要使用CSS预处理器？

变量：允许定义全局或局部的变量，方便重复使用和修改。
嵌套：允许嵌套CSS规则，使得结构更加清晰。
混合（Mixins）：允许创建可重用的代码块。
函数和运算：允许进行数学运算和自定义函数，增加灵活性。
继承：允许一个选择器继承另一个选择器的属性。
模块化：通过导入功能，可以更好地组织代码，实现模块化。

CSS后处理器

CSS后处理器是在CSS文件已经编写完成后对其进行处理的工具。它们通常用于添加浏览器前缀、压缩CSS文件、优化代码等。常见的CSS后处理器包括：

PostCSS
Autoprefixer（通常作为PostCSS的一个插件使用） 为什么要使用CSS后处理器？

自动添加浏览器前缀：确保CSS兼容多个浏览器。
压缩和优化：减小文件大小，提高加载速度。
代码检查：检查CSS代码的错误和潜在问题。
未来特性：通过插件实现CSS未来的特性，提前使用新功能。
自定义处理：可以通过编写插件来实现自定义的CSS处理逻辑。

总结

CSS预处理器和后处理器都是为了提高开发效率和代码质量而存在的。预处理器更注重于编写时的便利和强大功能，而后处理器则更注重于优化和兼容性处理。根据项目需求和个人偏好，可以选择使用其中的一种或两者结合使用。

20. 为什么有时候⽤translate来改变位置⽽不是使用position进行定位？

使用 transform: translate 来改变元素位置而不是使用 position 进行定位的原因有很多，以下是其中一些主要原因：

性能优化：
- transform 使用硬件加速（如果浏览器支持），可以更流畅地进行动画处理，尤其是在移动设备上。
- transform 不触发整个页面的重排（reflow）和重绘（repaint），只有变换的元素本身会进行合成（composite），这大大减少了计算量。
保持布局稳定性：
- 使用 position 定位（如 relative, absolute）可能会改变元素在文档流中的位置，影响其他元素的布局。
- transform: translate 不会改变元素在文档流中的位置，只是视觉上移动了元素，不会影响其他元素的布局。
精确控制：
- translate 可以接受百分比单位，相对于自身元素的大小进行移动，这使得定位更加灵活和精确。
- translate 还可以很容易地实现居中定位，而不需要计算具体的像素值。
兼容性：
- 现代浏览器对 transform 的支持很好，而且很多旧的浏览器也通过前缀的方式支持这一特性。
复合变换：
- transform 可以同时应用多个变换效果，如旋转（rotate）、缩放（scale）、倾斜（skew）等，而不仅仅是平移。
动画和过渡：
- transform 属性非常适合用于CSS动画和过渡，因为它的变化可以由浏览器优化，实现平滑的动画效果。
避免闪烁：
- 在某些情况下，使用 position 定位的元素在动画过程中可能会出现闪烁，而 transform 则不会出现这种情况。
响应式设计：
- translate 可以与媒体查询结合使用，实现更灵活的响应式布局调整。总之，transform: translate 提供了一种高效、灵活且性能优化的方式来改变元素的位置，特别是在需要动画和保持布局稳定性的场景下，它通常是优于使用 position 定位的选项。然而，这并不意味着 position 定位没有用武之地，根据具体的需求和场景，选择最合适的方法才是关键。

21. transition和animation的区别

transition 和 animation 都是 CSS3 中引入的属性，用于实现元素的动态效果，但它们在实现方式、用途和灵活性方面有所不同：

Transition（过渡）：

定义状态变化：
- transition 用于定义元素从一个状态过渡到另一个状态的样式变化。
- 常用于实现淡入（fade-in）、淡出（fade-out）、滑动（slide）、展开（expand）等效果。
触发方式：
- transition 可以由特定事件触发，如鼠标悬停（hover）、点击（click）等。
- 过渡效果在事件触发时开始。
多属性变化：
- transition 可以同时应用多个属性变化，如颜色变化、大小变化等。
- 适用于实现复杂的动画效果。
时间控制：
- transition 提供了 transition-duration 和 transition-delay 属性，用于控制动画的持续时间和开始时间。
- 可以精确控制动画的时序。

Animation（动画）：

连续变化：
- animation 用于实现连续的属性变化，如位置、大小、颜色等。
- 适用于实现复杂的动画序列。
逐帧动画：
- animation 可以逐帧定义动画，实现更精细的动画控制。
- 适用于需要精确控制每一帧的场景。
关键帧：
- animation 允许定义关键帧，在动画序列中指定特定的时间点。
- 可以实现更复杂的动画路径。
重复性：
- animation 可以设置动画的重复次数和方向。
复合动画：
- animation 可以同时应用多个动画效果，实现复杂的动画组合。

区别总结：

**transition 更适合于实现简单的状态变化，如淡入淡出，且通常用于触发特定事件。
**animation 更适合于实现复杂的、连续的属性变化，可以逐帧定义，且通常用于创建复杂的动画序列。两者都可以用于实现元素的动态效果，但 transition 更侧重于状态变化，而 animation 更侧重于连续的属性变化和复杂的动画序列。根据具体需求选择合适的方式是关键。

22. 说说你对 new.target 的理解

new.target 是一个元属性（meta-property），它在 JavaScript 的构造函数中用于检测函数是否是通过 new 操作符被调用的。这个特性是在 ECMAScript 2015（也称为 ES6）中引入的。

基本概念：

当一个函数被作为构造函数使用时（即通过 new 操作符调用），new.target 会被设置为该函数的引用。
如果函数不是通过 new 操作符调用的，new.target 将是 undefined。

用途：

检测构造函数调用方式：
- 可以用来判断函数是否作为构造函数被调用，从而决定是否需要执行特定的初始化代码。
强制使用 new 调用：
- 可以在函数内部检查 new.target，如果它是 undefined，则抛出错误，强制用户使用 new 操作符。
实现多态：
- 在基类构造函数中，可以通过 new.target 来判断子类的类型，从而实现多态行为。

示例：

function MyConstructor() {
  if (new.target === undefined) {
    throw new Error('This function must be called with the new operator.');
  }
  this.prop = 'some value';
}
// 正确的调用方式
const myInstance = new MyConstructor();
console.log(myInstance.prop); // 输出: some value
// 错误的调用方式，会抛出错误
MyConstructor(); // 抛出错误: This function must be called with the new operator.

在类中的使用：

在类构造函数中，new.target 也可以用来检测类是否被正确地实例化：

class MyClass {
  constructor() {
    if (new.target === MyClass) {
      console.log('MyClass was directly instantiated');
    } else {
      console.log('MyClass was instantiated by a subclass');
    }
  }
}
class MySubClass extends MyClass {}
new MyClass(); // 输出: MyClass was directly instantiated
new MySubClass(); // 输出: MyClass was instantiated by a subclass

在这个例子中，new.target 在基类 MyClass 的构造函数中用来检测实例化是否由子类 MySubClass 引发。

注意事项：

new.target 只在函数或类的构造函数中使用时才有意义。
在箭头函数中，new.target 不会起作用，因为箭头函数不能作为构造函数使用。 new.target 是一个强大的工具，可以帮助开发者更好地控制他们的构造函数和类的行为，确保它们按照预期被使用。

23. 如何让 useEffect 支持 async/await？

在 React 中，useEffect Hook 本身并不直接支持 async/await 语法，因为 useEffect 的回调函数应该返回一个清理函数或者不返回任何值。然而，你可以在 useEffect 的回调函数内部定义一个异步函数，并立即调用它。这样，你就可以在 useEffect 中使用 async/await 了。以下是一个如何在 useEffect 中使用 async/await 的示例：

import React, { useEffect, useState } from 'react';
function MyComponent() {
  const [data, setData] = useState(null);
  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('https://api.example.com/data');
        const json = await response.json();
        setData(json);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    }
    fetchData();
  }, []); // 空依赖数组表示这个 effect 只在组件挂载时运行一次
  if (data === null) {
    return <div>Loading...</div>;
  }
  return (
    <div>
      {/* 渲染数据 */}
    </div>
  );
}
export default MyComponent;

在这个例子中，useEffect 的回调函数内部定义了一个名为 fetchData 的异步函数。这个函数使用 async/await 来获取数据，并在获取数据后更新状态。然后，我们立即调用 fetchData() 函数。

注意事项：

依赖数组：确保 useEffect 的依赖数组正确，以避免不必要的重新渲染或数据获取。
清理函数：如果异步操作需要清理（例如，取消未完成的请求），你可以在异步函数内部返回一个清理函数，并在 useEffect 的回调函数中返回它。

useEffect(() => {
  let isMounted = true; // 标记组件是否已挂载
  async function fetchData() {
    try {
      const response = await fetch('https://api.example.com/data');
      const json = await response.json();
      if (isMounted) { // 只有在组件挂载时才更新状态
        setData(json);
      }
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  }
  fetchData();
  return () => {
    isMounted = false; // 组件卸载时，更新标记
  };
}, []);

在这个改进的例子中，我们使用了一个 isMounted 标记来确保在组件卸载后不会调用 setData，从而避免潜在的内存泄漏问题。通过这种方式，你可以在 useEffect 中有效地使用 async/await 来处理异步操作。

24. arguments 这种类数组，如何遍历类数组？

类数组（array-like）对象是指那些具有索引和 length 属性，但不具有数组方法（如 map、filter 等）的对象。arguments 对象就是一个典型的类数组对象，它包含了函数调用时传入的所有参数。遍历类数组对象的方法有以下几种：

1. 使用 `for` 循环

function myFunction() {
  for (var i = 0; i < arguments.length; i++) {
    console.log(arguments[i]);
  }
}
myFunction(1, 2, 3); // 输出：1, 2, 3

2. 使用 `Array.prototype.forEach.call`

function myFunction() {
  Array.prototype.forEach.call(arguments, function(arg) {
    console.log(arg);
  });
}
myFunction(1, 2, 3); // 输出：1, 2, 3

3. 使用展开运算符（`...`）将类数组转换为数组

function myFunction() {
  const argsArray = [...arguments];
  argsArray.forEach(arg => {
    console.log(arg);
  });
}
myFunction(1, 2, 3); // 输出：1, 2, 3

4. 使用 `Array.from` 方法将类数组转换为数组

function myFunction() {
  const argsArray = Array.from(arguments);
  argsArray.forEach(arg => {
    console.log(arg);
  });
}
myFunction(1, 2, 3); // 输出：1, 2, 3

5. 使用 `for...of` 循环（ES6）

function myFunction() {
  for (const arg of arguments) {
    console.log(arg);
  }
}
myFunction(1, 2, 3); // 输出：1, 2, 3

注意事项：

性能：在性能敏感的场景下，直接使用 for 循环可能更高效，因为它避免了额外的函数调用或数组转换。
兼容性：展开运算符和 Array.from 方法是 ES6 引入的，如果需要支持旧版浏览器，请使用 for 循环或 Array.prototype.forEach.call。选择哪种方法取决于你的具体需求和代码风格。在现代 JavaScript 中，使用展开运算符或 Array.from 方法是一种更简洁和直观的方式。

25. 连续 bind()多次，输出的值是什么？

在JavaScript中，Function.prototype.bind()方法创建一个新的函数，这个新函数的this被绑定到指定的值，并且可以预置一些参数。当你连续调用bind()多次时，每个bind()调用都会创建一个新的函数，并且将this绑定到当前函数的this。

function fn(a, b) {
  console.log(this, a, b);
}
const obj1 = { name: 'obj1' };
const obj2 = { name: 'obj2' };
const boundFn1 = fn.bind(obj1, 1);
const boundFn2 = boundFn1.bind(obj2, 2);
boundFn2(); // 输出：{ name: 'obj1' } 1 2

在这个例子中，尽管我们尝试将boundFn1的this绑定到obj2，但boundFn2的this仍然指向obj1。这是因为第一次bind()调用已经将this绑定到obj1，并且这个绑定不会在后续的bind()调用中被改变。总结：

连续调用bind()多次时，只有第一次bind()的this绑定会生效。
后续的bind()调用可以预置更多的参数，但这些参数会追加到之前bind()调用预置的参数后面。因此，在连续bind()多次的情况下，输出的this值将是第一次bind()调用时指定的对象，而参数则是按照bind()调用的顺序拼接起来的。

26. new fn与new fn()有什么区别吗？

在JavaScript中，new fn和new fn()都是用来创建对象实例的语法，它们在大多数情况下是等价的。不过，它们之间有一个微妙的区别，主要体现在参数传递的方式上。

new fn：
- 这种语法不会调用fn作为函数，而是直接使用fn的构造器属性来创建一个新对象。
- 如果fn期望接收参数，那么这种语法无法直接传递参数。
new fn()：
- 这种语法会调用fn作为函数，并在创建新对象之前执行fn内部的代码。
- 可以在括号中传递参数给fn。举个例子：

function Person(name) {
  this.name = name;
}
// 使用 new fn
var person1 = new Person; // 这将创建一个Person对象，但name属性将是undefined
// 使用 new fn()
var person2 = new Person('Alice'); // 这将创建一个Person对象，并且name属性被设置为'Alice'

在上述例子中，person1是通过new Person创建的，没有传递任何参数，所以name属性是undefined。而person2是通过new Person('Alice')创建的，传递了参数'Alice'，所以name属性被设置为'Alice'。总结：

new fn和new fn()在创建对象实例时是类似的，但new fn()允许你传递参数给构造函数。
在不传递参数的情况下，new fn和new fn()是等价的。
为了代码的清晰性和可读性，通常建议使用new fn()语法，即使不需要传递参数。

27. 说说你对自定义hook的理解

自定义 Hook 是 React Hook 的一种高级用法，它允许开发者根据具体的需求封装和复用组件逻辑。在 React 中，Hook 是一些特殊的函数，它们可以让我们在函数组件中“钩入”React 的状态管理和生命周期等特性。 自定义 Hook 的核心思想：

复用逻辑：将组件间共享的逻辑抽象到自定义 Hook 中，避免重复代码。
抽象复杂性：将复杂的逻辑封装在自定义 Hook 中，使组件本身更加简洁和易于理解。
分离关注点：通过自定义 Hook，可以将数据获取、状态管理、副作用处理等逻辑从组件中分离出来，实现关注点分离。 自定义 Hook 的特点：

命名规范：自定义 Hook 的命名以 use 开头，这是约定俗成的规范，以便于识别和区分普通函数。
内部使用其他 Hook：自定义 Hook 可以在内部使用 React 提供的内置 Hook，如 useState、useEffect、useContext 等。
返回值：自定义 Hook 可以返回任何值，包括状态、函数或其他自定义 Hook。 使用场景：
状态管理：封装共享的状态逻辑，如表单处理、加载状态管理等。
副作用处理：封装常见的副作用操作，如数据获取、事件订阅等。
上下文共享：封装对 React Context 的访问，简化跨组件的数据传递。示例：下面是一个简单的自定义 Hook 示例，它封装了使用 localStorage 存储和读取数据的逻辑：

import { useState, useEffect } from 'react';
function useLocalStorage(key, initialValue) {
  // State to store our value
  // Pass initial state function to useState so logic is only executed once
  const [storedValue, setStoredValue] = useState(() => {
    try {
      // Get from local storage by key
      const item = window.localStorage.getItem(key);
      // Parse stored json or if none return initialValue
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      // If error also return initialValue
      console.log(error);
      return initialValue;
    }
  });
  // Return a wrapped version of useState's setter function that ...
  // ... persists the new value to localStorage.
  const setValue = value => {
    try {
      // Allow value to be a function so we have same API as useState
      const valueToStore =
        value instanceof Function ? value(storedValue) : value;
      // Save state
      setStoredValue(valueToStore);
      // Save to local storage
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      // A more advanced implementation would handle the error case
      console.log(error);
    }
  };
  return [storedValue, setValue];
}
export default useLocalStorage;

在这个示例中，useLocalStorage 是一个自定义 Hook，它接受一个键名 key 和一个初始值 initialValue，并返回一个类似于 useState 的数组，其中包含存储的值和一个用于更新该值的函数。这个 Hook 内部使用了 useState 和 useEffect 来处理本地存储的读取和写入。总结：自定义 Hook 是 React 中强大的抽象工具，它们帮助开发者创建可复用、可维护的代码。通过合理使用自定义 Hook，可以大大提高开发效率和组件的质量。

28. 说说你对 useMemo 的理解

useMemo 是 React 的一个 Hook，用于缓存计算结果，以避免在每次组件渲染时都进行不必要的计算。它的主要目的是提高性能，特别是在处理复杂计算或大型数据结构时。 基本用法：

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

这里，useMemo 接受两个参数：

计算函数：一个返回所需计算结果的函数。这个函数只有在依赖项改变时才会被调用。
依赖项数组：一个数组，包含影响计算结果的变量。只有当数组中的变量发生变化时，计算函数才会重新执行。 工作原理：

当组件首次渲染时，useMemo 会调用计算函数并缓存结果。
在后续的渲染中，useMemo 会比较前后两次的依赖项数组。如果依赖项没有变化，useMemo 会直接返回缓存的结果，而不是重新执行计算函数。
如果依赖项发生变化，useMemo 会重新调用计算函数，并更新缓存的结果。 使用场景：
复杂计算：当组件需要进行复杂的计算，且这些计算结果不经常改变时，可以使用 useMemo 来避免不必要的计算。
避免子组件不必要的渲染：当父组件重新渲染时，默认情况下所有子组件也会重新渲染。如果子组件的渲染依赖于某些不经常改变的数据，可以使用 useMemo 来缓存这些数据，从而避免子组件的不必要渲染。 注意事项：
不要滥用：useMemo 会增加内存的使用，因为它是通过缓存来避免重复计算的。如果缓存的数据很大或者计算并不复杂，滥用 useMemo 可能会导致性能下降。
依赖项要准确：确保依赖项数组中包含了所有影响计算结果的变量。如果遗漏了某个变量，可能导致计算结果不准确。
不是用于阻止渲染：useMemo 的主要目的是缓存计算结果，而不是用来阻止组件的渲染。如果目的是阻止渲染，应该使用 React.memo 或其他优化技术。示例：

function computeExpensiveValue(a, b) {
  // 假设这里有一个复杂的计算
  return a * b;
}
function MyComponent({ a, b }) {
  const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
  return <div>{memoizedValue}</div>;
}

在这个示例中，computeExpensiveValue 是一个复杂的计算函数，我们使用 useMemo 来缓存它的结果。只有当 a 或 b 发生变化时，计算函数才会重新执行。总结： useMemo 是一个有用的 Hook，可以帮助我们优化性能，避免不必要的计算。但是，使用时需要谨慎，确保依赖项准确，并且不要滥用，以免适得其反。

29. 说说你对 useContext 的理解

useContext 是 React 的一个 Hook，用于在组件之间共享状态，而不必通过每个组件手动传递 props。它提供了一种在组件树中传递数据的方法，使得数据可以在任何层级的组件中被访问，从而简化了状态管理。 基本用法：首先，需要使用 React.createContext 创建一个 Context 对象：

const MyContext = React.createContext(defaultValue);

这里，defaultValue 是可选的，用于在组件没有匹配的 Provider 时提供默认值。然后，在组件树的顶层包裹一个 Provider，用于向下传递状态：

<MyContext.Provider value={someValue}>
  {/* 子组件树 */}
</MyContext.Provider>

在子组件中，使用 useContext Hook 来获取 Context 的值：

const value = useContext(MyContext);

工作原理：

当组件使用 useContext 订阅了 Context 的值时，只要 Provider 的 value 发生变化，订阅了这个 Context 的组件都会重新渲染。
Context 的值是通过 Provider 的 value 属性向下传递的，可以在组件树的任何层级被访问。 使用场景：
全局状态管理：例如，主题、用户信息、权限等全局状态，可以通过 Context 在整个应用中共享。
避免层层传递 props：在多层嵌套的组件中，如果需要从顶层向下传递多个 props，使用 Context 可以避免繁琐的层层传递。 注意事项：
性能考虑：当 Context 的值发生变化时，所有订阅了这个 Context 的组件都会重新渲染。如果 Context 的值频繁变化，或者订阅的组件很多，可能会导致性能问题。可以使用 React.memo 或 shouldComponentUpdate 来优化。
不要滥用：虽然 Context 提供了一种方便的状态共享方式，但并不意味着应该用它来替代所有的状态管理。对于局部状态，还是应该使用组件内部的 state。
默认值的使用：如果提供了默认值，那么在组件树中没有匹配的 Provider 时，会使用这个默认值。但这并不意味着 Provider 可以省略，因为 Provider 还提供了更新 Context 值的能力。示例：

// 创建 Context
const ThemeContext = React.createContext('light');
// 在顶层组件提供 Context
function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}
// 在子组件中使用 Context
function Toolbar() {
  const theme = useContext(ThemeContext);
  return <div>Current theme: {theme}</div>;
}

在这个示例中，ThemeContext 用于在组件树中共享主题状态。App 组件提供了主题的值，而 Toolbar 组件通过 useContext 订阅了这个值，并显示当前主题。总结： useContext 是 React 中用于状态共享的一个强大工具，它可以简化组件之间的数据传递，提高开发效率。但是，使用时需要注意性能影响，避免滥用，以确保应用的响应性和可维护性。

30. 为什么不能在循环、条件或嵌套函数中调用 Hooks？

在 React 中，有一些严格的规则关于如何使用 Hooks，特别是在循环、条件或嵌套函数中调用 Hooks 是不被允许的。这些规则的主要原因是确保 Hooks 的调用顺序和次数在每次渲染时都是一致的，从而保证组件的状态和副作用能够正确地工作。以下是具体的原因：

调用顺序的一致性：
- React 通过调用 Hooks 的顺序来识别它们。如果在循环或条件语句中调用 Hooks，那么 Hooks 的调用顺序可能会在组件的多次渲染之间发生变化，导致 React 无法正确追踪每个 Hook 的状态。
状态的一致性：
- 每个 Hook 的状态都是与组件的渲染实例相关联的。如果在循环或条件中调用 Hooks，可能会导致某些 Hooks 在某些渲染中没有被调用，从而使得状态丢失或错位。
副作用的正确执行：
- 像 useEffect、useLayoutEffect 这样的副作用 Hook 依赖于稳定的调用顺序来确保副作用的正确挂载和卸载。如果在循环或条件中调用这些 Hooks，可能会导致副作用的不正确执行。
避免逻辑错误：
- 在循环或条件中调用 Hooks 可能会导致开发者难以追踪和理解组件的逻辑，增加出错的可能性。
规则的可执行性：
- React 的设计使得它可以在开发模式下检测到 Hooks 的不正确使用，并在控制台输出警告。这种设计依赖于 Hooks 的调用顺序和位置的一致性。
嵌套函数的问题：
- 在嵌套函数中调用 Hooks 也会导致类似的问题，因为嵌套函数的执行可能依赖于外部函数的执行状态，这可能导致 Hooks 的调用顺序和次数不稳定。示例：以下是一个错误的示例，展示了在循环中调用 useState：

function ListComponent({ items }) {
  const listItems = [];
  for (let i = 0; i < items.length; i++) {
    const [itemState, setItemState] = useState(false); // 错误：在循环中调用 Hook
    listItems.push(<li key={i}>{itemState ? 'Selected' : 'Not selected'}</li>);
  }
  return <ul>{listItems}</ul>;
}

在这个示例中，每次渲染时 useState 的调用次数和顺序都可能不同，这会导致 React 无法正确管理状态。 正确的做法：使用数组或对象来管理多个状态，确保 Hooks 的调用顺序和次数在每次渲染时都是一致的：

function ListComponent({ items }) {
  const [itemStates, setItemStates] = useState(items.map(() => false));
  const toggleItemState = (index) => {
    const newItemStates = [...itemStates];
    newItemStates[index] = !newItemStates[index];
    setItemStates(newItemStates);
  };
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index} onClick={() => toggleItemState(index)}>
          {itemStates[index] ? 'Selected' : 'Not selected'}
        </li>
      ))}
    </ul>
  );
}

在这个正确的示例中，我们使用一个状态数组来管理每个列表项的状态，并在组件外部定义了一个函数来更新状态，这样确保了 Hooks 的调用顺序和次数的一致性。总之，遵循这些规则可以确保 React 组件的稳定性和可预测性，避免出现难以追踪的状态和副作用问题。

2025面试大全（18）

1. 遍历数组的方式有哪些？

2. 说说你对 Electron 的了解

3. 说说你对flutter的了解

4. 说说你对React Native的了解？

5. 前端领域有哪些跨端方案？

6. 说说你对跨平台的理解

7. HTML5 有哪些 drag 相关的 API ？

8. 浏览器乱码的原因是什么？如何解决？

9. Canvas和SVG有什么区别？

10. title与h1的区别、b与strong的区别、i与em的区别？

11. 浏览器是如何对 HTML5 的离线储存资源进行管理和加载？

应用程序缓存（AppCache）

缓存清单文件（.appcache）

缓存过程

缓存更新

IndexedDB

数据存储

数据检索

离线加载

注意事项

12. HTML5的离线储存怎么使用，它的工作原理是什么

应用程序缓存（AppCache）

使用方法

工作原理

Web存储（localStorage和sessionStorage）

使用方法

工作原理

注意事项

13. img的srcset属性的作⽤？

srcset属性的基本用法

srcset与sizes属性结合使用

srcset的像素密度描述符

srcset的作用

注意事项

14. 怎么实现一个宽高自适应的正方形？

方法1：使用CSS的padding-top属性

方法2：使用CSS的vw单位

方法3：使用CSS的flexbox

方法4：使用CSS的grid

方法5：使用CSS的aspect-ratio

15. z-index属性在什么情况下会失效？

16. 说说对 CSS 工程化的理解

17. Sass、Less 是什么？为什么要使用他们？

18. 怎么实现单行、多行文本溢出隐藏？

单行文本溢出隐藏

多行文本溢出隐藏

示例

说明

注意

19. CSS预处理器/后处理器是什么？为什么要使用它们？

CSS预处理器

CSS后处理器

总结

20. 为什么有时候⽤translate来改变位置⽽不是使用position进行定位？

21. transition和animation的区别

Transition（过渡）：

Animation（动画）：

区别总结：

22. 说说你对 new.target 的理解

基本概念：

用途：

示例：

在类中的使用：

注意事项：

23. 如何让 useEffect 支持 async/await？

注意事项：

24. arguments 这种类数组，如何遍历类数组？

1. 使用 for 循环

2. 使用 Array.prototype.forEach.call

3. 使用展开运算符（...）将类数组转换为数组

4. 使用 Array.from 方法将类数组转换为数组

5. 使用 for...of 循环（ES6）

注意事项：

25. 连续 bind()多次，输出的值是什么？

26. new fn与new fn()有什么区别吗？

27. 说说你对自定义hook的理解

28. 说说你对 useMemo 的理解

29. 说说你对 useContext 的理解

30. 为什么不能在循环、条件或嵌套函数中调用 Hooks？

`srcset`属性的基本用法

`srcset`与`sizes`属性结合使用

`srcset`的像素密度描述符

`srcset`的作用

方法1：使用CSS的`padding-top`属性

方法2：使用CSS的`vw`单位

方法3：使用CSS的`flexbox`

方法4：使用CSS的`grid`

方法5：使用CSS的`aspect-ratio`

1. 使用 `for` 循环

2. 使用 `Array.prototype.forEach.call`

3. 使用展开运算符（`...`）将类数组转换为数组

4. 使用 `Array.from` 方法将类数组转换为数组

5. 使用 `for...of` 循环（ES6）