1.深拷贝和浅拷贝

浅拷贝：拷贝的是地址

1. 直接赋值

2. 拷贝对象：Object.assgin()

   const copiedArray = Object.assign([], originalArray);
   

3. 展开运算符{...obj} 拷贝对象

深拷贝：拷贝的是对象，不是地址

1. 通过递归实现深拷贝

2. lodash/cloneDeep

   const o = _.cloneDeep(obj)
   

3. 通过JSON.stringify()实现

   const o = JSON.parse(JSON.stringify(obj))
   

2.路由有几种模式

Hash 模式：Hash 模式的优点是兼容性好，支持在不同浏览器和服务器环境下运行。缺点是 URL 中包含 # 符号，对于 SEO 不友好。

History 模式：History 模式的优点是 URL 易读且美观，并且不包含 # 符号，对 SEO 更友好。缺点是需要服务器配置支持，以处理在直接访问路由时返回正确的页面。

3.举一个数组，去重

const uniqueArray = Array.from(new Set(array));

function unique(arr) {
      var result = {}; // 利用对象属性名的唯一性来保证不重复
      for (var i = 0; i < arr.length; i++) {
           if (!result[arr[i]]) {
               result[arr[i]] = true;
           }
      }
      return Object.keys(result); // 获取对象所有属性名的数组
}

4.vue组件之间通信

Vue 2 中的组件通信方式：

• props
• $emit
• 全局事件总线/共享父组件的数据
• provide/inject
• Vuex

Vue 3 中的组件通信方式：

• props
• emits
• v-model
• mitt
• provide/inject
• pinia(vuex)
• slot
• ref与$parent
• useAttrs

5.es6解构赋值

6.css盒子模型

具体来说，CSS 盒子模型包含以下几个部分：

1. Content（内容）：盒子中实际显示的内容，如文本、图像等。
2. Padding（内边距）：围绕内容的空白区域，用于控制内容与边框之间的距离。
3. Border（边框）：围绕盒子内容和内边距的线条，用于包围元素并提供视觉效果。
4. Margin（外边距）：盒子与其他元素之间的空白区域，用于控制元素与周围元素之间的距离。

盒子模型的计算方式分为两种：标准盒子模型和IE盒子模型。

标准盒子模型：元素的总宽度等于内容的宽度加上左右内边距、左右边框和左右外边距的总和。

IE盒子模型：元素的总宽度等于内容、内边距和边框的宽度，外边距不会增加元素的宽度。

7.数据类型检测的方式有哪些

1. typeof
2. instanceof
3. constructor
4. Object.prototype.toString.call()

8.vuex优势

提供了一种集中式存储管理应用程序状态的方式。以下是 Vuex 的一些优势：

1. 中心化的状态管理：Vuex 将应用程序的状态集中存储在一个单一的地方，称为 "store"。这样，不同组件之间可以共享和访问同一份数据，避免了组件间数据传递的复杂性和混乱性。
2. 响应式更新：Vuex 的状态存储是响应式的，当状态发生变化时，相关的组件会自动更新。这消除了手动进行状态变更通知的需要，简化了应用程序的开发和维护。
3. 易于管理和调试：Vuex 提供了一系列工具和机制，使开发者可以轻松地管理和调试应用程序的状态。通过 Vuex 的严格模式，可以检测状态的变化是否符合预期，帮助开发者及早发现潜在的问题。
4. 组织和模块化：Vuex 允许开发者将状态逻辑划分为模块，每个模块都可以具有自己的状态、操作、获取器等。这样可以更好地组织代码，使得项目结构更清晰、易于维护。
5. 中间件支持：Vuex 支持使用中间件来处理异步操作、记录日志、实现状态变更的批量操作等。中间件可以在状态变更前后执行自定义逻辑，提供了更灵活和可扩展的状态管理能力。

9.动画有哪几种属性

动画可以使用多种属性来实现不同的效果。以下是一些常见的动画属性：

1. animation-delay：设置延时，即从元素加载完成之后到动画序列开始执行的这段时间。
2. animation-direction：设置延时，即从元素加载完成之后到动画序列开始执行的这段时间。
3. animation-duration：设置动画一个周期的时长。
4. animation-iteration-count：设置动画重复次数，可以指定 infinite 无限次重复动画。
5. animation-name：指定由@keyframes (opens new window)描述的关键帧名称。
6. animation-play-state：允许暂停和恢复动画。
7. animation-timing-function：设置动画速度，即通过建立加速度曲线，设置动画在关键帧之间是如何变化。
8. animation-fill-mode：指定动画执行前后如何为目标元素应用样式。

10.用最快的方法找出数组的最大值

1. 有序还是无序
   1. 有序：比较头和尾
   2. 无序：逐个比较
2. 找几个最大值
   1. 一个：逐个比较
   2. 二个：先排序

11.在项目中遇到的困难

1. 遇到过处理大量数据的困难。项目需要从后端接口获取大量的数据，并展示在前端页面上。由于数据量非常大，一次性加载所有数据可能导致页面性能问题，加载时间过长甚至造成页面卡顿。因此，我需要找到一种优化方案来解决这个问题。

   1. 数据分页加载：我使用了分页加载的方式，每次只请求部分数据，然后根据用户的操作动态加载更多数据。这样可以减少一次性加载大量数据的压力，提升页面加载速度和用户体验。
   2. 虚拟滚动：针对长列表的情况，我引入了虚拟滚动技术，只渲染可见区域内的数据，而不是全部渲染。这样可以减少页面中 DOM 元素的数量，降低内存占用和渲染性能消耗。
   3. 数据缓存：为了避免重复请求相同的数据，我使用了数据缓存机制。在首次加载数据后，将数据缓存到本地存储或内存中，下次需要使用相同数据时直接从缓存中获取，减少网络请求。

2. 跨域问题

   在开发前端项目时，如果前端代码和后端接口存在跨域（即不同域名、端口或协议），会导致浏览器的同源策略限制，请求会被阻止。解决跨域问题可以通过后端接口配置 CORS（跨域资源共享）或者使用代理服务器等方式。

3. 兼容性问题

   不同浏览器对于前端技术的支持程度有差异，可能会导致在某些浏览器中出现样式错乱、功能不正常等问题。解决兼容性问题可以通过使用 CSS 前缀、检测浏览器特性并进行适配、使用 polyfill 或者引入第三方库等方式。

4. 性能优化

   在开发过程中，经常会遇到页面加载缓慢、响应不流畅等性能问题。解决性能问题可以通过优化代码结构、减少网络请求、压缩和合并静态资源、使用懒加载、减少 DOM 操作等方式。

5. 复杂业务逻辑

   有些项目中可能会涉及到复杂的业务逻辑，比如涉及多个模块、多个数据流的交互、复杂的状态管理等。解决复杂业务逻辑可以通过合理的组件拆分、使用状态管理工具（如 Vuex）进行数据管理、编写清晰的文档和注释等方式。

12.常见的 WEB 开发调试工具

1. Chrome 开发者工具：Chrome 浏览器内置的调试工具，提供了丰富的调试功能，包括查看网页源代码、调试 JavaScript、网络请求监控、性能分析等。
2. Firefox 开发者工具：类似于 Chrome 开发者工具，是 Firefox 浏览器内置的调试工具，提供了类似的功能和调试体验。
3. Visual Studio Code：一款流行的代码编辑器，支持多种语言和框架，提供了强大的调试功能，可以在编辑器中设置断点、查看变量值、单步执行代码等。
4. Postman：用于 API 接口测试和调试的工具，可以发送 HTTP 请求并查看响应结果，支持各种请求类型、请求头设置、参数传递等。
5. Charles：一个 HTTP 代理工具，可以拦截和修改网络请求，用于调试和分析网络流量，对于调试接口和查看请求响应非常有用。
6. Fiddler：类似于 Charles 的网络调试代理工具，可以拦截和修改网络请求，提供了丰富的调试功能和扩展性。
7. Wireshark：一个网络协议分析工具，用于捕获和分析网络数据包，可以帮助开发者深入了解网络通信过程，用于网络故障排查和协议分析。
8. DevTools（开发者工具）：除了 Chrome 和 Firefox 的开发者工具之外，其他浏览器也提供了类似的开发者工具，如 Safari 的 Web Inspector、Edge 的开发者工具等。

13.HTTP基本工作原理

总的来说，HTTP 的基本工作原理就是客户端与服务器之间的请求和响应交互，通过建立连接、发送请求、处理请求、发送响应等步骤完成数据的传输。

HTTP 是无状态的协议，即服务器不会保持对客户端的状态跟踪。为了在多个请求之间保持状态，常常使用 Cookie 或其他技术进行会话管理。此外，HTTP 可以通过 SSL/TLS 协议进行加密，形成 HTTPS，以保证通信的安全性。

HTTP 的基本工作原理可以简要概括为以下几个步骤：

1. 建立连接：客户端（例如浏览器）与服务器之间建立一个 TCP 连接。这通常是通过三次握手的方式来建立可靠的连接。
2. 发送请求：客户端向服务器发送一个 HTTP 请求，请求中包含请求方法（如 GET、POST、PUT 等）、请求 URL、请求头部和请求体等信息。
3. 服务器处理请求：服务器接收到请求后，根据请求的 URL 和方法，进行相应的处理。这可能涉及到读取数据库、执行业务逻辑等操作。
4. 发送响应：服务器生成一个 HTTP 响应，包含响应状态码、响应头部和响应体等信息，并将其发送回客户端。
5. 接收响应：客户端接收到服务器发送的响应，并进行相应的处理。这可能包括解析响应头部、解析响应体中的数据等操作。
6. 关闭连接：当所有的请求和响应都完成后，客户端和服务器会关闭 TCP 连接，释放相关的资源。