2025面试大全（24）1. React 中怎么实现状态自动保存（KeepAlive）？在React中实现状态自动保存

1. React 中怎么实现状态自动保存（KeepAlive）？

在React中实现状态自动保存（类似于KeepAlive的功能），可以通过以下几种方法：

1. 使用React Router的`<KeepAlive>`组件

如果你使用的是React Router，可以利用<KeepAlive>组件来保持组件状态。这个组件可以让你缓存某个路由下的组件实例，从而保持其状态。首先，安装react-router-keep-alive：

npm install react-router-keep-alive

然后，在你的路由配置中使用<KeepAlive>组件：

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { KeepAlive } from 'react-router-keep-alive';
const App = () => (
  <Router>
    <Switch>
      <Route path="/my-component" component={MyComponent} />
      <KeepAlive path="/keep-alive-component" component={KeepAliveComponent} />
    </Switch>
  </Router>
);

2. 使用`react-activation`库

react-activation是一个专门为React设计的状态保持库，它可以让你轻松地实现组件状态的保持。首先，安装react-activation：

npm install react-activation

然后，使用<KeepAlive>组件包裹你想要保持状态的组件：

import { KeepAlive } from 'react-activation';
const MyComponent = () => {
  // 组件状态逻辑
  return <div>My Component</div>;
};
const App = () => (
  <KeepAlive>
    <MyComponent />
  </KeepAlive>
);

3. 手动实现状态保存

如果你不想使用外部库，也可以手动实现状态保存。这通常涉及到在组件卸载时保存状态到全局变量或localStorage，然后在组件重新挂载时恢复状态。以下是一个简单的示例：

import React, { useState, useEffect } from 'react';
const MyComponent = () => {
  const [count, setCount] = useState(() => {
    // 尝试从localStorage获取状态
    const savedCount = localStorage.getItem('count');
    return savedCount ? parseInt(savedCount, 10) : 0;
  });
  useEffect(() => {
    // 组件卸载时保存状态
    return () => {
      localStorage.setItem('count', count);
    };
  }, [count]);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};
const App = () => (
  <div>
    <MyComponent />
  </div>
);
export default App;

在这个示例中，我们使用useState的初始化函数来从localStorage获取保存的计数器值，并在组件卸载时使用useEffect的清理函数来保存计数器值。

4. 使用Redux或其他状态管理库

如果你已经在使用Redux或其他状态管理库，可以利用这些库来保持组件状态。状态将保存在全局存储中，而不是组件内部，因此即使组件被卸载和重新挂载，状态也不会丢失。选择哪种方法取决于你的具体需求和项目结构。对于简单的状态保持，手动实现可能就足够了。而对于更复杂的应用，使用专门的库如react-activation或集成到路由中的<KeepAlive>组件可能更为合适。

2. useEffect 与 useLayoutEffect 有什么区别？

useEffect 和 useLayoutEffect 都是 React Hooks，用于处理副作用，但它们在执行时机和用途上有所区别：

useEffect

执行时机：useEffect 的回调函数会在组件渲染到屏幕之后执行。这意味着它不会阻塞浏览器渲染。
用途：适用于大多数副作用操作，如数据获取、订阅事件、手动更改 DOM 等。
异步性：useEffect 可以处理异步操作，因为它的执行不会阻塞渲染。

示例：

useEffect(() => {
  // 副作用操作，如 API 调用、事件订阅等
  document.title = `You clicked ${count} times`;
  // 清理函数，用于取消订阅、清除定时器等
  return () => {
    // 清理操作
  };
}, [count]); // 依赖数组，当 count 变化时重新执行

useLayoutEffect

执行时机：useLayoutEffect 的回调函数会在组件渲染到屏幕之前同步执行。这意味着它会在浏览器绘制之前完成，因此可以阻塞渲染。
用途：适用于那些需要同步读取布局并立即触发布局的副作用，如调整 DOM 布局、测量 DOM 元素大小等。
同步性：useLayoutEffect 是同步执行的，因此应避免在其中执行耗时操作，以免阻塞渲染。

示例：

useLayoutEffect(() => {
  // 副作用操作，如调整 DOM 布局、测量 DOM 元素等
  const element = document.getElementById('my-element');
  const height = element.clientHeight;
  element.style.marginTop = `${height}px`;
  // 清理函数
  return () => {
    // 清理操作
  };
}, [dependencies]); // 依赖数组

主要区别

执行时机：useEffect 在渲染后执行，而 useLayoutEffect 在渲染前同步执行。
性能影响：useLayoutEffect 可能会阻塞渲染，因此应谨慎使用，避免在其中执行耗时操作。
使用场景：useEffect 适用于大多数副作用，而 useLayoutEffect 适用于需要同步读取和修改布局的场景。

使用建议

默认情况下，优先使用 useEffect，因为它不会阻塞渲染。
只有在需要同步操作 DOM 布局时，才使用 useLayoutEffect。
避免在 useLayoutEffect 中执行耗时操作，以免影响性能。理解这些区别有助于你根据具体需求选择合适的 Hook 来处理副作用。

3. React Hooks 在使用上有哪些限制？

React Hooks 是 React 16.8 引入的一种新的使用方式，使得在函数组件中也能使用状态和副作用等特性。然而，使用 React Hooks 时需要遵守一些规则和限制，以确保应用的正确性和性能。以下是使用 React Hooks 时需要注意的主要限制：

1. 只能在函数组件的顶层调用 Hooks

规则：Hooks 必须在函数组件的顶层调用，不能在循环、条件判断或嵌套函数中调用。
原因：React 需要按照 Hooks 的调用顺序来正确地保存和恢复状态。如果在条件判断或循环中调用 Hooks，可能会导致状态混乱。

2. 只能在 React 函数组件或自定义 Hooks 中调用 Hooks

规则：Hooks 只能在 React 函数组件或自定义 Hooks 中调用，不能在普通的 JavaScript 函数中调用。
原因：React 需要利用组件的调用栈来跟踪 Hooks 的状态。在非组件函数中调用 Hooks 会导致 React 无法正确管理状态。

3. 避免在 useEffect 中进行阻塞操作

规则：在 useEffect 中应避免进行长时间运行的同步操作，因为这会阻塞浏览器的主线程，导致应用响应变慢。
建议：如果需要进行长时间运行的操作，可以考虑使用异步操作或将操作延迟到下一次事件循环。

4. 依赖数组的重要性

规则：在使用 useEffect、useMemo、useCallback 等带有依赖数组的 Hooks 时，必须正确指定依赖项。
原因：依赖数组决定了何时重新执行副作用或重新计算值。错误的依赖数组可能导致副作用不执行或过度执行。

5. 不要在 Hooks 中直接修改状态

规则：使用 useState、useReducer 等状态管理 Hooks 时，应通过设置函数来更新状态，而不是直接修改状态值。
原因：直接修改状态不会触发组件重新渲染，而使用设置函数可以确保状态更新后组件能够正确渲染。

6. 避免在渲染过程中调用 Hooks

规则：不要在组件的渲染方法中调用 Hooks，如 render、componentDidMount 等。
原因：Hooks 的设计是为了在函数组件中使用的，而不是在类组件的生命周期方法中。

7. 自定义 Hooks 的命名规范

规则：自定义 Hooks 应以 use 开头。
原因：这是 React 的约定，有助于识别函数是否为自定义 Hook，并且有助于 Lint 插件进行规则检查。

8. Hooks 的顺序一致性

规则：在组件的多次渲染之间，Hooks 的调用顺序必须保持一致。
原因：React 通过调用顺序来识别每个 Hook，如果顺序改变，可能会导致状态关联错误。

9. 不要在条件语句中创建 Hooks

规则：避免在条件语句中创建 Hooks，如 if、for、while 等。
原因：这会导致 Hooks 的调用次数在不同渲染中不一致，从而违反 Hooks 的使用规则。遵守这些限制和规则是确保 React 应用正确性和性能的关键。如果不遵守这些规则，可能会导致难以追踪的错误，并且可能会影响应用的性能。React 官方提供了 eslint-plugin-react-hooks 插件来帮助开发者遵守这些规则。

4. 为什么 useState 返回的是数组而不是对象？

useState Hook 返回的是一个数组而不是对象，主要有以下几个原因：

1. 解构赋值的便利性

数组解构：返回数组允许使用解构赋值来直接获取状态和设置状态的函数，这使得代码更加简洁和易于理解。
```
const [count, setCount] = useState(0);
```
对象解构：如果返回的是对象，解构赋值会稍微复杂一些，并且需要指定属性名。
```
const { value, setValue } = useState({ value: 0 });
```

2. 性能优化

避免属性访问：数组元素的访问速度通常比对象属性的访问速度要快，因为数组是通过索引直接访问的，而对象属性访问可能涉及到哈希表查找。
减少内存占用：数组通常比对象有更小的内存占用，因为对象需要存储属性名和属性值，而数组只需要存储值。

3. 保持简洁

简洁性：返回数组使得 useState 的 API 更加简洁，只有两个元素，一个是当前状态，另一个是更新状态的函数。
易于理解：开发者可以很容易地理解和使用这个模式，而不需要担心对象中可能存在的额外属性。

4. 与其他 Hooks 的一致性

一致性：React 的其他 Hooks，如 useReducer，也返回数组，这样可以保持 Hooks 的一致性，使得开发者可以预期和使用类似的方法来处理不同的场景。

5. 历史原因

设计选择：在 React Hooks 的设计过程中，团队可能认为返回数组是最简单和最直接的方式来实现状态的管理和更新。

6. 避免命名冲突

命名灵活性：使用数组可以避免命名冲突，因为解构赋值允许开发者自由命名状态和设置状态的函数，而不需要担心与对象属性名冲突。

示例对比

使用数组：
```
const [count, setCount] = useState(0);
```

如果使用对象：

const { value: count, setValue: setCount } = useState({ value: 0 });

在第二种情况下，代码变得更加冗长，并且需要额外的命名来避免冲突。总的来说，useState 返回数组是为了提供一种简洁、高效且一致的方式来管理状态，这符合 React Hooks 的设计哲学，即提供简单而强大的工具来处理复杂的任务。

5. Redux中的connect有什么作用？

在Redux中，connect 函数用于将React组件连接到Redux存储。它的主要作用是：

1. 连接组件和Redux

连接状态：connect 函数允许你将React组件连接到Redux存储，使得组件可以访问和订阅Redux中的状态。

2. 映射StateToProps

映射StateToProps：将Redux存储中的特定部分映射到组件的props，使得组件可以访问到Redux状态的一部分。

3. 映射DispatchToProps

映射DispatchToProps：将Redux中的特定操作映射到组件的props，使得组件可以派发操作。

4. 订阅状态更新

订阅更新：当Redux存储更新时，组件会重新渲染，以反映最新的状态。

5. 解耦组件和Redux

解耦：通过将状态和操作映射到props，可以解耦组件和Redux，使得组件不直接依赖于特定的Redux实现。

6. 提供更好的组织结构

组织结构：通过将状态和操作组织在props中，可以提供更好的应用组织结构。

7. 易于测试

易于测试：通过将状态和操作映射到props，可以使得组件更易于测试，因为它们不直接依赖于特定的Redux实现。

8. 更好的代码组织

代码组织：通过将状态和操作组织在props中，可以提供更好的代码组织方式。

示例

import { connect } from 'react-redux';
const mapStateToProps = state => ({
  count: state.count
});
const mapDispatchToProps = {
  increment: () => ({ type: 'INCREMENT' })
};
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(CounterComponent);

在上述示例中，connect 函数用于将CounterComponent 组件连接到Redux存储，并且映射了count 状态和increment 操作到组件的props。

总结

connect 函数在React组件和Redux之间提供了一个强大的连接，使得组件可以访问和操作Redux状态，同时保持组件和Redux的解耦，提供更好的应用组织结构和测试能力。通过使用connect，可以使得React组件更好地与Redux集成，提供更好的状态管理和操作方式。

6. Redux 和 Vuex 有什么区别，它们有什么共同思想吗？

7. mobx 和 redux 有什么区别？

MobX 和 Redux 都是用于管理 JavaScript 应用状态的库，但它们在设计哲学、使用方式和适用场景上有所不同。以下是它们之间的一些主要区别：

设计哲学

Redux:
- 遵循 Flux 架构的思想，强调单一数据源（single source of truth）和状态不可变性（immutability）。
- 状态更新是通过纯函数（reducers）来实现的，这有助于实现可预测的状态管理。
- 强调显式的数据流动，使得状态变化易于追踪和理解。
MobX:
- 基于反应式编程（reactive programming）的原理，使用可观察对象（observables）来跟踪状态变化。
- 状态是可变的，MobX 会自动检测状态变化并更新视图。
- 强调简单和直观，通常需要更少的样板代码（boilerplate）。

使用方式

Redux:
- 需要定义 actions、reducers 和 store 来管理状态。
- 组件通过 dispatching actions 来触发状态变化。
- 通常需要使用中间件（middleware）来处理异步逻辑。
MobX:
- 使用 @observable 装饰器来定义可观察状态。
- 使用 @computed 装饰器来定义基于状态的计算值。
- 使用 @action 装饰器来定义修改状态的方法。
- 组件通过直接修改状态来触发更新，MobX 会自动处理依赖跟踪和更新。

适用场景

Redux:
- 适用于大型应用，特别是需要严格管理状态和历史记录的应用。
- 适用于团队开发，因为其规范的数据流动有助于团队成员之间的协作。
MobX:
- 适用于中小型应用，或者开发者希望以更直观的方式管理状态的应用。
- 适用于快速开发和迭代，因为其简洁的API和较少的样板代码。

性能

Redux:
- 由于状态不可变性，可能会产生更多的对象和数组复制，这可能在某些情况下影响性能。
- 但是，Redux 的性能通常是可优化的，并且对于大多数应用来说是足够的。
MobX:
- 通常提供更好的性能，因为它是基于直接的状态修改和细粒度的依赖跟踪。
- 但是，如果不当使用，反应式编程也可能导致性能问题，例如过度渲染。

学习曲线

Redux:
- 学习曲线相对较陡，需要理解 Flux 架构、不可变性、纯函数等概念。
- 社区庞大，有丰富的文档和资源。
MobX:
- 学习曲线相对平缓，概念更简单直观。
- 社区较小，但也在不断增长，文档和资源相对较少。

共同思想

尽管 Redux 和 MobX 在实现上有所不同，但它们都旨在解决同一问题：在复杂应用中管理状态。它们都鼓励将状态管理逻辑从视图逻辑中分离出来，从而使得状态管理更加清晰和可维护。选择 Redux 还是 MobX 取决于你的项目需求、团队偏好和个人喜好。两者都有其优点和适用场景，并且都可以用来构建高效、可维护的应用。

8. Redux 状态管理器和变量挂载到 window 中有什么区别？

Redux 和 Vuex 都是用于状态管理的库，但它们分别服务于不同的前端框架：Redux 通常与 React 配合使用，而 Vuex 是 Vue.js 的官方状态管理库。尽管它们服务于不同的框架，但在设计理念和应用模式上有一些相似之处和差异。

主要区别：

框架依赖：
- Redux：独立于任何特定框架，但通常与 React 一起使用。
- Vuex：专为 Vue.js 设计，利用 Vue 的响应式系统来提供更简洁的状态管理。
状态管理方式：
- Redux：强调单一状态树和不可变状态，通过纯函数（reducers）来处理状态变更。
- Vuex：同样采用单一状态树，但状态是可变的，并通过提交 mutations 或派发 actions 来更改状态。
API 和语法：
- Redux：使用 JavaScript 的原生语法，需要定义 actions、reducers 和 store。
- Vuex：提供了更高级的 API，如 mapState、mapGetters、mapActions 等，使得在 Vue 组件中访问和操作状态更为方便。
开发体验：
- Redux：可能需要更多的样板代码，尤其是对于大型应用。
- Vuex：与 Vue 深度集成，提供了更简洁的语法和更直观的开发体验。
中间件和插件：
- Redux：通过中间件（如 redux-thunk、redux-saga）来处理异步逻辑。
- Vuex：通过插件（如 vuex-persistedstate）来扩展功能，如持久化状态。

共同思想：

单一状态树：
- Redux 和 Vuex 都倡导单一数据源，整个应用的状态存储在单一的对象树中。
状态的可预测性：
- 两者都旨在使状态变化可预测和可追踪。Redux 通过不可变性和纯 reducers 实现，而 Vuex 使用 mutations 和 actions 来控制状态变化。
中心化管理：
- 两者都集中管理应用状态，这使得调试和维护更加容易。
开发者工具：
- Redux 和 Vuex 都有强大的开发者工具，用于实时调试和跟踪状态变化。
社区和生态系统：
- 两者都有强大的社区和生态系统，提供了丰富的插件、中间件和资源。
组件解耦：
- 两者都帮助将组件与状态管理逻辑解耦，促进更清晰、更可维护的代码。总的来说，Redux 和 Vuex 在设计理念上有许多相似之处，它们都致力于提供一种可维护、可预测的状态管理解决方案。不过，它们在实现细节、API 设计和与框架的集成度上有所不同。选择哪个库通常取决于你使用的前端框架以及个人或团队的偏好。

9. Redux 中异步的请求怎么处理

Redux状态管理器和变量挂载到window中是两种不同的状态管理方式，它们在实现原理、应用场景、可维护性等方面有着显著的区别：

Redux状态管理器：

集中管理：
- Redux提供了一个集中的存储（store）来管理应用的所有状态。
可预测性：
- 状态的变更通过纯函数（reducers）来处理，确保状态变化是可预测的。
不可变性：
- Redux强调状态的不可变性，每次状态变更都会返回一个新的状态对象。
调试工具：
- Redux提供了强大的开发者工具，可以实时监控和追踪状态变化。
组件解耦：
- 组件不直接修改状态，而是通过发送actions来触发状态变更，从而实现组件与状态管理的解耦。
中间件支持：
- Redux支持中间件（如redux-thunk、redux-saga），可以处理异步逻辑和副作用。
社区和生态系统：
- Redux拥有庞大的社区和丰富的生态系统，提供了大量的库和工具。

变量挂载到window中：

简单直接：
- 将变量直接挂载到全局的window对象上，实现状态的全局共享。
可变性：
- 状态可以直接被修改，没有不可变性的约束。
缺乏管理：
- 状态的管理较为分散，没有集中的存储和变更控制。
调试困难：
- 调试状态变化较为困难，没有专门的工具来追踪状态变更。
组件耦合：
- 组件直接修改全局状态，导致组件与状态紧密耦合，不利于维护。
不支持中间件：
- 不支持中间件，处理异步逻辑和副作用需要额外的实现。
全局污染：
- 容易导致全局命名空间污染，不同模块的状态可能相互冲突。

主要区别：

可维护性：Redux提供了更结构化、可维护的状态管理方式，而变量挂载到window中可能导致代码结构混乱，难以维护。
可预测性：Redux的状态变化是可预测的，而直接修改window上的变量可能导致不可预测的状态变化。
调试能力：Redux有专门的开发者工具，而变量挂载到window中调试较为困难。
组件解耦：Redux实现了组件与状态管理的解耦，而变量挂载到window中可能导致组件紧密耦合。
生态系统：Redux有丰富的生态系统和社区支持，而变量挂载到window中缺乏这些支持。总的来说，Redux提供了一种更专业、更可维护的状态管理解决方案，适用于大型、复杂的应用。而变量挂载到window中是一种简单、直接的状态共享方式，适用于小型、简单的应用或快速原型开发，但不推荐用于生产环境的大型应用。

10. 如果使用Vue3.0实现一个 Modal，你会怎么进行设计？

使用Vue 3.0实现一个Modal组件，我会遵循以下设计原则和步骤：

1. 组件结构设计

Modal.vue：主组件，负责渲染模态框和传递属性。
ModalHeader.vue：模态框的头部组件，通常包含标题和关闭按钮。
ModalBody.vue：模态框的主体部分，用于展示内容。
ModalFooter.vue：模态框的底部组件，通常包含操作按钮。

2. Props定义

visible：布尔值，控制模态框的显示与隐藏。
title：字符串，模态框的标题。
closeOnClickOutside：布尔值，是否点击外部关闭模态框。
beforeClose：函数，关闭模态框前的回调函数。

3. Emit定义

update:visible：用于更新父组件的visible状态。
close：模态框关闭时触发。

4. Slot使用

default：用于插入ModalBody的内容。
header：自定义ModalHeader的内容。
footer：自定义ModalFooter的内容。

5. 样式设计

使用CSS或SCSS编写模态框的样式，确保样式隔离，避免污染全局样式。
使用CSS变量或props传递样式，以支持样式定制。

6. 功能实现

显示与隐藏：通过visible prop控制模态框的显示与隐藏。
点击外部关闭：监听点击事件，判断点击位置是否在模态框外部，以实现点击外部关闭功能。
关闭回调：在关闭模态框前调用beforeClose回调函数。

7. 使用Vue 3.0新特性

Teleport：使用<Teleport>将模态框渲染到body标签下，避免样式冲突。
Composition API：使用Composition API（如setup函数、ref、reactive等）管理组件状态和逻辑。

8. 示例代码

<template>
  <Teleport to="body">
    <div v-if="visible" class="modal-overlay" @click="handleOverlayClick">
      <div class="modal-content" @click.stop>
        <ModalHeader v-if="$slots.header">
          <slot name="header"></slot>
        </ModalHeader>
        <ModalBody>
          <slot></slot>
        </ModalBody>
        <ModalFooter v-if="$slots.footer">
          <slot name="footer"></slot>
        </ModalFooter>
      </div>
    </div>
  </Teleport>
</template>
<script>
import { ref, watch } from 'vue';
import ModalHeader from './ModalHeader.vue';
import ModalBody from './ModalBody.vue';
import ModalFooter from './ModalFooter.vue';
export default {
  components: {
    ModalHeader,
    ModalBody,
    ModalFooter
  },
  props: {
    visible: Boolean,
    title: String,
    closeOnClickOutside: Boolean,
    beforeClose: Function
  },
  emits: ['update:visible', 'close'],
  setup(props, { emit }) {
    const handleClose = () => {
      if (props.beforeClose) {
        props.beforeClose(() => {
          emit('update:visible', false);
          emit('close');
        });
      } else {
        emit('update:visible', false);
        emit('close');
      }
    };
    const handleOverlayClick = () => {
      if (props.closeOnClickOutside) {
        handleClose();
      }
    };
    watch(() => props.visible, (newValue) => {
      if (!newValue) {
        handleClose();
      }
    });
    return {
      handleOverlayClick,
      handleClose
    };
  }
};
</script>
<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  /* 更多样式 */
}
</style>

9. 考虑可访问性

确保模态框可以通过键盘操作，如使用Tab键导航和Esc键关闭。
为模态框添加适当的ARIA属性，以提高可访问性。

10. 单元测试

编写单元测试来验证模态框的功能，如显示/隐藏、点击外部关闭、关闭回调等。通过以上步骤，可以设计并实现一个功能完善、可定制、可

11. 使用Promise实现：限制异步操作的并发个数，并尽可能快的完成全部

要使用Promise来限制异步操作的并发个数，并尽可能快地完成全部操作，我们可以实现一个控制并发数量的函数。以下是一个示例实现：

function limitConcurrentPromises(tasks, limit) {
  let activeTasks = 0;
  const results = [];
  let taskIndex = 0;
  return new Promise((resolve, reject) => {
    function next() {
      if (results.length === tasks.length) {
        resolve(results);
        return;
      }
      while (activeTasks < limit && taskIndex < tasks.length) {
        const task = tasks[taskIndex++];
        activeTasks++;
        task()
          .then(result => {
            results.push(result);
          })
          .catch(reject)
          .finally(() => {
            activeTasks--;
            next();
          });
      }
    }
    next();
  });
}
// 使用示例：
const asyncTasks = [
  () => Promise.resolve(1),
  () => Promise.resolve(2),
  () => Promise.resolve(3),
  () => Promise.resolve(4),
  () => Promise.resolve(5),
];
limitConcurrentPromises(asyncTasks, 2)
  .then(results => {
    console.log(results); // [1, 2, 3, 4, 5]
  })
  .catch(error => {
    console.error(error);
  });

在这个实现中，limitConcurrentPromises函数接受两个参数：

tasks：一个包含异步任务的数组，每个任务是一个返回Promise的函数。
limit：同时运行的异步任务的最大数量。函数内部使用了一个activeTasks变量来跟踪当前活跃的任务数量，以及一个results数组来存储每个任务的结果。taskIndex用于追踪下一个要执行的任务。 next函数负责启动新的任务，直到达到限制的数量，并在任务完成时调用自身以启动更多的任务。当所有任务都完成时，resolve函数被调用，并返回结果数组。这个实现确保了最多只有limit个任务同时运行，并且一旦有任务完成，就会立即启动新的任务，从而尽可能快地完成所有任务。

12. 使用Promise封装一个异步加载图片的方法

使用Promise封装一个异步加载图片的方法可以让我们以更现代的方式处理图片加载，而不是使用传统的回调函数。以下是一个简单的实现：

function loadImage(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    // 图片加载成功时的处理
    img.onload = () => {
      resolve(img);
    };
    // 图片加载失败时的处理
    img.onerror = (error) => {
      reject(error);
    };
    // 设置图片的src属性，开始加载图片
    img.src = url;
  });
}
// 使用示例
const imageUrl = 'https://example.com/image.png';
loadImage(imageUrl)
  .then(img => {
    console.log('图片加载成功');
    document.body.appendChild(img); // 将图片添加到页面中
  })
  .catch(error => {
    console.error('图片加载失败', error);
  });

在这个loadImage函数中，我们创建了一个新的Promise对象，并在Promise的执行函数中创建了一个Image对象。我们为这个Image对象设置了onload和onerror事件处理函数，分别用于处理图片加载成功和失败的情况。

当图片加载成功时，onload事件被触发，我们调用resolve函数并传入img对象，表示Promise成功解决。
当图片加载失败时，onerror事件被触发，我们调用reject函数并传入错误信息，表示Promise被拒绝。最后，我们通过设置img.src属性来开始加载图片。这个操作会触发图片的加载过程。使用这个loadImage函数时，我们可以通过.then()处理图片加载成功的情况，通过.catch()处理图片加载失败的情况。这样，我们就可以在异步加载图片的同时，保持代码的清晰和可维护性。

13. 实现mergePromise函数

mergePromise函数的目的是将多个Promise合并成一个Promise，这个合并后的Promise将等待所有输入的Promise完成，无论是解决（fulfilled）还是拒绝（rejected）。这类似于Promise.all的行为，但mergePromise可以允许我们自定义合并后的结果。以下是一个简单的mergePromise函数实现：

function mergePromise(promises) {
  return new Promise((resolve, reject) => {
    const results = [];
    let completedPromises = 0;
    for (let i = 0; i < promises.length; i++) {
      Promise.resolve(promises[i]).then(
        value => {
          results[i] = { status: 'fulfilled', value };
          completedPromises++;
          if (completedPromises === promises.length) {
            resolve(results);
          }
        },
        reason => {
          results[i] = { status: 'rejected', reason };
          completedPromises++;
          if (completedPromises === promises.length) {
            resolve(results);
          }
        }
      );
    }
    if (promises.length === 0) {
      resolve(results);
    }
  });
}
// 使用示例
const promise1 = Promise.resolve(1);
const promise2 = Promise.reject('error');
const promise3 = Promise.resolve(3);
mergePromise([promise1, promise2, promise3]).then(results => {
  console.log(results);
  // 输出类似于：
  // [
  //   { status: 'fulfilled', value: 1 },
  //   { status: 'rejected', reason: 'error' },
  //   { status: 'fulfilled', value: 3 }
  // ]
});

在这个实现中，mergePromise函数接受一个Promise数组作为输入。它返回一个新的Promise，这个新的Promise将在所有输入的Promise都完成时解决，解决的结果是一个数组，每个元素都是一个对象，表示对应Promise的状态和结果。

如果Promise被解决，对象将包含status: 'fulfilled'和value属性。
如果Promise被拒绝，对象将包含status: 'rejected'和reason属性。我们使用Promise.resolve来确保每个输入都是Promise对象，然后为每个Promise添加then处理函数来捕获其解决或拒绝的结果，并将结果存储在results数组中。我们使用completedPromises计数器来跟踪已经完成的Promise数量，当所有Promise都完成时，我们解决合并后的Promise。这种实现方式允许我们处理每个Promise的完成情况，而不会因为某个Promise的拒绝而导致整个合并后的Promise被拒绝。这对于需要处理多个独立异步操作的场景非常有用。

14. 使用Promise实现红绿灯交替重复亮

要使用Promise实现红绿灯交替重复亮的效果，我们可以创建一个函数，该函数模拟红绿灯的变化，并在每个状态变化后暂停一段时间。以下是一个简单的实现：

function delay(time) {
  return new Promise(resolve => setTimeout(resolve, time));
}
function trafficLight() {
  const colors = ['red', 'green', 'yellow'];
  let index = 0;
  function next() {
    return delay(1000).then(() => {
      const currentColor = colors[index];
      console.log(`The light is now ${currentColor}`);
      index = (index + 1) % colors.length;
      return currentColor;
    });
  }
  function run() {
    next().then(() => run());
  }
  run();
}
trafficLight();

在这个实现中：

delay函数返回一个Promise，该Promise在指定的时间后解决。
trafficLight函数定义了红绿灯的颜色序列和当前颜色的索引。
next函数使用delay来模拟红绿灯状态变化的时间间隔，并在延迟后输出当前灯的颜色，然后更新索引以指向下一个颜色。
run函数调用next函数，并在next解决后递归地调用自己，以实现循环。这样，当你调用trafficLight()函数时，它将开始一个无限循环，模拟红绿灯交替重复亮的效果。每个颜色会持续1秒钟（1000毫秒），然后切换到下一个颜色。请注意，这个实现会在控制台中打印红绿灯的状态，实际的红绿灯控制需要与硬件接口交互，这通常涉及到更复杂的硬件控制和可能的异步I/O操作。

15. 在点击 button 时，触发的 event.target 是哪个？

在React中，当你点击一个按钮时，event.target属性指的是触发事件的元素，即被点击的元素本身。例如，如果你有一个按钮元素，并且你为它添加了一个点击事件处理器，那么在点击这个按钮时，event.target将指向这个按钮元素。下面是一个简单的React组件示例，展示了如何使用event.target：

import React from 'react';
class MyButton extends React.Component {
  handleClick = (event) => {
    // event.target 指向被点击的按钮元素
    console.log(event.target);
    // 可以通过 event.target 来访问按钮的属性，例如：
    console.log(event.target.type); // "button"
    console.log(event.target.tagName); // "BUTTON"
    console.log(event.target.textContent); // 按钮内的文本
  }
  render() {
    return (
      <button onClick={this.handleClick}>
        Click me!
      </button>
    );
  }
}
export default MyButton;

在这个例子中，当用户点击"Click me!"按钮时，handleClick函数会被调用，并且event.target将指向这个按钮元素。你可以通过event.target来访问按钮的属性，如类型、标签名或文本内容。如果你在一个容器元素上设置了点击事件，而点击的实际上是容器内的子元素，那么event.target将指向被点击的子元素，而event.currentTarget将指向容器元素。event.currentTarget总是指向事件处理器所绑定到的元素，而event.target指向实际触发事件的元素。

16. Z 字形变换

Z 字形变换通常是指将一个字符串按照 Z 字形排列，然后按行读取。例如，将字符串 "PAYPALISHIRING" 以 3 行 Z 字形排列后读取，结果是 "PAHNAPLSIIGYIR"。下面是一个用 JavaScript 实现的 Z 字形变换的函数：

function convert(s, numRows) {
  if (numRows === 1 || numRows >= s.length) {
    return s;
  }
  let rows = [];
  for (let i = 0; i < Math.min(numRows, s.length); i++) {
    rows.push('');
  }
  let curRow = 0;
  let goingDown = false;
  for (let i = 0; i < s.length; i++) {
    rows[curRow] += s[i];
    if (curRow === 0 || curRow === numRows - 1) {
      goingDown = !goingDown;
    }
    curRow += goingDown ? 1 : -1;
  }
  return rows.join('');
}
// 示例
const s = "PAYPALISHIRING";
const numRows = 3;
console.log(convert(s, numRows)); // 输出: "PAHNAPLSIIGYIR"

这个函数的工作原理如下：

如果numRows为1或者大于等于字符串长度，直接返回原字符串，因为在这种情况下，Z 字形变换不会改变字符串的顺序。
初始化一个数组rows，用于存储每一行的字符。
使用curRow变量跟踪当前行，goingDown变量跟踪方向（向上或向下）。
遍历字符串中的每个字符，将其添加到当前行，并根据当前行是否为第一行或最后一行来改变方向。
最后，将rows数组中的所有行连接起来，形成变换后的字符串。这个算法的时间复杂度是 O(n)，其中 n 是字符串的长度，因为每个字符只需要遍历一次。空间复杂度也是 O(n)，用于存储变换后的字符串。

17. 怎么实现一个扫描二维码登录PC网站的需求？

实现一个扫描二维码登录PC网站的需求通常涉及以下几个步骤：

1. 后端生成唯一二维码

后端生成一个包含唯一标识（如UUID）的二维码。
将这个唯一标识与一个临时状态（如未扫描、已扫描、已确认等）关联，并存储在服务器端。

2. 前端显示二维码

PC网站前端通过API请求后端获取二维码图片，并显示在登录页面上。

3. 移动端扫描二维码

用户使用移动端设备扫描PC网站上的二维码。
移动端解析二维码中的唯一标识，并通过API发送给后端服务器。

4. 后端确认扫描状态

后端接收到移动端的扫描请求后，更新该唯一标识的状态为“已扫描”。
同时，PC前端通过轮询或WebSocket等方式查询后端，以获取二维码状态的更新。

5. 移动端确认登录

移动端显示确认登录的提示，用户确认后，移动端发送确认登录的请求给后端。
后端验证请求的有效性，并更新状态为“已确认”。

6. PC端完成登录

PC前端检测到状态变为“已确认”后，通过API请求后端获取登录凭证（如JWT Token）。
PC前端使用获取的登录凭证完成登录流程。

技术选型

二维码生成：可以使用开源库如qrcode生成二维码。
通信协议：可以使用HTTP/HTTPS进行API通信，WebSocket用于实时状态更新。
安全考虑：确保所有通信都通过加密通道进行，后端验证所有请求的有效性，防止重放攻击等。

示例流程

PC端：请求 /api/qr/generate，后端返回二维码图片及唯一标识。
移动端：扫描二维码，解析出唯一标识，请求 /api/qr/scan/{uuid}。
后端：接收移动端请求，更新状态，并通过WebSocket通知PC端。
移动端：用户确认登录，请求 /api/qr/confirm/{uuid}。
后端：验证确认请求，更新状态，生成登录凭证。
PC端：检测到状态更新，请求 /api/auth/token/{uuid}，获取登录凭证并完成登录。

注意事项

二维码有效期：设置二维码的有效期，过期后需要重新生成。
状态管理：后端需要有效管理二维码的状态，防止重复扫描或确认。
用户体验：提供清晰的扫描指导和状态提示，优化用户体验。通过以上步骤，可以实现一个基于二维码的PC网站登录流程。

18. a == 1 && a == 2 && a == 3 可能为 true 吗？

在JavaScript中，a == 1 && a == 2 && a == 3 这个表达式在正常情况下是不可能为 true 的，因为一个变量在同一时间不可能同时等于1、2和3。然而，利用JavaScript中的一些特殊性质，可以构造出使这个表达式为 true 的情况。一种方法是利用对象的 valueOf 或 toString 方法。这些方法在对象被转换为原始类型（如数字或字符串）时会被调用。可以重写这些方法，使其在每次调用时返回不同的值。以下是一个示例：

var a = {
  value: 1,
  valueOf: function() {
    return this.value++;
  }
};
if (a == 1 && a == 2 && a == 3) {
  console.log("This is possible!");
}

在这个例子中，对象 a 的 valueOf 方法被重写，每次调用时都会返回当前的 value 属性，并将其递增。因此，当 a 被用于比较操作时，它首先返回1，然后是2，最后是3，使得整个表达式 a == 1 && a == 2 && a == 3 为 true。另一种方法是使用数组的 join 方法，因为 join 方法在数组被转换为字符串时会调用。可以重写 join 方法来实现类似的效果：

var a = [1, 2, 3];
a.join = a.shift;
if (a == 1 && a == 2 && a == 3) {
  console.log("This is also possible!");
}

在这个例子中，数组的 join 方法被重写为 shift 方法，shift 方法会移除数组的第一个元素并返回它。因此，每次比较时，a 都会返回并移除数组的第一个元素，使得表达式为 true。这些技巧通常用于演示JavaScript的灵活性，但在实际开发中应避免使用，因为它们可能导致代码难以理解和维护。

19. js中的undefined和 ReferenceError: xxx is not defined 有什么区别？

在JavaScript中，undefined 和 ReferenceError: xxx is not defined 都是用来表示某种“缺失”或“未定义”的状态，但它们之间有明显的区别：

undefined:
- undefined 是一个原始类型，表示变量已经声明但尚未被赋值。
- 当你尝试访问一个已声明但未赋值的变量时，你会得到 undefined。
- 例如：
```
let a;
console.log(a); // 输出：undefined
```
- undefined 也是全局对象的一个属性，它的值就是 undefined。
ReferenceError: xxx is not defined:
- ReferenceError 是一个错误类型，表示尝试访问一个未声明的变量。
- 当你尝试访问一个从未声明的变量时，JavaScript引擎会抛出 ReferenceError。
- 例如：
```
console.log(b); // 抛出错误：ReferenceError: b is not defined
```
- 这是一种运行时错误，表明代码中存在语法或逻辑问题。总结区别：

undefined 是一个值，表示变量存在但值为空。
ReferenceError: xxx is not defined 是一个错误，表示尝试访问的变量根本不存在。在实际编码中，应该避免依赖 undefined 的行为，因为它可能导致混淆和难以调试的问题。同时，应该确保在使用变量之前已经正确声明和初始化它们，以避免 ReferenceError。

20. Math.ceil()、Math.round()、Math.floor()三者的区别是什么？

Math.ceil()、Math.round() 和 Math.floor() 都是 JavaScript 的 Math 对象提供的方法，用于对数字进行取整操作，但它们的行为有所不同：

Math.ceil()：
- ceil 是“天花板”的意思。
- Math.ceil() 方法用于向上取整，即取大于或等于参数的最小整数。
- 例如：
```
Math.ceil(4.2); // 返回 5
Math.ceil(-4.2); // 返回 -4
```
Math.round()：
- round 是“四舍五入”的意思。
- Math.round() 方法用于四舍五入取整，即如果小数部分小于0.5，则向下取整；如果小数部分大于或等于0.5，则向上取整。
- 例如：
```
Math.round(4.2); // 返回 4
Math.round(4.5); // 返回 5
Math.round(-4.2); // 返回 -4
Math.round(-4.5); // 返回 -4（注意：负数四舍五入时向零方向取整）
```
Math.floor()：
- floor 是“地板”的意思。
- Math.floor() 方法用于向下取整，即取小于或等于参数的最大整数。
- 例如：
```
Math.floor(4.2); // 返回 4
Math.floor(-4.2); // 返回 -5
```

总结区别：

Math.ceil()：总是向上取整。
Math.round()：四舍五入取整，正数时小数部分>=0.5向上取整，<0.5向下取整；负数时向零方向取整。
Math.floor()：总是向下取整。在实际使用时，根据需要选择合适的方法来进行取整操作。

21. 使用input标签上传图片时，怎样触发默认拍照功能？

在使用 <input> 标签上传图片时，要触发默认的拍照功能，通常是在移动设备上利用 <input type="file"> 接受图片文件，并通过 capture 属性来指定使用摄像头。以下是一个基本的示例：

<input type="file" accept="image/*" capture="camera">

这里的关键属性是：

type="file"：指定输入类型为文件上传。
accept="image/*"：指定接受的文件类型为图像文件。
capture="camera"：指示浏览器使用摄像头来捕获图像。当用户点击这个输入框时，如果浏览器支持，并且设备有摄像头，就会打开摄像头让用户拍照。请注意，capture 属性的行为可能因浏览器和设备而异。在一些浏览器中，capture="camera" 可能会直接打开摄像头，而在其他浏览器中，可能会先显示一个选择对话框，让用户选择是拍照还是从图库中选择图片。此外，还有一些注意事项：
不是所有的浏览器都支持 capture 属性。
在桌面浏览器中，这个功能可能不可用或者表现不同，因为桌面设备通常没有集成摄像头或者不期望这种交互。
对于隐私和安全的考虑，浏览器可能会限制或改变这种行为。如果你需要更复杂的拍照功能，比如直接在网页上显示摄像头预览，可能需要使用 WebRTC 的 navigator.mediaDevices.getUserMedia API 来实现。这涉及到更多的JavaScript代码和媒体流处理。

22. 使用js生成1-10000的数组

使用JavaScript生成一个包含1到10000的数组非常简单。你可以使用数组构造函数 Array，结合 fill 方法和 map 方法来实现。以下是一个示例代码：

const array = new Array(10000).fill().map((_, index) => index + 1);

这里发生了几件事情：

new Array(10000) 创建了一个长度为10000的数组，但是这个数组是空的，它的每个元素都是 undefined。
.fill() 方法用 undefined 填充数组，这一步实际上是多余的，因为新创建的数组已经是用 undefined 填充的。但是，为了链式调用 map 方法，我们可以保留它。
.map((_, index) => index + 1) 方法遍历数组，_ 是占位符，表示我们不需要使用当前元素的值，index 是当前元素的索引。对于数组的每个位置，我们返回 index + 1，这样就能生成从1到10000的数组。如果你想要一个更简洁的版本，可以省略 .fill() 方法：

const array = new Array(10000).map((_, index) => index + 1);

这样就可以生成一个包含1到10000的数组。

23. 解释下如下代码的意图：Array.prototype.slice.apply(arguments)

Array.prototype.slice.apply(arguments) 这行代码的意图是将一个类似数组的对象（在这个例子中是 arguments）转换为一个真正的数组。在JavaScript中，arguments 是一个在函数内部可用的特殊对象，它包含了传入函数的所有参数。但是，arguments 并不是一个真正的数组，而是一个类数组对象，它没有数组的方法，如 map、filter、slice 等。 Array.prototype.slice 是数组的一个方法，用于创建一个新数组，包含从开始到结束（不包括结束）选择的数组的元素。当没有传递参数时，slice 会复制整个数组。由于 arguments 不是真正的数组，你不能直接调用 arguments.slice()。为了使用 slice 方法，可以使用 Function.prototype.apply 方法，它允许你调用一个函数，并将其 this 值设置为提供的值，并且可以传递一个数组或类数组对象作为参数。所以，Array.prototype.slice.apply(arguments) 的作用如下：

Array.prototype.slice：获取数组的 slice 方法。
.apply(arguments)：将 slice 方法应用到 arguments 对象上，将 arguments 的 this 值设置为 slice 方法的 this 值，并传递 arguments 作为参数。这样，slice 方法就会将 arguments 对象转换为一个新数组，包含了 arguments 中的所有元素。这个新数组就是一个真正的数组，具有所有数组的方法和属性。这行代码通常用于在ES5及更早的JavaScript环境中将 arguments 转换为数组。在ES6及更高版本中，可以使用展开运算符 ... 来更简洁地实现同样的功能：

const argsArray = [...arguments];

这样也可以将 arguments 转换为一个真正的数组。

24. js中数组是如何在内存中存储的？

在JavaScript中，数组在内存中的存储方式与其他语言有所不同，主要是因为JavaScript的数组是动态的并且可以存储不同类型的元素。下面是JavaScript数组在内存中存储的一些关键点：

动态数组：
- JavaScript数组是动态的，意味着它们可以自动增长或缩小以适应元素的数量。不需要预先定义数组的大小。
元素存储：
- 数组中的每个元素在内存中都有对应的存储空间。这些元素可以是任何类型，包括数字、字符串、对象、函数等。
数组对象：
- JavaScript中的数组实际上是一个特殊的对象，它有一个内部的数字属性（称为索引）和可能的额外属性。数组的索引被视为对象的属性名，但它们是特殊的，因为它们是数字且按照顺序排列。
内部实现：
- JavaScript引擎通常使用一个类似于哈希表的数据结构来存储数组元素。对于密集数组（即索引是连续的），引擎可能会使用更高效的存储方式，如连续的内存空间。
稀疏数组：
- 如果数组中有缺失的索引（即不是连续的），那么这个数组被称为稀疏数组。稀疏数组在内存中的表示可能不同于密集数组，因为需要存储额外的信息来表示缺失的索引。
内存分配：
- 当数组增长时，JavaScript引擎可能会分配一个新的、更大的内存块来存储数组元素，并将旧数组中的元素复制到新位置。这个过程对于开发者是透明的。
引用类型：
- 如果数组存储的是引用类型（如对象或数组），那么数组中存储的实际上是这些对象的引用，而不是对象本身。对象本身存储在堆内存中的其他位置。
垃圾回收：
- 当数组不再被引用时，JavaScript的垃圾回收机制会清理数组占用的内存。如果数组中包含对其他对象的引用，这些对象也会被垃圾回收，除非它们还被其他引用所指向。总的来说，JavaScript数组的内存存储是高度抽象的，开发者不需要关心底层的内存管理。JavaScript引擎负责高效地管理数组的内存，包括分配、复制和回收。这种抽象使得JavaScript数组非常灵活和强大，但也意味着性能可能不如某些其他语言中固定大小的数组。

25. input上传文件可以同时选择多张吗？怎么设置？

是的，input上传文件可以同时选择多张。这主要依赖于input标签的type属性为file时，可以使用的multiple属性。

如何设置：

HTML结构：
- 在input标签中，设置type="file"和multiple属性。这样，用户就可以在选择文件时按住Ctrl（或Command）键选择多个文件。
```
<input type="file" multiple>
```
选择多个文件的提示：
- 你也可以在input标签中添加accept属性来限制可选择的文件类型，例如只允许选择图片：
```
<input type="file" multiple accept="image/*">
```

JavaScript处理：

在JavaScript中，你可以通过files属性获取到用户选择的多个文件，并进行进一步的处理：

document.getElementById('fileInput').addEventListener('change', function(event) {
    const files = event.target.files;
    for (let i = 0; i < files.length; i++) {
        console.log(files[i].name);
    }
});

注意事项：

浏览器兼容性：几乎所有的现代浏览器都支持multiple属性，但如果你需要支持旧版浏览器，可能需要做额外的兼容性处理。
用户体验：选择多个文件时，确保后端和前端都能正确处理这些文件，例如正确显示文件列表、上传进度等。
安全性：处理用户上传的文件时，始终要注意安全性问题，如文件类型检查、大小限制等，以防止恶意上传。通过以上设置，用户就可以在使用你的网页或应用时同时选择多张文件进行上传了。

26. 直接在script标签中写 export 为什么会报错？

在HTML的<script>标签中直接使用export关键字会报错，因为export是ES6模块语法的一部分，而<script>标签默认不支持ES6模块语法。要使用ES6模块语法，你需要将<script>标签的type属性设置为module。

正确的使用方式：

将<script>标签的type属性设置为module：

<script type="module">
    export function myFunction() {
        console.log('This is a module function');
    }
</script>

使用外部模块文件：

你也可以将模块代码放在一个单独的文件中，然后在<script>标签中使用src属性引用它：

<!-- index.html -->
<script type="module" src="my-module.js"></script>

// my-module.js
export function myFunction() {
    console.log('This is a module function');
}

常见错误：

未设置type="module"：如果你在<script>标签中直接使用export但没有设置type="module"，浏览器会将其视为常规脚本，从而导致语法错误。
浏览器兼容性：虽然大多数现代浏览器都支持ES6模块，但如果你需要支持旧版浏览器，可能需要使用模块打包工具（如Webpack）来转换模块代码。

注意事项：

模块作用域：ES6模块具有自己的作用域，这意味着模块内部的变量和函数不会污染全局作用域。
异步加载：ES6模块是异步加载的，这意味着它们不会阻塞页面的解析。
跨域限制：如果使用外部模块文件，并且这些文件位于不同的域上，你可能需要设置CORS头部以允许跨域访问。通过正确设置<script>标签的type属性为module，你就可以在HTML中直接使用ES6模块语法了。

27. 为什么说HTTP是无状态的协议？

HTTP（超文本传输协议）被描述为“无状态”的协议，主要是因为它不要求服务器在处理请求时保留关于请求状态的信息。每个HTTP请求都是独立的，服务器在处理完一个请求后不会保留任何关于该请求的信息，以便用于后续的请求。

无状态的原因：

简单性：无状态设计使得HTTP协议简单且易于实现。服务器不需要为每个客户端维护状态信息，从而减少了服务器的负担。
可扩展性：由于不需要维护状态，服务器可以更容易地处理大量并发请求，提高了系统的可扩展性。
灵活性：无状态允许请求可以由任何服务器响应，这为负载均衡和分布式系统提供了便利。
缓存友好：无状态特性使得HTTP请求可以被缓存，从而提高性能。

无状态的影响：

每次请求都需要包含所有必要的信息：由于服务器不保留状态，每个请求都必须包含所有必要的信息，以便服务器理解并处理请求。
会话管理：对于需要维护会话状态的应用（如购物车、用户登录等），通常需要使用额外的机制，如cookies、session存储或token来管理会话状态。
资源消耗：对于需要频繁传输大量状态信息的场景，无状态可能导致额外的资源消耗。

克服无状态的策略：

Cookies：客户端可以存储小型数据（cookies），并在每个请求中发送到服务器，以维护会话状态。
Session：服务器可以生成一个session ID，并将其通过cookie发送给客户端，客户端在后续请求中携带这个ID，以便服务器识别会话。
Token：使用token（如JWT）来存储用户状态，客户端在请求时携带token，服务器根据token来验证用户状态。
URL重写：将状态信息编码到URL中，通过URL传递状态。尽管HTTP是无状态的，但这些策略使得Web应用能够管理复杂的用户交互和会话状态。

28. 如何禁止input展示输入的历史记录？

要禁止input元素展示输入的历史记录，可以通过设置该元素的autocomplete属性为off来实现。这个属性告诉浏览器不要保存用户的输入历史，也不要在用户再次输入时显示之前的输入建议。以下是具体的实现方法：

HTML代码示例

<input type="text" name="username" autocomplete="off" />

说明

autocomplete="off"：这个属性值指示浏览器关闭自动完成功能。

注意事项

浏览器兼容性：大多数现代浏览器都支持autocomplete="off"，但有些浏览器可能会忽略这个属性，特别是对于密码字段。
安全性：虽然autocomplete="off"可以防止浏览器显示历史记录，但它并不能完全保证用户输入的数据不被浏览器或其他软件记录。因此，对于敏感信息，还需要采取其他安全措施。
用户体验：关闭自动完成功能可能会影响用户体验，因为用户无法利用历史记录快速填写表单。

其他方法

如果autocomplete="off"不够有效，还可以尝试以下方法：

动态生成输入字段：通过JavaScript动态生成输入字段，并为每个字段生成唯一的名称，这样浏览器就不会将其与历史记录关联。
使用伪随机值：为输入字段的名称或ID添加伪随机值，以避免与历史记录匹配。

示例：动态生成输入字段

<input type="text" id="unique-input" name="unique-input" autocomplete="off" />
<script>
  document.getElementById('unique-input').name = 'unique-input-' + Math.random().toString(36).substr(2, 9);
</script>

在这个示例中，通过JavaScript为输入字段生成一个唯一的名称，从而减少与历史记录匹配的可能性。通过这些方法，可以有效地禁止input元素展示输入的历史记录，提高表单的安全性和用户体验。

29. 如何从html元素继承box-sizing？

在CSS中，box-sizing属性用于控制元素的宽度和高度如何计算。默认情况下，元素的box-sizing值为content-box，这意味着元素的宽度和高度只包括内容的宽度和高度，不包括边框和内边距。如果你想要从父元素继承box-sizing属性，可以使用inherit值。以下是如何从HTML元素继承box-sizing的步骤：

CSS代码示例

/* 设置父元素的box-sizing */
.parent-element {
  box-sizing: border-box; /* 或者其他你想要的值 */
}
/* 让子元素继承父元素的box-sizing */
.child-element {
  box-sizing: inherit;
}

HTML代码示例

<div class="parent-element">
  <div class="child-element">
    <!-- 内容 -->
  </div>
</div>

说明

.parent-element：这是父元素的类名，我们为其设置了box-sizing: border-box;，这意味着元素的宽度和高度将包括内容、内边距和边框。
.child-element：这是子元素的类名，我们为其设置了box-sizing: inherit;，这表示子元素将继承其父元素的box-sizing值。

全局继承

如果你想要所有元素都继承box-sizing属性，可以设置全局选择器：

* {
  box-sizing: inherit;
}
html {
  box-sizing: border-box;
}

在这个例子中，我们首先将所有元素的box-sizing设置为inherit，然后明确设置html元素的box-sizing为border-box。这样，所有元素都会继承html元素的box-sizing值。

注意事项

性能考虑：使用通配符选择器*可能会影响页面的性能，因为它会应用到所有元素上。在大型项目中，应谨慎使用。
浏览器兼容性：大多数现代浏览器都支持box-sizing属性，但为了更好的兼容性，可以考虑添加浏览器前缀。通过这些方法，你可以轻松地从HTML元素继承box-sizing属性，从而保持一致的盒模型计算方式。

30. 如何使用css来实现禁止移动端页面的左右划动手势？

要使用CSS来禁止移动端页面的左右划动手势，可以通过阻止默认的触摸事件来实现。虽然CSS本身并不直接提供禁止手势的功能，但可以通过CSS的touch-action属性来控制触摸屏设备上的触摸行为。 touch-action属性用于指定用户与触摸屏交互时浏览器应该执行什么动作。通过设置touch-action为none，可以告诉浏览器不要执行任何触摸相关的默认行为，包括滚动和缩放。以下是如何使用CSS的touch-action属性来禁止左右划动手势的示例：

CSS代码示例

/* 禁止整个页面的左右划动手势 */
body {
  touch-action: pan-y pinch-zoom; /* 允许垂直滚动和缩放，禁止水平滚动 */
}
/* 如果只想禁止特定元素的左右划动手势 */
.no-horizontal-scroll {
  touch-action: pan-y pinch-zoom;
}

HTML代码示例

<!-- 页面内容 -->
<body>
  <!-- 其他内容 -->
  <!-- 特定元素，禁止左右划动 -->
  <div class="no-horizontal-scroll">
    <!-- 内容 -->
  </div>
</body>

说明

touch-action: pan-y pinch-zoom;：这个属性值允许用户在垂直方向上滚动（pan-y）和进行双指缩放（pinch-zoom），但禁止了水平方向的滚动（即左右划动）。
body选择器：应用于整个页面，禁止页面级别的左右划动手势。
.no-horizontal-scroll类：可以应用于特定的元素，只禁止这些元素的左右划动手势。

注意事项

用户体验：禁止左右划动手势可能会影响用户体验，特别是在需要水平滚动的场景中。确保这种设计符合你的应用需求。
浏览器兼容性：touch-action属性在大多数现代浏览器中都得到支持，但在一些旧版浏览器中可能不兼容。 always check for compatibility if you need to support older browsers.
JavaScript备选方案：如果CSS方法不满足需求，可以考虑使用JavaScript来阻止触摸事件，例如通过监听touchmove事件并调用event.preventDefault()。通过这种方式，你可以有效地使用CSS来禁止移动端页面的左右划动手势，从而控制用户的触摸交互体验。

31. 如何迁移仓库，同时保留原有的提交记录和分支？

迁移仓库同时保留原有的提交记录和分支，通常可以通过以下几种方法实现：

方法一：使用 Git 命令行

克隆原仓库：首先，克隆你想要迁移的仓库到本地。
```
git clone <原仓库的URL>
cd <仓库目录>
```
添加新仓库作为远程仓库：然后，添加你的新仓库地址作为远程仓库。
```
git remote add new-origin <新仓库的URL>
```
推送所有分支到新仓库：接着，推送所有分支（包括它们的更新）到新仓库。
```
git branch -a # 查看所有分支
git push new-origin --all # 推送所有分支
```
推送标签（如果有的话）：如果你有标签需要迁移，也要推送它们。
```
git push new-origin --tags
```
在新的仓库中验证：登录到新仓库的服务器（如 GitHub、GitLab 等），验证所有分支和提交记录是否都已正确迁移。

方法二：使用仓库服务器的导入功能

一些仓库托管服务（如 GitHub、GitLab 等）提供了导入仓库的功能，可以自动完成迁移过程。

访问新仓库的服务器：登录到你的新仓库托管服务。
找到导入仓库的选项：通常在创建新仓库的流程中，或者仓库设置中，会有一个“Import repository”或类似的选项。
填写原仓库的 URL：输入你想要迁移的原仓库的 URL。
开始导入：按照提示完成导入过程。
验证：导入完成后，检查新仓库中的分支和提交记录是否与原仓库一致。

方法三：使用第三方工具

还有一些第三方工具和服务可以协助你迁移仓库，例如 git subtree、git mv 等，但这些方法通常更复杂，适用于特定的迁移场景。

注意事项：

访问权限：确保你有原仓库的读取权限和新仓库的写入权限。
大文件：如果仓库中包含大文件，可能需要使用 Git LFS（Large File Storage）。
钩子和工作流：仓库的钩子（hook）和工作流设置不会随代码一起迁移，需要在新仓库中重新设置。
私密性：如果原仓库是私有的，确保在迁移过程中不会泄露敏感信息。选择适合你需求的方法，按照步骤操作，就可以成功迁移仓库，同时保留原有的提交记录和分支。

2025面试大全（24）

1. React 中怎么实现状态自动保存（KeepAlive）？

1. 使用React Router的<KeepAlive>组件

2. 使用react-activation库

3. 手动实现状态保存

4. 使用Redux或其他状态管理库

2. useEffect 与 useLayoutEffect 有什么区别？

useEffect

useLayoutEffect

主要区别

使用建议

3. React Hooks 在使用上有哪些限制？

1. 只能在函数组件的顶层调用 Hooks

2. 只能在 React 函数组件或自定义 Hooks 中调用 Hooks

3. 避免在 useEffect 中进行阻塞操作

4. 依赖数组的重要性

5. 不要在 Hooks 中直接修改状态

6. 避免在渲染过程中调用 Hooks

7. 自定义 Hooks 的命名规范

8. Hooks 的顺序一致性

9. 不要在条件语句中创建 Hooks

4. 为什么 useState 返回的是数组而不是对象？

1. 解构赋值的便利性

2. 性能优化

3. 保持简洁

4. 与其他 Hooks 的一致性

5. 历史原因

6. 避免命名冲突

示例对比

5. Redux中的connect有什么作用？

1. 连接组件和Redux

2. 映射StateToProps

3. 映射DispatchToProps

4. 订阅状态更新

5. 解耦组件和Redux

6. 提供更好的组织结构

7. 易于测试

8. 更好的代码组织

示例

总结

6. Redux 和 Vuex 有什么区别，它们有什么共同思想吗？

7. mobx 和 redux 有什么区别？

设计哲学

使用方式

适用场景

性能

学习曲线

共同思想

8. Redux 状态管理器和变量挂载到 window 中有什么区别？

主要区别：

共同思想：

9. Redux 中异步的请求怎么处理

Redux状态管理器：

变量挂载到window中：

主要区别：

10. 如果使用Vue3.0实现一个 Modal，你会怎么进行设计？

1. 组件结构设计

2. Props定义

3. Emit定义

4. Slot使用

5. 样式设计

6. 功能实现

7. 使用Vue 3.0新特性

8. 示例代码

9. 考虑可访问性

10. 单元测试

11. 使用Promise实现：限制异步操作的并发个数，并尽可能快的完成全部

12. 使用Promise封装一个异步加载图片的方法

13. 实现mergePromise函数

14. 使用Promise实现红绿灯交替重复亮

15. 在点击 button 时，触发的 event.target 是哪个？

16. Z 字形变换

17. 怎么实现一个扫描二维码登录PC网站的需求？

1. 后端生成唯一二维码

2. 前端显示二维码

3. 移动端扫描二维码

4. 后端确认扫描状态

5. 移动端确认登录

6. PC端完成登录

技术选型

1. 使用React Router的`<KeepAlive>`组件

2. 使用`react-activation`库