前端开发面试（复盘）

面试经过：填表——自我介绍——问一些问题——回去等通知

一、 ES6新特性有哪些？

1、新增了两个关键字，let与const，防止了变量提升与变量泄露;

2、新增了箭头函数，简化了函数书写，自动绑定当前上下文的this;

3、扩展运算符，提高了代码的简洁性与可读性；

4、默认参数，简化了函数调用时候的的参数传递（即在定义函数时候，可以给定一个默认的参数值）

function greet(name = 'Guest') {
  console.log(`Hello, ${name}!`);
}

greet(); // 输出：Hello, Guest!
greet('John'); // 输出：Hello, John!

5、模板字符串，用反引号（`）包裹字符串，${}形式，可以插入变量和多行字符串，更加灵活方便；

6、引入了类和继承概念，（类似Java中的面向对象）

7、模块化，通过import和export关键字，更方便导入导出；

8、迭代器和生产器；

9、Promise 对象：用于处理异步操作，避免了回调地狱，使异步代码更加可读和可维护；

10：简化对象属性和方法的定义：可以直接在对象字面量中使用变量作为属性名，同时也可以直接定义简化的方法；

11：数组的新方法：ES6 提供了许多新的数组方法，如 map、filter、reduce 等，使数组操作更加方便和高效。

二、 Promise用过吗？讲讲

Promise使用来处理一部操作的JavaScript对象。可以表示一个尚未完成的操作，并可以在将来某个时间点获得操作结果。

它有三种状态：pending（进行中），Fulfilled（已成功），Rejected（失已败）

promise对象有几个特性：

        可链式调用promise().then()串联处理异步操作

        异常处理：可以用catch()来捕获

        异步操作：promise可以包装各种异步操作，定时器，文件读写，网络请求等。

        同时具有更好的可读性，因为链式调用和异步处理，让代码也更好的可以维护

三、await与async

        `async` 和 `await` 是 JavaScript 中处理异步操作的关键字，通常一块使用

        `async` 关键字用于定义一个异步函数，它可以包含 `await` 关键字。异步函数会返回一个 Promise 对象。

        `await` 关键字用于暂停异步函数的执行，等待一个 Promise 对象的状态变为 resolved（已完成）并返回结果。它只能在异步函数内部使用，并且只能用于返回 Promise 对象的表达式。使用 `await` 关键字可以让异步代码看起来像同步代码，避免了回调函数或 Promise 链的嵌套。

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = 'Hello, World!';
      if (data) {
        resolve(data);
      } else {
        reject(new Error('Failed to fetch data.'));
      }
    }, 1000);
  });
}

async function getData() {
  try {
    const data = await fetchData();
    console.log('Data:', data);
  } catch (error) {
    console.error('Error:', error);
  }
}

getData();

//在上述示例中，`getData()` 是一个异步函数，它使用了 `await` 关键字来等待 `fetchData()` 函数返回的 Promise 对象。当 Promise 对象状态变为 resolved 时，将返回的结果赋值给 `data` 变量，并输出到控制台。

//注意，在使用 `await` 关键字时，需要将其放置在 `async` 函数内部。`await` 只能用于返回 Promise 对象的表达式，并且会阻塞后续代码的执行，直到 Promise 对象状态变为 resolved。

//使用 `async` 和 `await` 可以使异步代码更加简洁、易读，并且可以使用类似同步代码的方式编写异步逻辑。

四、setState有几个参数（因为没怎么用类组件，理解错了，当成了useState，要注意！）

在 React 类组件中，setState方法有两个参数。

1. 第一个参数可以是一个对象（Object）或一个函数（Function）。如果是对象，则表示要更新的状态值；如果是函数，则表示一个更新状态的函数。函数接收两个参数，第一个参数是先前的状态值，第二个参数是当前的属性（props）值。这种方式适用于需要基于先前的状态进行计算或有条件地更新状态的情况。

2. 第二个参数是一个可选的回调函数（Callback），用于在状态更新完成后执行一些操作。回调函数在状态更新完毕且组件重新渲染后被调用。

// 更新状态值
this.setState({ count: this.state.count + 1 });

// 使用函数更新状态值
this.setState((prevState, props) => {
  return { count: prevState.count + props.increment };
});

// 更新状态值，并在完成后执行回调函数
this.setState({ count: this.state.count + 1 }, () => {
  console.log('状态更新完成');
});

//setState 方法是异步的，React 可能会对多个 setState 调用进行批处理以提高性能。因此，不能直接依赖于调用 setState 后立即获取更新后的状态值。如果需要在状态更新后执行某些操作，应该使用回调函数或在 componentDidUpdate 生命周期函数中处理。

五、做过后端管理是吧？权限控制是如何实现的？（后续补充，暂时也不是很明了，目前业务中似乎采用的是后端返回路由，前端根据返回的进行页面路由跳转，没有的应该是直接给不显示，（我猜的，实际还得再去了解了解，学习学习））

六、git如何切换分支？

git checkout <branch>

附：给git常用命令

git init: 在当前目录初始化一个新的 Git 仓库。
git clone <repository>: 克隆（下载）远程仓库到本地。
git add <file>: 将文件添加到暂存区。
git commit -m "<message>": 提交暂存区的文件，并添加提交信息。
git status: 查看当前工作区和暂存区的状态。
git branch: 列出所有分支，当前分支前面会有一个 * 号。
git checkout <branch>: 切换到指定分支。
git checkout -b <branch>: 创建并切换到一个新的分支。
git merge <branch>: 将指定分支合并到当前分支。
git pull: 从远程仓库拉取最新的代码到本地。
git push: 将本地代码推送到远程仓库。
git log: 查看提交历史记录。
git diff: 查看当前修改与上一次提交的差异。
git reset: 撤销提交或重置当前分支的状态。

七、如果有两个仓库，如何切换，在同一个项目中？（不太懂，项目很大的情况下，会用到多个git仓库吗？具体怎么操作，不会导致代码丢失之类的吗？还是说一个很大的项目下，分多个文件夹，然后分属不同的仓库？）

八、HashRouter与HistoryRouter(BrowserRouter)的区别与联系

区别：

1、URL形式：HashRouter使用Router的哈希部分（#）来管理路由；HistoryRouter通过使用Html5的history Api来管理路由，url没有哈希部分

2、兼容性，hashRouter使用url哈希部分，不会触发页面刷新，所以兼容性会更好；historyRouter需要html5的history api支持，所以旧版本浏览器可能不适配

3、美观性，historyRouter美观性更好，便于推广

联系：

1、路由功能：都提供路由功能，页面导航，路由匹配，组件渲染

2、路由配置：配置方式相同

3、嵌套路由：支持在父组件中定义子路由，实现更复杂的页面结构