持续更新中…

一、react篇

1. props和state相同点和不同点？

相同点：
	1.数据来源：Props 和 State 都用于存储和管理数据。
	2.数据驱动：无论是 Props 还是 State，它们都以数据驱动视图的方式工作。
不同点：
	1.数据来源：
		Props 是从父组件传递给子组件的数据。
		State 是组件自身内部维护的数据。
	2.可变性：
		Props 是只读的，子组件无法直接修改 Props 的值。
		State 是可变的，组件可以修改自身的 State。
	3.数据管理：
		Props 的管理是在父组件中进行的，父组件通过 props 属性传递数据给子组件。
		State 的管理是在组件自身中进行的，组件通过 this.state 来访问和更新自己的状态。
	4.影响范围：
		Props 是从父组件传递过来的，当父组件的 Props 发生变化时，子组件会接收到新的 Props，在这里插入代码片可能会触发子组件的更新。
		State 只影响组件自身，当组件的 State 发生变化时，组件会重新渲染自己。

2. shouldComponentUpdate有什么作用

• 含义：shouldComponentUpdate 是 React 组件生命周期中的一个方法，用于控制组件是否需要重新渲染。
• 作用：判断组件的 props 或 state 是否发生变化，从而决定是否触发组件的重新渲染。
• shouldComponentUpdate 方法接收两个参数：nextProps 和 nextState，分别表示组件即将接收的新的 props 和新的 state。在该方法中，可以根据 nextProps 和 nextState 来判断是否需要重新渲染组件。
• 返回值：为 true 时，组件会继续进行重新渲染；为false 时，组件将停止渲染，包括 render 方法和后续的生命周期方法都不会被调用。
• 通过在 shouldComponentUpdate 中进行合适的优化判断，可以有效减少不必要的渲染操作，提高应用的性能。但需要注意，不要滥用 shouldComponentUpdate，只有在确实需要优化性能时才使用，否则可能会导致一些错误。

3. 说说React中的虚拟dom?

• 虚拟 DOM（Virtual DOM）是一种用 JavaScript 对象表示的轻量级的 DOM 结构。它是 React 在内部使用的一种中间表示，用于提高渲染性能和减少对实际 DOM 操作的频繁访问。
• 虚拟 DOM 的工作原理：当组件的状态发生变化时，React 会创建一个新的虚拟 DOM 树，然后通过比较新旧虚拟 DOM 树的差异，找出需要更新的部分，最后只更新有变化的部分到实际 DOM 中，从而减少了实际 DOM 操作的开销。

4. 在虚拟dom计算的时候diff和key之间有什么关系？

• 在虚拟 DOM 计算的过程中，Diff （差异计算）和 Key 是密切相关的。
• Diff
• 含义：Diff 是指在比较新旧虚拟 DOM 树时，找出两者之间的差异的过程。React 使用一种高效的算法来执行 Diff，该算法能够尽可能地最小化更新操作。
• 核心思想：将新旧虚拟 DOM 树进行深度优先遍历，在遍历的过程中比较节点的类型和属性，并找出需要更新的节点。
• 关系：Key 是在 Diff 过程中用于识别列表项变化的重要机制。
  1、通过合理地使用 Key，可以帮助 React 更准确地比较新旧虚拟 DOM 树，找出需要更新的部分，从而提高渲染性能。
  2、在列表渲染时，为每个列表项分配稳定且唯一的 Key 是很重要的，这样可以确保 React 能够正确地识别出列表项的变化。

5. react新出来两个钩子函数是什么？和删掉的will系列有什么区别？

• React 新增加的两个钩子函数是 useEffect 和 useContext
• 区别：
• 1.调用时机：componentWillMount 在组件渲染前调用，componentWillUpdate 在组件即将更新前调用，而 useEffect 在每次渲染后调用。因此，新的钩子函数更加灵活，可以在每次渲染后处理副作用。
• 2.语法糖：新的钩子函数使用函数组件语法，不再需要定义类组件和使用生命周期函数，使组件的编写更加简洁和易读。
• 3.依赖管理：useEffect 使用依赖数组来指定副作用的依赖项，可以精确控制何时重新运行副作用逻辑。而 componentWillUpdate 没有提供类似的机制，需要手动进行状态比较和处理。
• 总的来说，新增的钩子函数提供了更方便和灵活的方式来处理副作用和上下文，使得函数组件的编写和组件生命周期的管理更加简单和直观。

6. React的props.children使用map函数来遍历会收到异常显示，为什么？应该如何遍历？

因为props.children 是单个元素而不是数组，map 函数要求被遍历的对象是一个数组

• 常用方法：将 props.children 包装在一个数组中，即使只有一个元素也要确保它是一个数组。

7. React组件之间如何通信

1. 父传子，在父组件中的子组件中自定义一个属性，其值就是要传递的数据。在子组件中通过this.props.属性来接收传递过来的值
2. 子传父，在父组件中自定义一个回调函数，并在其子组件上自定义一个属性，将函数传递给子组件。在子组件中通过this.props.属性进行接收，并传递数据。父组件中的回调函数声明参数来接收
3. 兄弟组件相互传值，将兄弟组件的状态提升到共同的父级中，然后进行子1传父，父传子2的操作，进行传值
4. 跨组件通信，创建一个空的context对象，从中解构出provider和consumer方法，把provider将组件包裹住，value属性进行传值。可以利用contextType对象或者consumer方法进行接收值
5. 全局状态管理库（如 Redux、Mobx）：通过使用全局状态管理库，可以将数据存储在一个全局的状态容器中，并在任何组件中访问和修改这些数据。这样，不同组件之间就可以通过访问和修改全局状态来进行通信。

8.谈谈你对immutable.js的理解？

• 含义：Immutable.js 是一个 JavaScript 库，它提供了一种不可变数据结构的实现方式。不可变数据结构是指一旦创建后就不可改变的数据，任何对数据的修改都会返回一个新的数据副本，而原始数据保持不变。
• 主要目的：解决 JavaScript 中的可变数据带来的问题。在 JavaScript 中，对象和数组是可变的，可以直接对其进行修改，这可能会导致一些难以调试和维护的问题，尤其是在复杂的应用中。
• 优点：
• 1.减少 Bug：不可变数据结构避免了直接修改数据的问题，减少了出错的可能性，使得代码更加可靠。
• 2.提高性能：由于不可变数据结构的特性，可以使用结构共享的方式，复用不变的部分，减少内存占用和提高性能。
• 3.方便比较和更新：由于不可变数据结构的特性，可以通过比较引用来判断两个数据是否相等，以及方便地进行数据的更新和派生。
• 4.函数式编程：Immutable.js 鼓励使用纯函数式编程的方式来处理数据，使代码更易于理解和维护。

9. redux本来是同步的，为什么它能执行异步代码？实现原理是什么？中间件的实现原理是什么？

• 为了支持异步操作，Redux 引入了中间件的概念。中间件是 Redux 提供的一种扩展机制，它允许在 action 被派发到 reducer 之前，对 action 进行拦截、处理或延迟。通过使用中间件，我们可以在 Redux 中执行异步代码。
• 实现异步代码执行的原理：在 Redux 中间件中捕获并处理异步操作，然后在异步操作完成后再派发相应的 action。这种方式可以确保异步操作的结果正确地反映在应用的状态中。
• Redux 中间件的实现原理是基于函数式编程的概念
  中间件函数的主要作用是对 action 进行处理，可以在处理过程中执行异步操作，例如发送网络请求。
  在处理异步操作时，中间件通常会使用回调函数、Promise 或 async/await 等方式来处理异步代码，并在异步操作完成后派发相应的 action 到 reducer。这样，Redux 中间件实现了在同步流程中执行异步操作的能力。

10. redux中同步action与异步action最大的区别是什么？

• 在 Redux 中，同步 action 和异步 action 的最大区别在于它们派发的时间和返回的内容。
• 同步 action：同步 action 是一个简单的 JavaScript 对象，它描述了一个应用中发生的事件。同步 action 由应用程序的某个组件直接派发，它会立即被发送到 reducer 进行状态更新。同步 action 的派发是立即执行的，不会涉及任何异步操作。同步 action 的返回值通常是一个带有 type 属性的普通对象，用于告诉 reducer 如何更新状态。
• 异步action：异步 action 的特点是它们可以在需要的时候延迟派发，可以执行一些异步操作，然后在异步操作完成后再派发一个或多个同步 action。异步 action 的返回值可以是一个 Promise、一个回调函数等，用于处理异步操作的结果。

11. redux-saga和redux-thunk的区别与使用场景

• Redux Thunk
• 1. Redux Thunk 是 Redux 官方提供的中间件之一，它将异步操作封装在函数中，这个函数被称为 thunk 函数。
• 2. Thunk 函数接收 dispatch 和 getState 作为参数，可以在函数内部执行异步操作，并在操作完成后手动派发同步 action。
• 3. Redux Thunk 的使用非常简单，可以在 action 创建函数中直接返回一个函数，而不是一个普通的 action 对象。
• 4. Redux Thunk 适用于简单的异步场景，例如发送网络请求、获取数据等，对于复杂的异步流程可能不够灵活。
• Redux Saga
• 1. Redux Saga 是一个基于 generator 函数的 Redux 异步中间件，它通过使用类似于同步代码的方式来处理异步操作。
• 2. Redux Saga 允许我们在 generator 函数中定义一系列的操作，例如监听 action、发起异步请求、派发 action 等。
• 3. Redux Saga 提供了丰富的 API，例如 takeEvery、takeLatest 等用于监听和处理不同类型的 action。
• 4. Redux Saga 还支持处理复杂的异步流程，例如并行请求、条件触发等，它的代码结构更加清晰和可维护。
• 5. Redux Saga 需要额外学习和理解 generator 函数的概念，相对于 Redux Thunk 有一定的学习成本。
• 使用场景
• Redux Thunk 适用于简单的异步场景，对于简单的异步操作，如发送网络请求并在请求完成后派发同步 action，Redux Thunk 是一个轻量级的选择。
• Redux Saga 更适用于处理复杂的异步流程，例如处理多个并行请求、条件触发、取消请求等复杂场景。如果项目中有复杂的异步操作，Redux Saga 提供了更强大和灵活的处理能力。

12. 在使用redux过程中，如何防止定义的action-type的常量重复？

• 1.使用命名空间（namespace）：为每个模块或组件定义不同的命名空间，将 action type 常量放在对应的命名空间下。这样可以避免不同模块之间的命名冲突。
• 2.使用常量文件：将所有的 action type 常量统一放在一个常量文件中，并使用不同的命名来区分。这样可以集中管理所有的常量，避免重复定义。
• 3.使用工具库：可以使用一些工具库来帮助生成唯一的 action type 常量，例如 uuid 库或 shortid 库。这样可以生成不重复的字符串作为 action type 常量。

13. CDN的特点及意义？

• 1.提高访问速度：CDN 使用就近原则，将内容缓存在全球各地的边缘节点，使用户从离自己最近的节点获取内容，减少了网络延迟和传输时间，提高了访问速度.
• 2.减轻源服务器负载：CDN 可以缓存静态资源，如图片、CSS、JavaScript 等，这样用户请求这些资源时可以直接从边缘节点获取，减轻了源服务器的负载，提高了服务器的响应速度和稳定性。
• 3.提高可用性和稳定性：CDN 的分布式架构使得即使某个边缘节点或源服务器出现故障，仍然可以通过其他节点继续提供服务，提高了系统的可用性和稳定性。
• 4.跨地域传输：CDN 的边缘节点分布在全球各地，可以实现跨地域的内容传输，使用户无论身处何地，都能以较低的延迟获取内容。
• 5.保护源服务器：CDN 可以起到反向代理的作用，隐藏了源服务器的真实 IP 地址，提高了源服务器的安全性，减少了恶意攻击的风险。
• 6.节约带宽成本：CDN 的边缘节点可以根据用户请求的地理位置，选择最佳的路径进行内容传输，避免了长距离的带宽消耗，节约了带宽成本。

14. 为什么for循环比forEach性能高？

• 1.函数调用开销：forEach 是一个高阶函数，它需要在每次迭代时执行一个回调函数。每次调用回调函数都会产生额外的函数调用开销，这可能会在大规模迭代的情况下影响性能。
• 2.作用域链查找：forEach 回调函数是在每次迭代中动态创建的，它需要通过作用域链查找变量，这会带来一定的性能开销。而 for 循环中的变量访问是直接的，不需要进行作用域链查找。
• 3.预分配内存：使用 for 循环可以提前分配数组的内存空间，而 forEach 函数会自动在每次迭代时根据需要动态调整内存空间。预分配内存可以减少内存分配和释放的次数，提高性能。
• 总之，for 循环在某些情况下可能比 forEach 函数性能更高，但在实际应用中，应根据具体情况选择最适合的迭代方式，综合考虑代码的可读性、简洁性和性能需求。

15. 说说你对@reduxjs/toolkit的理解？和react-redux有什么区别？

• @reduxjs/toolkit 是 Redux 官方提供的一个工具包，旨在简化 Redux 的使用和开发流程。它提供了一些便捷的函数和工具，帮助开发者更快速、更容易地构建和管理 Redux 应用。
• @reduxjs/toolkit 提供了以下主要功能和特性：
• 1. 内置了常用的 Redux 模块：createSlice、createAsyncThunk、createReducer 等，它们可以帮助开发者更方便地定义 action 和 reducer，并生成符合 Redux 规范的代码。
• 2. 自动化的状态更新：@reduxjs/toolkit 使用了 immer 库来处理状态更新，使得在 reducer 中可以直接修改状态，而无需手动编写不可变更新的逻辑。
• 3. 集成了 Redux DevTools Extension：@reduxjs/toolkit 默认集成了 Redux DevTools Extension，使得开发者可以方便地调试和监控 Redux 应用的状态变化。
• 4. 默认集成了 Thunk 中间件：@reduxjs/toolkit 默认集成了 Redux Thunk 中间件，可以支持异步 action 和处理复杂的副作用逻辑。
• 区别：@reduxjs/toolkit 是一个简化 Redux 开发的工具包，提供了更便捷的 API 和模块来构建和管理 Redux 应用。而 react-redux 是一个与 React 结合使用 Redux 的绑定库，提供了 Provider 和 connect 来将 Redux 的 store 注入到 React 组件中，并连接组件和 Redux 的状态。它们在 Redux 应用的开发中有不同的角色和功能。

16. React render方法的原理，在什么时候会触发？

• React 的 render 方法是用于将组件渲染为虚拟 DOM（Virtual DOM）的方法。它的原理是通过比较新旧虚拟 DOM 的差异来确定需要更新的部分，并将更新应用到实际的 DOM 上，以实现页面的更新。
• render 方法会在以下情况下触发：
• 1. 初始渲染：当组件被挂载到 DOM 树上时，React 会调用组件的 render 方法生成虚拟 DOM，并将其转换为实际 DOM，完成初始的渲染。
• 2. 状态或属性的变化：当组件的状态（state）或属性（props）发生变化时，React 会重新调用组件的 render 方法生成新的虚拟 DOM，并与旧的虚拟 DOM 进行比较，找出差异并更新实际 DOM。
• 3. 父组件的重新渲染：当父组件的 render 方法被调用时，它会递归地触发子组件的重新渲染，这也会导致子组件的 render 方法被调用。

17. 什么是闭包，应用场景是什么？

• 闭包（Closure）是指函数可以访问并操作其词法作用域外部的变量的能力。换句话说，闭包是函数内部的函数，它可以访问包含它的外部函数中定义的变量，即使外部函数已经执行完毕。
• 闭包的应用场景包括：
• 1. 封装私有变量：通过闭包，可以创建一个函数，其中包含一些私有的变量和方法，外部无法直接访问，实现了数据的封装和隐藏。
• 2. 记忆化（Memoization）：通过闭包缓存函数的计算结果，避免重复计算，提高函数的执行效率。
• 3. 实现模块化：通过闭包可以创建模块化的代码结构，将私有变量和方法封装在闭包内部，对外提供公共的接口。
• 4.回调函数：在异步编程中，闭包常用于传递回调函数，以便在异步操作完成后执行相应的操作。

18. 谈谈你是如何做移动端适配的？

• 在移动端适配中，常见的方法包括：
• 1. 媒体查询（Media Queries）：使用 CSS 的媒体查询可以根据不同的屏幕尺寸和设备特性，对元素的样式进行适配调整
• 2. Viewport Meta 标签：通过设置 标签，可以控制网页在移动设备上的布局和缩放行为。
• 3. 弹性布局（Flexbox）：使用 CSS 的 Flexbox 可以实现弹性的布局，使得页面元素能够自适应不同的屏幕尺寸。
• 4. REM 或者 EM 单位：使用相对单位 REM 或 EM 来设置字体大小、元素尺寸等，使得页面能够根据根元素或父元素的大小进行相对调整。
• 5. 响应式框架：使用响应式框架（如 Bootstrap、Ant Design 等）可以快速构建适配移动端的页面，通过预设的样式和布局，实现页面的自适应。

二、html&css篇

1. 移动端1像素的解决方案

• 1. 使用 CSS transform：通过将元素进行缩放，可以实现边框的细化效果。可以使用伪元素 ::after 或者 ::before 来创建一个细的边框，然后通过 CSS transform 进行缩放。

.element::after {
    
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  border: 1px solid #000;
  transform: scale(0.5);
  transform-origin: left top;
}

• 2. 使用 viewport 的缩放：通过调整 viewport 的缩放比例，可以将元素的显示进行缩小，从而实现边框的细化效果。可以使用 标签的 initial-scale 属性来设置缩放比例。

<meta name="viewport" content="width=device-width, initial-scale=0.5">

• 3. 使用伪类 + 伪元素：通过使用伪类和伪元素来创建一个细的边框。可以使用 :after 或者 :before 伪元素来创建一个与元素同宽、高的细线元素。

.element {
    
  position: relative;
}

.element::after {
    
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #000;
}

• 4. 使用 SVG 或者 iconfont：可以使用 SVG 图片或者 iconfont 来代替纯 CSS 的边框，这样可以保证在不同设备上都能显示出细的边框效果。

2. 弹性盒中的缩放机制是怎样的?

• 弹性盒（Flexbox）布局中的缩放机制是通过控制子元素的伸缩性来实现的。在弹性盒布局中，可以使用一些属性来调整子元素的尺寸和位置，以适应不同的容器尺寸。
• 弹性盒布局中的主要缩放属性有：
• 1. flex-grow：指定弹性盒子的子元素在剩余空间中的放大比例。默认值为 0，表示不放大。如果某个子元素的 flex-grow 值为 1，而其他子元素的 flex-grow 值都为 0，则该子元素会占据剩余空间的比例为 1:1，即等分剩余空间。
• 2. flex-shrink：指定弹性盒子的子元素在空间不足时的缩小比例。默认值为 1，表示可缩小。如果某个子元素的 flex-shrink 值为 1，而其他子元素的 flex-shrink 值都为 0，则该子元素会相对于其他子元素缩小。具体缩小的比例与元素的 flex-shrink 值成比例。
• 3. flex-basis：指定弹性盒子的子元素在分配多余空间之前的初始尺寸。默认值为 auto，表示由子元素的内容决定。可以使用像素值或百分比来指定初始尺寸。
• 弹性盒布局中的缩放机制是通过控制子元素的 flex-grow、flex-shrink、flex-basis 属性来实现的。这些属性可以调整子元素的伸缩性，使得子元素能够根据容器的尺寸变化自动调整自身的尺寸和位置。

三、js篇

1.对Object.defineProperty()的理解

Object.defineProperty() 是 JavaScript 中一个用于定义对象属性的方法。它允许我们精确地定义或修改对象的属性，包括属性的值、可枚举性、可配置性和可写性。
Object.defineProperty(obj, prop, descriptor)

• obj：要定义属性的对象
• prop：要定义的属性名称
• descriptor：属性的描述符对象，用于配置属性的特性

descriptor 对象包含以下可选的属性：

• value：属性的值
• writable：属性是否可写，默认为 false
• enumerable：属性是否可枚举，默认为 false
• configurable：属性是否可被配置（删除或修改属性），默认为 false

实现的功能

• 定义新属性：可以添加新的属性到对象中，并指定属性的特性
• 修改现有属性：可以修改对象中已有属性的特性
• 控制属性的可枚举性：通过设置 enumerable 属性为 true 或 false，可以控制属性是否在对象的遍历操作中可见
• 设置只读属性：通过设置 writable 属性为 false，可以将属性设置为只读，不允许修改
• 设置访问器属性：除了简单的值属性之外，还可以通过 get 和 set 方法设置访问器属性，以实现对属性的更高级的控制

2.找出数组【1,2,3,4,5,3,2,2,4,2,2,3,1,3,5】中出现次数最多的数，并统计出现多少次，编写一个函数

function findMostFrequentNumber(arr) {
    
  const countMap = new Map();

  for (const num of arr) {
    
    if (countMap.has(num)) {
    
      countMap.set(num, countMap.get(num) + 1);
    } else {
    
      countMap.set(num, 1);
    }
  }

  let mostFrequentNumber = arr[0];
  let maxCount = countMap.get(arr[0]) || 0;

  for (const [number, count] of countMap) {
    
    if (count > maxCount) {
    
      mostFrequentNumber = number;
      maxCount = count;
    }
  }

  return {
     number: mostFrequentNumber, count: maxCount };
}

四、ts篇

1.ts抽象类的理解

注意

• 抽象类不能被实例化：不能使用 new 关键字直接实例化一个抽象类，只能被用作其他类的基类
• 派生类必须实现抽象方法：一个派生类必须实现其基类中声明的所有抽象方法，否则会导致编译错误
• 抽象方法不能有具体的实现：抽象方法只是方法的定义，没有具体的实现。在抽象类中，抽象方法使用 abstract 关键字进行声明

作用

• 作为其他类的基类：抽象类提供了一种模板或约定，其他类可以继承自抽象类，并且必须实现其中的抽象方法。这能够确保派生类遵循相同的结构和行为
• 强制派生类实现抽象方法：抽象方法在抽象类中只有方法的声明，而没有具体的实现。派生类必须实现这些方法，否则将会产生编译错误。这使得抽象类能够定义一组必须被子类实现的功能
• 提供通用的属性和方法：抽象类可以包含普通方法和属性的实现，这些实现可以被子类直接继承和使用。这样可以避免在每个子类中重复书写相同的代码