# React入门学习（一）基础知识、jsx语法

:::tip{title="react"}
介绍React的入门讲解（一）
:::

## 基础知识、jsx语法，以及个人学习体会

> 大家好，我是 `小超` 同学。最近我正在学习 `React`、阅读 `JS` 文档，并整理 `Node` 的笔记。对于 `React`，这是我学习的第三个框架，我觉得相对于 `Vue`，`React` 可能更加注重组件化思想的实践。学习 `React` 的过程中，我深刻体会到了组件化思想的重要性，也对 `React` 的生命周期有了更深刻的理解。如果有任何错误，请务必指出并交流。
> 

> 祝愿你生活明朗，万物可爱！🌞🌻
>

这是 React 的[官方网站](https://zh-hans.reactjs.org/)，很多问题都可以在官方文档中找到解决方案，因此学会查阅文档非常重要。

## 一、React 简介

### 1. 关于 React

整几个面试题来认识一下~~

> 什么是 React ？
> 

**React** 是一个用于构建用户界面的 JavaScript 库。

- 是一个将数据渲染为 HTML 视图的开源 JS 库
- 它遵循基于组件的方法，有助于构建可重用的 UI 组件
- 它用于开发复杂的交互式的 web 和移动 UI

> React 有什么特点？
> 
1. 使用虚拟 DOM 而不是真正的 DOM
2. 它可以用服务器渲染
3. 它遵循单向数据流或数据绑定
4. 高效
5. 声明式编码，组件化编码 

> React 的一些主要优点？
> 
1. 它提高了应用的性能
2. 可以方便在客户端和服务器端使用
3. 由于使用 JSX，代码的可读性更好
4. 使用 React，编写 UI 测试用例变得非常容易

## 2. Hello，React 🎉

首先需要引入几个 React 包：   

- React 核心库
- 操作 DOM 的 React 扩展库
- 将 JSX 转为 JS 的 Babel 库

![https://image.myxuechao.com/blog/React/react-1.png](https://image.myxuechao.com/blog/React/react-1.png)

我直接用官方的库而没有下载到本地：

```jsx
  
  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
  
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
  
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
```

```jsx
//1.创建虚拟DOM
const VDOM = <h1>Hello,React</h1>/*此处一定不要写引号，因为不是字符串*/
//2.渲染處拟DOM到页面
ReactDOM.render(VDOM, document.getElementById("example"))
```

### 3. 虚拟 DOM 和真实 DOM 的两种创建方法

### 3.1 JS 创建虚拟 DOM

```jsx
 //1.创建虚拟DOM,创建嵌套格式的dom
const VDOM=React.createElement('h1',{id:'title'},React.createElement('span',{},'hello,React'))
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM, document.getElementById("example"))
```

### 3.2 JSX 创建虚拟 DOM

```jsx
//1.创建虚拟DOM
	const VDOM = (  /* 此处一定不要写引号，因为不是字符串 */
    	<h1 id="title">
			<span>Hello,React</span>
		</h1>
	)
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM, document.getElementById("example"))
```

> js 的写法并不是常用的，常用jsx来写，毕竟JSX更符合书写的习惯
> 

## 二、jsx 语法

1. 定义虚拟DOM，不能使用`“”`引号
2. 标签中混入JS表达式的时候使用`{}`

```jsx
id = {myIdÏ}
```

1. 样式的类名指定不能使用class，使用`className`
2. 内联样式应该在 `style` 属性中使用 `{{key: value}}` 的形式来书写。

```jsx
style={{color:'skyblue',fontSize:'24px'}}
```

1. 不能有多个根标签，只能有一个根标签
2. 标签必须闭合，自闭合也行
3. 如果小写字母开头，就将标签转化为 html 同名元素，如果 html 中无该标签对应的元素，就报错；如果是大写字母开头，react 就去渲染对应的组件，如果没有就报错

> 记几个
> 

### 1. 注释

写在花括号里

```jsx
ReactDOM.render(
    <div>
    <h1>学超</h1>
    {/*注释...*/}
     </div>,
    document.getElementById('example')
);
```

### 2. 数组

JSX 允许在模板中插入数组，数组自动展开全部成员

```jsx
var arr = [
  <h1>小丞</h1>,Ï
  <h2>同学</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('example')
);
```

### JSX 小练习

根据动态数据生成 `li`

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello_react</title>
</head>
<body>
  
  <div id="example"></div>
  
  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
  
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
  
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script type="text/babel">
    /*
      注意区分：【js语句(代码)】与【js表达式】
        1. js表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方。
                    下面这些都是表达式：
                      (1）a
                      (2) arr.map()
                      (3) function fn(){}
        2. js语句(代码)：代码中会产生一个结果，但不一定会放在需要值的地方。
                     下面这些都是语句（代码）：
                      (1) if(){}
                      (2) for(){}
                      (3) switch(){}
                       
    */
    // 模拟一些数据
    const VDMData = [
      { name: 'Angular', id: 1 },
      { name: 'React', id: 2 },
      { name: 'Vue', id: 3 }
    ]
    //1.创建虚拟DOM
    const VDOM = (
      <div>
        <h1>前端JS框架列表</h1>
        <ul>
          {
            VDMData.map(item => {
              return <li key={item.id}>{item.name}</li>
            })
          }
        </ul>
      </div>
    )
    // 2. 渲染處拟DOM到页面
    ReactDOM.render(VDOM, document.getElementById("example"))

  </script>
</body>
</html>
```

React入门学习（一）基础知识、jsx语法

:::tip{title="换一换"}
实现百度换一换和自定义分页的功能,下面包含了完整的代码演示教程
:::

在本教程中，我们将使用 Vue 3 和 Composition API 实现一个“换一换”和自定义分页的功能。用户可以通过点击按钮来显示一组新的数据。我们将使用 **`<transition>`** 元素和动画效果，让用户在获取新数据时能够看到转圈动画，增强用户体验。🚀

![https://image.myxuechao.com/blog/refresh-gif.gif](https://image.myxuechao.com/blog/refresh-gif.gif)

### 目标特性 🎯

- 点击按钮“换一换”时，每次都会展示一组新数据。
- 点击“换一换”按钮时，会触发转圈动画效果。💫
- 鼠标悬停在“换一换”按钮上时，按钮图标颜色会变化，用户能直接看到按钮的交互状态。👀

创建组件 🛠️

在 **`src/views`** 目录下，创建一个个组件对应的 **`.vue`** 文件。📁

## 步骤一：实现自定义分页 📖

我们可以使用以下步骤来实现自定义分页的功能：

1. 在状态对象中添加一个 **`page`** 属性，表示当前页码。📄
2. 在 **`getNewList`** 函数中，根据页码和每页显示数量，将原数组分割并计算新数组。🔄
3. 在页面渲染时，根据新数组中的数据渲染页面。🎨
4. 在按钮的点击事件中，根据当前页码和总页数，计算出下一页的页码，并调用 **`getNewList`** 函数获取新的数据。👇

**示例代码：**

## HTML 🌐

首先，我们需要创建自定义分页的 HTML 结构。对于本文中实现自定义分页功能的 Vue 3 项目，我们需要展示以下内容：

```html
<template>
  <div class="container">
    <div class="change" @click="changePage">
      <div class="change-btn">换一换</div>
    </div>
    <div class="list">
      <div class="item" v-for="item in newArr" :key="item.id">
        <span class="title-content-index"> {{ item.id }}</span>
        <div class="title-content-title">{{ item.value }}</div>
      </div>
    </div>
  </div>
</template>
```

## JS

在自定义分页组件中，我们需要实现以下功能：

1. 获取原始数据。
2. 指定分页长度和当前页码，并计算出总页数。
3. 根据当前页数和分页数将数据分割。
4. 定义响应式状态和方法，以供切换分页中使用。

下面是 JavaScript 代码的示例：👇

```jsx
<script>
import { reactive, toRefs, onMounted, computed } from "vue";
export default {
  setup() {
    //  计算总页数
    const totalPage = computed(() => Math.ceil(status.arr.length / PAGE_SIZE));
    // 定义响应式状态和方法
    const status = reactive({
      arr: [
        { id: 1, value: "今日头条" },
        { id: 2, value: "百度搜索" },
        { id: 3, value: "知乎" },
        { id: 4, value: "淘宝" },
        { id: 5, value: "京东" },
        { id: 6, value: "微信" },
        { id: 7, value: "抖音" },
        { id: 8, value: "快手" },
        { id: 9, value: "网易云音乐" },
        { id: 10, value: "哔哩哔哩" },
        { id: 11, value: "饿了么" },
        { id: 12, value: "美团外卖" },
        { id: 13, value: "斗地主" },
        { id: 14, value: "QQ音乐" },
      ],
      newArr: [],
      page: 1, // 添加分页属性
      totalPage,
    });
    const PAGE_SIZE = 6; // 每页显示的数量
    const generatePages = (page = 1) => {
      // 根据分页属性，切分数组
      let startIndex = (page - 1) * PAGE_SIZE; // 计算起始索引
      let endIndex = page * PAGE_SIZE; // 计算结束索引
      status.page = page; // 更新分页属性
      let currentArr = status.arr.slice(startIndex, endIndex); // 切分原始数组
      status.newArr = currentArr; // 更新新数组
    };
    onMounted(() => {
      //  初始化时生成第一页
      generatePages();
    });
    const changePage = () => {
      if (status.page + 1 > status.totalPage) {
        generatePages(1);
      } else {
        generatePages(status.page + 1);
      }
      status.isRotate = true;
    };
    return {
      ...toRefs(status), // 使用 toRefs 将状态对象转为响应式对象
      changePage,
    };
  },
};
</script>
```

这段代码中的主要注意点如下：

1. 使用了 Vue 3 的 Composition API，通过 **`setup`** 函数返回响应式状态和方法。👍
2. 使用了 **`reactive`** 包装原始数据，并使用 **`toRefs`** 将响应式状态转为普通对象，以便在模板中访问。🔍
3. 使用 **`computed`** 计算总页数，将其作为状态存储，并在模板中展示。🔢
4. 定义 **`PAGE_SIZE`** 常量表示每页显示的数量。📏
5. 定义 **`generatePages`** 函数，根据分页属性切分数组，并将切分后的新数组存储到状态对象中。在第一次渲染组件时生成第一页数据。🔨
6. 在 **`changePage`** 函数中根据当前页数和总页数更新分页数据，并使用 **`isRotate`** 状态来展示动画效果。如果当前页是最后一页，则下一页为第一页，否则下一页为当前页加 1。💫

## CSS

```jsx
<style lang="scss" scoped>
.container {
  width: 420px;
  margin: 0 auto;
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 420px;
}

.item {
  width: 200px;
  margin-bottom: 10px;
  display: flex;
  text-align: left;
}
.item .title-content-index {
  margin-right: 4px;
  width: 22px;
  font-family: Arial, sans-serif;
  font-size: 18px;
  line-height: 18px;
  position: relative;
  top: 1px;
}
.item .title-content-title {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 18px;
  color: #626675;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 160px;
}
.change {
  height: 18px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.change-btn {
  font-size: 14px;
  color: #626675;
  margin-left: 2px;
  font-weight: bold;
  cursor: pointer;
}
.change:hover .change-btn {
  color: #315efb;
}
</style>
```

## 步骤二：实现换一换功能🔄

## HTML 🌐

首先，我们需要创建换一换的 HTML 结构。对于本文中实现自定义分页功能的 Vue 3 项目，我们需要展示以下内容：

- 一个按钮，用于触发换一换操作。
- 一个包含旋转动画的图标，用于展示换一换操作的进行状态。💫

下面是 HTML 结构的示例代码：👇

```html
<template>
  <div class="container">
    <div
      class="change"
      @mouseover="isHovered = true"
      @mouseout="isHovered = false"
      @click="changePage"
    >
      <img
        :src="
          isHovered
            ? 'https://image.myxuechao.com/blog/refresh-icon-color.png'
            : 'https://image.myxuechao.com/blog/refresh-icon.png'
        "
        class="refresh-icon"
        :class="{ 'is-rotating': isRotate }"
        alt=""
        @transitionend="onRotateEnd"
      />
      <div class="change-btn">换一换</div>
    </div>
    <div class="list">
      <div class="item" v-for="item in newArr" :key="item.id">
        <span class="title-content-index"> {{ item.id }}</span>
        <div class="title-content-title">{{ item.value }}</div>
      </div>
    </div>
  </div>
</template>
```

## JS

在自定义分页组件中，我们需要实现以下功能：

1. 已经在“步骤一”中实现了分页。
2. 基于当前分页的数据进行数据分割和重新排序。
3. 点击“换一换”按钮时，会触发旋转动画效果。
4. 鼠标悬停在“换一换”按钮上时，按钮图标的颜色会变化，以便用户直接看到交互状态。

换一换的实现只需要修改 **`getNewList`** 这个函数，下面是 JavaScript 代码的示例：👇

**换一换的实现只需要修改 `getNewList` 这个函数就可以了。下面是 JavaScript 代码的示例：👇**

```jsx
const getNewList = (page = 1) => {
      // 根据分页属性，切分数组
      let startIndex = (page - 1) * PAGE_SIZE; // 计算起始索引
      let endIndex = page * PAGE_SIZE; // 计算结束索引
      status.page = page; // 更新分页属性
      let currentArr = status.arr.slice(startIndex, endIndex); // 切分原始数组
      let midIndex = Math.ceil(currentArr.length / 2); // 获取数组 currentArr 的中间元素下标，向上取整
      let newArr = [];

      // 组合新的数组
      for (let i = 0; i < midIndex; i++) {
        if (currentArr[i]) {
          // 通过 if 语句过滤掉 undefined 和 null
          newArr.push(currentArr[i]); // 将位于中间下标左侧的元素添加到新数组中
        }
        if (currentArr[midIndex + i]) {
          // 组合右侧的元素
          newArr.push(currentArr[midIndex + i]);
        }
      }
      status.newArr = newArr; // 更新新数组
    };
```

**点击“换一换”按钮时，会触发旋转动画效果。**💫

```jsx
<script>
import { reactive, toRefs, onMounted,computed} from "vue";
export default {
  setup() {
		//  计算总页数
    const totalPage = computed(() => Math.ceil(status.arr.length / PAGE_SIZE));
    const status = reactive({
      arr: [
        /*...*/
      ],
      newArr: [],
      page: 1, // 添加分页属性
      isHovered: false,
      isRotate: false,
			totalPage,
    });

    const PAGE_SIZE = 6; // 每页显示的数量

    const getNewList = (page = 1) => {
      /*省略代码。上面有*/
    };

    onMounted(() => {
      getNewList();
    });
    const changePage = () => {
      if (status.page + 1 > status.totalPage) {
        getNewList(1);
      } else {
        getNewList(status.page + 1);
      }
      status.isRotate = true;
    };
    const onRotateEnd = () => {
      console.log("动画结束！");
      status.isRotate = false;
    };
    const handleMouseover = () => {
      // 鼠标滑过事件触发时的处理
      console.log("Mouse over");
      status.isHovered = true;
    };
    const handleMouseout = () => {
      // 鼠标离开事件触发时的处理
      console.log("Mouse out");
      status.isHovered = false;
    };
    return {
      ...toRefs(status), // 使用 toRefs 将状态对象转为响应式对象
      changePage,
      handleMouseover,
      handleMouseout,
      onRotateEnd,
    };
  },
};
</script>
```

## CSS

```css
<style lang="scss" scoped>
.refresh-icon {
  width: 22px;
  height: 22px;
}
.is-rotating {
  transition: transform 0.3s;
  transform: rotate(360deg);
}
</style>
```

这段代码中的主要注意点如下：

1. **`getNewList`** 函数接收一个 **`page`** 参数，表示当前的分页属性，如果没有传入，则默认为 1。
2. 计算起始索引 **`startIndex`** 和结束索引 **`endIndex`**，用来切割原始数组。
3. 将计算好的 **`page`** 值更新到状态对象 **`status`** 中的 **`page`** 属性中。
4. 使用 **`slice`** 方法对原始数组进行切割，得到 **`currentArr`** 数组。
5. 计算 **`currentArr`** 数组的中间元素下标 **`midIndex`**，并向上取整。
6. 遍历 **`currentArr`** 数组的前面一半元素，将存在的元素依次添加到 **`newArr`** 数组的末尾。
7. 遍历 **`currentArr`** 数组的后面一半元素，将存在的元素依次添加到 **`newArr`** 数组的末尾。
8. 将组合好的新数组 **`newArr`** 更新到状态对象 **`status`** 中的 **`newArr`** 属性中。
9. 使用了 Vue 3 的 Composition API，在 **`setup`** 函数中返回响应式状态和方法。🚀
10. 定义了一个 **`totalPage`** 响应式状态，用于计算分页总数，随着 **`status.arr`** 数组长度的变化而实时更新。🔢
11. 所有状态对象均采用了 **`reactive`** 函数进行响应式处理，并使用 **`toRefs`** 方法将响应式状态转换为标准对象，方便在模板中直接引用。👀
12. 在触发分页更新时，根据分页属性和每页显示的数量，对原始数组进行切割和组合，得到新的数组并更新状态。🤖
13. 定义了一个 **`handleMouseover`** 响应式方法，在用户鼠标滑过“换一换”按钮时，将 **`isHovered`** 状态设置为 **`true`**，从而实现鼠标滑过效果。👆
14. 定义了一个 **`handleMouseout`** 响应式方法，在用户鼠标离开“换一换”按钮时，将 **`isHovered`** 状态设置为 **`false`**，从而实现鼠标离开效果。👋
15. 定义了一个 **`onRotateEnd`** 响应式方法，在“换一换”按钮转圈动画结束时触发，输出一条 console 日志，并将 **`isRotate`** 状态设置为 **`false`**，从而实现动画结束后的处理。💫

## 完整代码示例

## HTML部分

```jsx
<template>
  <div class="container">
    <div
      class="change"
      @mouseover="isHovered = true"
      @mouseout="isHovered = false"
      @click="changePage"
    >
      <img
        :src="
          isHovered
            ? 'https://image.myxuechao.com/blog/refresh-icon-color.png'
            : 'https://image.myxuechao.com/blog/refresh-icon.png'
        "
        class="refresh-icon"
        :class="{ 'is-rotating': isRotate }"
        alt=""
        @transitionend="onRotateEnd"
      />
      <div class="change-btn">换一换</div>
    </div>
    <div class="list">
      <div class="item" v-for="item in newArr" :key="item.id">
        <span class="title-content-index"> {{ item.id }}</span>
        <div class="title-content-title">{{ item.value }}</div>
      </div>
    </div>
  </div>
</template>
```

## 以下是 JavaScript 代码示例：

```jsx
<script>
import { reactive, toRefs, onMounted, computed } from "vue";
export default {
  setup() {
    //  计算总页数
    const totalPage = computed(() => Math.ceil(status.arr.length / PAGE_SIZE));
    const status = reactive({
      arr: [
        { id: 1, value: "今日头条" },
        { id: 2, value: "百度搜索" },
        { id: 3, value: "知乎" },
        { id: 4, value: "淘宝" },
        { id: 5, value: "京东" },
        { id: 6, value: "微信" },
        { id: 7, value: "抖音" },
        { id: 8, value: "快手" },
        { id: 9, value: "网易云音乐" },
        { id: 10, value: "哔哩哔哩" },
        { id: 11, value: "饿了么" },
        { id: 12, value: "美团外卖" },
        { id: 13, value: "斗地主" },
        { id: 14, value: "QQ音乐" },
      ],
      newArr: [],
      page: 1, // 添加分页属性
      isHovered: false,
      isRotate: false,
      totalPage,
    });

    const PAGE_SIZE = 6; // 每页显示的数量

    const getNewList = (page = 1) => {
      // 根据分页属性，切分数组
      let startIndex = (page - 1) * PAGE_SIZE; // 计算起始索引
      let endIndex = page * PAGE_SIZE; // 计算结束索引
      status.page = page; // 更新分页属性
      let currentArr = status.arr.slice(startIndex, endIndex); // 切分原始数组
      let midIndex = Math.ceil(currentArr.length / 2); // 获取数组 currentArr 的中间元素下标，向上取整
      let newArr = [];

      // 组合新的数组
      for (let i = 0; i < midIndex; i++) {
        if (currentArr[i]) {
          // 通过 if 语句过滤掉 undefined 和 null
          newArr.push(currentArr[i]); // 将位于中间下标左侧的元素添加到新数组中
        }
        if (currentArr[midIndex + i]) {
          // 组合右侧的元素
          newArr.push(currentArr[midIndex + i]);
        }
      }

      status.newArr = newArr; // 更新新数组
    };

    onMounted(() => {
      getNewList();
    });
    const changePage = () => {
      if (status.page + 1 > status.totalPage) {
        getNewList(1);
      } else {
        getNewList(status.page + 1);
      }
      status.isRotate = true;
    };
    const onRotateEnd = () => {
      console.log("动画结束！");
      status.isRotate = false;
    };
    const handleMouseover = () => {
      // 鼠标滑过事件触发时的处理
      console.log("Mouse over");
      status.isHovered = true;
    };
    const handleMouseout = () => {
      // 鼠标离开事件触发时的处理
      console.log("Mouse out");
      status.isHovered = false;
    };
    return {
      ...toRefs(status), // 使用 toRefs 将状态对象转为响应式对象
      changePage,
      handleMouseover,
      handleMouseout,
      onRotateEnd,
    };
  },
};
</script>
```

## CSS部分

```jsx
<style lang="scss" scoped>
.container {
  width: 420px;
  margin: 0 auto;
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 420px;
}

.item {
  width: 200px;
  margin-bottom: 10px;
  display: flex;
  text-align: left;
}
.item .title-content-index {
  margin-right: 4px;
  width: 22px;
  font-family: Arial, sans-serif;
  font-size: 18px;
  line-height: 18px;
  position: relative;
  top: 1px;
}
.item .title-content-title {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 18px;
  color: #626675;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 160px;
}
.change {
  height: 18px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.change-btn {
  font-size: 14px;
  color: #626675;
  margin-left: 2px;
  font-weight: bold;
  cursor: pointer;
}
.change:hover .change-btn {
  color: #315efb;
}

.refresh-icon {
  width: 22px;
  height: 22px;
}
.is-rotating {
  transition: transform 0.3s;
  transform: rotate(360deg);
}
</style>
```

实现百度换一换和自定义分页的功能📝 

# 🚀 Sentry 的基本概念和使用方法 👨‍💻
:::tip{title="配置"}
展示了sentry 的使用方法
:::
## **🌟 Sentry 的基本概念**

1. **Organization（组织）**：组织是 Sentry 的最高层级，用于管理多个项目。一个组织可以有多个成员和团队，成员可以在组织下创建、管理和访问项目。👥
2. **Project（项目）**：项目是 Sentry 中的基本单位，用于管理应用的错误信息。一个项目可以绑定多个代码库，并通过配置不同的监控规则、策略和团队来实现错误监控和协作。🔧
3. **Event（事件）**：Event 是 Sentry 中的错误数据，包含完整的错误信息、环境、用户信息和自定义上下文等。开发人员可以通过 Event 详细了解应用中发生的错误，并根据错误信息来调试和修复应用。🔍
4. **Issue（问题）**：Issue 是 Sentry 中的错误事件，包含错误的类型、上下文、堆栈信息和发生时间等信息。当应用发生错误时，Sentry 会自动捕获并创建相应的 Issue，开发人员可以通过 Sentry 的界面查看和管理这些错误。📚

```mermaid
graph LR
classDef red fill:red,stroke:blue,stroke-wideth:3px,color:#fff;
  A[组织]:::red-->B[项目]:::red;
  B-->C[问题]:::red;
  C-->D[事件]:::red;
  click A ''
```

# **🌟**在Vue中 **Sentry 的使用方法**

## 简介

Sentry是一个开源的错误监控平台，可以帮助开发人员捕获和处理应用程序的错误。📈🚨本文将介绍如何在Vue项目中使用最新版本的Sentry。👨‍💻🚀

| 步骤  | 描述 |
| --- | --- |
| 步骤一：安装 Sentry SDK 📥 | 使用npm来安装最新版本的Sentry SDK |
| 步骤二：创建Sentry实例🛠️ | 在Vue的main.js文件中导入Sentry和相关配置，通过Sentry.init方法创建Sentry实例 |
| 步骤三：在组件中使用Sentry⚙️ | 在Vue组件中使用Sentry实例来捕获和处理错误 |
| 步骤四：设置全局错误处理程序📟 | 设置全局错误处理程序来处理未捕获的错误 |
| 步骤五：上传Source Maps 🚀 | 上传Sourcemaps并将它们与错误报告关联起来 |
| 步骤六：配置接口报错将其发送到Sentry服务器 📩 | 在Vue项目中使用Sentry监控应用程序，将API请求错误发送到Sentry服务器，方便及时解决错误。🚀💻 |

## 使用步骤 🚀：

### 步骤一：安装Sentry SDK 💻

使用npm来安装最新版本的Sentry SDK。在终端中运行以下命令：

```js
npm install --save @sentry/vue@7.47.0  @sentry/tracing@7.47.0
```

### 步骤二：创建Sentry实例🛠️

在项目中，我们需要创建一个Sentry实例，以便在应用程序中捕获和处理错误。要创建一个实例，需要在Vue的`main.js`文件中导入Sentry和相关配置。以下是一个示例：

```js
import Vue from 'vue';
import * as Sentry from "@sentry/vue";
import { Integrations } from "@sentry/tracing";

Sentry.init({
  Vue,
  dsn: '{Your Sentry DSN}',
  integrations: [
    new Integrations.BrowserTracing({
      routingInstrumentation: Sentry.vueRouterInstrumentation(router),
      tracingOrigins: ["localhost", "my-site-url.com", /^\//],
      logErrors: true,
    }),
  ],
  release: '1.0.0', // 版本号
  logErrors: true, // 是否将错误日志打印到控制台
  tracesSampleRate: 1.0,
});

```

在以上代码中，我们使用 `Sentry.init` 方法创建了一个 Sentry 实例，并将其注入到 Vue 实例中。我们还指定了应用程序的 DSN（Data Source Name），这是一个唯一的标识符，用于将错误报告发送到 Sentry 服务器。

### 步骤三：在组件中使用Sentry⚙️

一旦我们创建了Sentry实例，我们就可以在Vue组件中使用它来捕获和处理错误。下面是一个示例：

```js
export default {
  name: 'MyComponent',
  methods: {
    handleClick() {
      try {
        // code that may throw an error
      } catch (error) {
        this.$sentry.captureException(error);
      }
    },
  },
};

```

在上面的代码中，我们在`handleClick`方法中使用`this.$sentry.captureException`方法来捕获错误并将其发送到Sentry服务器。

### 步骤四：设置全局错误处理程序📟

除了在组件中捕获错误之外，我们还可以设置全局错误处理程序来处理未捕获的错误。要设置全局错误处理程序，请在 `main.js` 文件中添加以下代码：

```js
import * as Sentry from '@sentry/vue';

Vue.config.errorHandler = function (error, vm, info) {
  Sentry.captureException(error);
};

```

在上面的代码中，我们使用`Vue.config.errorHandler`方法来设置全局错误处理程序，并使用Sentry的`captureException`方法来捕获错误并将其发送到Sentry服务器。

### 步骤五：上传Source Maps。🚀

为了更好地追踪错误，我们需要上传Sourcemaps并将其与错误报告关联。Sourcemaps是一种文件，它将编译后的JavaScript代码映射回原始源代码。这使得在Sentry中查看错误时，您可以看到原始源代码而不是编译后的代码。

### 在 Vue 中自动上传 Source Maps。

### 方式一、通过 webpack 插件上传 sourcemap

💡**重点**：这种方式会在 `npm run build` 时自动上传 `sourcemap`，**推荐使用这种方式**。

使用`@sentry/webpack-plugin`插件可以自动上传Source Maps到Sentry服务器。以下是实现步骤：

1. 在项目中安装插件：
   
    ```js
    npm install --save-dev @sentry/webpack-plugin@1.12.1
    ```
    
2. 在`vue.config.js`文件中添加以下配置：
   
    ```js
    const SentryWebpackPlugin = require('@sentry/webpack-plugin');
    
    module.exports = {
      configureWebpack: {
        plugins: [
          new SentryWebpackPlugin({
            authToken: '{Your Sentry Auth Token}',
            org: '{Your Sentry Organization}',
            project: '{Your Sentry Project}',
            url: '<https://fe-monitor.qinghotel.com/>',
            include: './dist',
            cleanArtifacts: true, // 上传前删除旧的资源
            ignore: ['node_modules', 'webpack.config.js'],
            urlPrefix: '~/static/js',
          }),
        ],
      },
    };
    ```
    
    ⚠️**非常重要**⚠️
    
    请将 `~/static/js` 替换为你实际线上资源的目录。如果你的资源托管在 `https://example.com/static/js`，请将 `urlPrefix` 设置为 `~/static/js`。
    
    在上面的代码中，我们导入了 `@sentry/webpack-plugin` 插件，并在 `plugins` 数组中添加了一个新的实例。我们还指定了 Sentry 的 `authToken`、`org`、`project` 和 `url`，及 `urlPrefix` 配置线上资源的目录，以及要包含和忽略的文件和文件夹。
    
    用你的 Sentry 项目的实际信息替换 `{Your Sentry Auth Token}`、`{Your Sentry Organization}` 和 `{Your Sentry Project}`。你可以在 Sentry 项目的设置页面找到这些信息。
    
    我写的例子：
    
    ```jsx
    plugins: [
      new SentryWebpackPlugin({
        authToken: '36a573f4f56445f5b340e2f70c82115b8b18f91eed9045568bea8ce61d076e0b', // 项目的密钥
        org: 'sentry', // 项目所属组织
        project: 'crs', // 项目名称
        url: 'https://fe-monitor.qinghotel.com/',
        include: './dist/**/*.map', // 只包含 dist 目录及其子目录中的 .map 文件
        release: '1.0.0', // 上传时的版本号
        ignore: ['node_modules', 'webpack.config.js'],
        urlPrefix: '~/static/js',    // 上传后的资源路径前缀 例如：~/static/js
      }),
    ],
    
    ```
    
    确保你的 Sentry Webpack 插件配置正确：💻👌
    
    - **`authToken`**：你 Sentry 项目的认证令牌，可以在 Sentry 项目设置页面的 API 选项卡下找到，或者在 **[API 页面](https://sentry.io/settings/api/)** 创建一个新的 Auth Token。
    - **`org`**：你 Sentry 组织的短名，在 Sentry 仪表板上可以找到。
    - **`project`**：你 Sentry 项目的短名，在项目设置页面上方可以找到。
    - `url`：是 `SentryWebpackPlugin` 中的一个配置项，用来指定上传 `source map` 文件时使用的 `Sentry` 服务器地址。这个地址应该是你在 `Sentry` 中创建的项目对应的地址，例如 `https://sentry.example.com/`。在代码示例中，`url` 的值为 `https://fe-monitor.qinghotel.com/`，可能是开发者自己的服务器地址。如果是这样的话，需要将其替换为你自己的 `Sentry` 服务器地址。
    - **`include`**：包含要上传的文件的文件夹，对于 Vue 项目通常是 **`./dist`**。
    - `**cleanArtifacts**`:  上传前上传旧的（Source Map）资源
    - **`urlPrefix`**: 这是配置线上资源的目录，你需要将其替换为你实际线上资源的目录。
    - **`ignore`**：要忽略的文件或文件夹，例如 **`node_modules`** 和 **`webpack.config.js`**。
    - **`urlPrefix`**: 这是配置线上资源的目录，你需要将其替换为你实际线上资源的目录。如果你的资源托管在 `https://example.com/static/js`，请将 `urlPrefix` 设置为 `~/static/js`。

### 在上传完成后，🗑️需要删除 `sourcemap` 文件，不要将其部署到线上。

`rm -rf ./dist/static/js/*.map` 命令可用于删除指定路径下的文件。建议在打包完成后删除 sourcemap 文件，以避免将其部署到线上环境。您可以在 `package.json` 文件中添加一个 `build:prod` 命令，该命令会在打包完成后自动删除 sourcemap 文件。以下是示例：👇

```jsx
"scripts": {
        "build:prod": "vue-cli-service build && rm -rf ./dist/static/js/*.map",     
    },
```

这篇文章介绍了Sentry的基本概念和使用方法，包括组织、项目、问题和事件等基本概念，以及如何在Vue项目中使用Sentry SDK来捕获和处理应用程序的错误。文章还介绍了如何上传Sourcemaps并将其与错误报告关联起来，以便更好地追踪错误。此外，文章还提到了一些有趣的 emoji 表情 🚀📈🚨👨‍💻🔧📚🔍。

### 打包效果:

![https://web-1309913245.cos.ap-beijing.myqcloud.com/blog/sentry_1.gif](https://web-1309913245.cos.ap-beijing.myqcloud.com/blog/sentry_1.gif)

回到 `Sentry` 管理界面 `Archive`，可以看到 `sourcemap` 文件已经上传。

![build2.png](https://web-1309913245.cos.ap-beijing.myqcloud.com/blog/sentry_2.png)


### 预览报错效果:

- 点击按钮手动制造并上报错误

- 回到 `sentry` 管理界面，查看对应 `issue`，可以看到具体信息：哪个文件发生了错误，错误的行列数，错误行附近的源代码

![bulid3.png](https://web-1309913245.cos.ap-beijing.myqcloud.com/blog/sentry_3.png)

### 方式二、通过 sentry-cli 命令行工具上传 sourcemap

1. 在开发电脑上安装 `@sentry/cli`。

```jsx
npm install -g @sentry/cli
```

2.配置 `sentry-cli`

在上传之前，我们需要配置 `sentry-cli`，主要配置以下几个信息：

1. `url`: 要上传的 `sentry` 服务的地址，即我们通过 `docker` 启动的服务的地址。
2. `org`: 组织名称，可以在 `sentry` 管理界面的 `Settings` 中设置组织。
3. `project`: `sentry` 项目名，可以在 `sentry` 管理界面的 `Projects` 中查看、创建、设置项目。
4. `token`: `sentry` 服务准入 `sentry-cli` 上传的鉴权 `token`，可以在 `sentry` 管理界面的 `Settings -> Account -> API -> Auth Tokens` 中创建和删除。

3. 执行以下命令创建 `sentry-cli` 配置文件。

```jsx
sentry-cli --url http://127.0.0.1:9000 login
```

这句话中的地址是 Sentry 服务器的地址。在这篇文章里，我使用 Docker 启动了 Sentry 服务，并将其绑定到了本地 9000 端口。因此，这里的地址是 `http://127.0.0.1:9000`。如果你使用的是其他 Sentry 服务器，需要将地址替换为相应的值。

4.命令行中弹出选择

![build4.png](https://web-1309913245.cos.ap-beijing.myqcloud.com/blog/sentry_4.png)

- 选择`n`，则提示输入 `token`，`token` 可以在 `sentry管理界面` 的 `Settings -> Account -> API -> Auth Tokens` 中创建，然后粘贴到命令行
- 选择`y`，则会自动打开浏览器到 `sentry管理界面` 的 `Settings -> Account -> API -> Auth Tokens`，创建或直接复制 `token` 来粘贴

![build5.png](https://web-1309913245.cos.ap-beijing.myqcloud.com/blog/sentry_5.png)

5.命令执行完成后，会生成文件 `~/.sentryclirc`

![build6.png](https://web-1309913245.cos.ap-beijing.myqcloud.com/blog/sentry_6.png)

执行命令 `sentry-cli --url <http://127.0.0.1:9000> login` 后，会在本地生成一个 `~/.sentryclirc` 配置文件，用于存储 Sentry 服务的地址和访问密钥等信息。这个文件会记录之前输入的 Sentry 服务器地址和访问密钥等信息，使得下次使用 `sentry-cli` 命令时无需重新输入这些信息。

⚠️**非常重点**⚠️  一定要记住图片上面的**路径**否则你会后悔

5.命令执行完成后，会生成文件 `~/.sentryclirc`

```bash
vim ~/.sentryclirc
# 或者
open ~/.sentryclirc
```

```bash
[auth]
token=36a573f4f56445f5b340e2f70c82115xxxxxxxxxxx8ce61d076e0b

[defaults]
url=http://127.0.0.1:9000  
project=crs   
org=setry  
```

• 这个文件也可以直接写在前端项目根目录中，`sentry-cli` 命令会优先读取当前目录下的 `.sentryclirc` 文件，如果没有这个文件，才会读取 `~/.sentryclirc`

6.手动上传 `sourcemap`

- 编译前端项目，生成 `build` 目录，其中包含 `sourcemap` 文件

```bash
npm run build
```

- 在上传之前，我们先看下 `sentry` 管理界面 `Settings -> sentry -> Projects -> cra-test -> Source Maps -> Archive`，会发现列表中有一个 `0.0.1` 版本，这个版本是我们在前端项目里通过 `sentry.init` 的 `release` 配置的，只要前端上传过报错信息，就会在管理界面生成这个版本。目前列表中应该没有任何文件。
- 上传命令，会把本地的 `./build` 文件夹下的 `sourcemap` 文件，上传到 `sentry` 服务，并且指定上传到 `Archive` 为 `0.0.1` 版本中：

```bash
sentry-cli releases files 0.0.1  upload-sourcemaps --url-prefix '~/static/js' './dist/static/js/'./*.js.map
```

其中 `-url-prefix` 是指 Sentry 读取 sourcemap 文件服务的路径。如果项目没有部署在域名根目录，则需要调整这个参数。

### 预览报错效果在方式一、通过 webpack 插件上传 sourcemap 是一样的

### 删除 sourcemap 对应的版本。

```bash
sentry-cli releases files 0.0.1 delete --all
```

![build7.png](https://web-1309913245.cos.ap-beijing.myqcloud.com/blog/sentry_7.png)

### 步骤六：配置接口报错返回Sentry并查看错误请求信息

如果想要通过捕获API请求的错误，将错误信息发送到Sentry服务器，可以通过以下方式来实现：

**1. 安装依赖**

首先，我们需要安装依赖包`@sentry/browser`和`@sentry/integrations`：

```bash
npm install @sentry/browser@7.47.0  @sentry/integrations@7.47.0
```

**2. 在 Vue 项目中引入 `Sentry` 和 `HttpClient`：**

```bash
import Vue from 'vue';
import * as Sentry from "@sentry/vue";
import { Integrations } from "@sentry/tracing";
import { HttpClient } from "@sentry/integrations";
Sentry.init({
  Vue,
  dsn: "https://bbd6074134xxxxxxfe-monitor.qinghotel.com/6",
  integrations: [
    new Integrations.BrowserTracing({
      routingInstrumentation: Sentry.vueRouterInstrumentation(router),
      tracingOrigins: ["localhost", "my-site-url.com", /^\//],
      logErrors: true,
    }),
    new HttpClient({ tracing: true })
  ],
  release: '1.0.0',// 版本号
  logErrors: true,// 是否将错误日志打印到控制台
  tracesSampleRate: 1.0,
});
```

**3. 在 Axios 的响应拦截器中添加：**

```js
axios.interceptors.response.use(
  (response) => {
    const res = response.data;
    if ([200, '200', 0, '0', 501, '10000'].includes(res.code)) {
      return res;
    } else {
      let requestData = null;
      if (response.config.method === 'get') {
        requestData = response.config.params;
      } else {
        requestData = response.config.data;
      }
      Sentry.setContext('axios', {
        method: response.config.method,
        url: response.config.url,
        headers: response.config.headers,
        requestData: requestData,
        responseData: response.data
      });
    }
  },
  (error) => {
    return Promise.reject(error);
  }
);

```


这是一个 `axios` 的响应拦截器，用来处理请求返回的数据。如果返回的 `res` 中的 `code` 属性不是 `200` 或 `'200'`，则将请求和响应数据写入 `Sentry`，以便跟踪错误。同时，你也可以根据你的需要来修改或增加 Context 中的信息。

### 效果：

![build8.png](https://web-1309913245.cos.ap-beijing.myqcloud.com/blog/sentry_8.png)

Sentry 的基本概念和使用方法

:::tip{title="工作中参数处理"}
给后台传递数组对象(子数组对象)处理逻辑
:::



# 1.给后台传递数组对象(子数组对象)

## 1、举例一个场景要求

> 需要对原数组数据提取每个对象的 goodsId 和 goodsName，以及对应的 goodsPrices 数组中每个对象的 id 和 roomDay，将这些值组合成新的对象，并存入一个新的数组中

```js
let arrList = [
  {
    goodsId: 1,
    goodsName: '商品1',
    goodsPrice: 100,
    goodsNum: 1,
    goodsPrices: [
      {
        id: 1,
        newRoomPrice: 100, //新房价
        roomDay: '2023-02-10', //日期
      },
      {
        id: 2,
        newRoomPrice: 100, //新房价
        roomDay: '2023-02-11', //日期
      },
      {
        id: 3,
        newRoomPrice: 100, //新房价
        roomDay: '2023-02-12', //日期
      },
      {
        id: 4,
        newRoomPrice: 100, //新房价
        roomDay: '2023-02-13', //日期
      },
    ],
  },
  {
    goodsId: 2,
    goodsName: '商品2',
    goodsPrice: 100,
    goodsNum: 1,
    goodsPrices: [
      {
        id: 1,
        newRoomPrice: 100, //新房价
        roomDay: '2023-02-10', //日期
      },
      {
        id: 2,
        newRoomPrice: 100, //新房价
        roomDay: '2023-02-11', //日期
      },
      {
        id: 3,
        newRoomPrice: 100, //新房价
        roomDay: '2023-02-12', //日期
      },
    ],
  },
  {
    goodsId: 3,
    goodsName: '商品3',
    goodsPrice: 100,
    goodsNum: 1,
    goodsPrices: [
      {
        id: 1,
        newRoomPrice: 100, //新房价
        roomDay: '2023-02-10', //日期
      },
      {
        id: 2,
        newRoomPrice: 100, //新房价
        roomDay: '2023-02-11', //日期
      },
    ],
  },
]
```

## 解决方案（一）

### 1、你可以通过 `Array.map()` 方法遍历 `arrList` 数组，然后针对每一项对象生成新的数组项，包含 `goodsId`、`goodsName`、`id`、`roomDay` 等信息。具体实现如下

```js
const newData = arrList.map((item) => {
  const { goodsId, goodsName, goodsPrices } = item
  const newGoodsPrices = goodsPrices.map(({ id, roomDay }) => ({ id, roomDay }))
  return { goodsId, goodsName, goodsPrices: newGoodsPrices }
})

console.log(newData)
```

- **代码解释**

  > 上述代码中，通过解构赋值将每个对象的 `goodsId`、`goodsName`、`goodsPrices` 提取出来，然后对 `goodsPrices` 数组再次使用 `Array.map()` 方法，取出每个对象中的 `id` 和 `roomDay` 属性，生成新的数组项。最后返回一个新的对象，包含 `goodsId`、`goodsName` 和新的 `goodsPrices` 数组。整个过程可以一步到位，不需要定义中间变量。

## 解决方案（二）

### 2、除了使用 map 方法之外，你还可以使用 for 循环来遍历原数组，并将每一项的 goodsId、goodsName 以及对应的 goodsPrices 的 id、roomDay 组成一个新对象，再将这个对象推入一个新数组中。以下是使用 for 循环实现的示例代码

```js
let newArrList = []

for (let i = 0; i < arrList.length; i++) {
  let obj = {
    goodsId: arrList[i].goodsId,
    goodsName: arrList[i].goodsName,
    goodsPrices: [],
  }

  for (let j = 0; j < arrList[i].goodsPrices.length; j++) {
    obj.goodsPrices.push({
      id: arrList[i].goodsPrices[j].id,
      roomDay: arrList[i].goodsPrices[j].roomDay,
    })
  }

  newArrList.push(obj)
}

console.log(newArrList)

// 输出结果与使用map方法得到的结果相同。
```

- **代码解释**

> 这段代码是对给定的数组 arrList 进行遍历，然后将每一项转换为一个新的对象，并将这些新的对象添加到一个新的数组 newArrList 中。

具体来说，内部循环遍历了每个商品的价格数组 goodsPrices，将其转换为新的对象并将其添加到新数组 goodsPrices 中。外部循环遍历了每个商品对象，每个商品对象的 goodsId、goodsName 属性被保存下来，并且将内部循环中转换出来的 goodsPrices 数组添加到新的商品对象中。最终得到的是一个新的数组 newArrList，其中每个元素都是一个包含商品信息和价格信息的对象。

## 解决方案（三）

### 3、需要对原数组进行遍历，提取每个对象的 goodsId 和 goodsName，以及对应的 goodsPrices 数组中每个对象的 id 和 roomDay，将这些值组合成新的对象，并存入一个新的数组中。可以使用 map()+forEach 方法实现这个过程

```js
const newArrList = arrList.map((item) => {
  const newObj = {
    goodsId: item.goodsId,
    goodsName: item.goodsName,
    goodsPrices: [],
  }
  item.goodsPrices.forEach((priceItem) => {
    newObj.goodsPrices.push({
      id: priceItem.id,
      roomDay: priceItem.roomDay,
    })
  })
  return newObj
})

// 输出新数组
console.log(newArrList)
```

- **代码解释**

> 这里定义了一个新的空数组 newArrList，然后使用 map()方法对原数组进行遍历，map()方法会返回一个新的数组，将每次循环得到的新对象存入这个新数组中。在每次遍历时，首先创建一个空对象 newObj，然后将当前遍历到的对象的 goodsId 和 goodsName 赋值给这个新对象。然后，对当前对象的 goodsPrices 数组进行遍历，将每个对象的 id 和 roomDay 提取出来，存入一个新的对象中，并将这个新的对象存入 newObj 对象的 goodsPrices 数组中。最后，返回这个新对象。

通过这个代码，我们将原数组中每个对象的 goodsId、goodsName 和对应的 goodsPrices 数组中的 id 和 roomDay 提取出来，组成了一个新的数组。

JS给后端传递参数数组对象场景例子

:::tip{title="日期动态前后格式化处理"}
这篇文章主要介绍了一个JavaScript函数，用于根据给定的时间偏移量和格式化字符串来动态格式化日期时间，支持自定义时间格式和计算过去或未来的特定时间点。
:::



# 根据给定的时间偏移量和格式化字符串格式化日期时间方法

```js
/**
    根据给定的时间偏移量和格式化字符串格式化日期时间。
    @param {Object} numAgo - 时间偏移量对象，包括以下属性：
    years {number} 年数偏移量，默认为 0。
    months {number} 月数偏移量，默认为 0。
    days {number} 天数偏移量，默认为 0。
    hours {number} 小时数偏移量，默认为 0。
    minutes {number} 分钟数偏移量，默认为 0。
    seconds {number} 秒数偏移量，默认为 0。
    @param {string} format - 时间格式化字符串，默认为 '{y}-{m}-{d} {h}:{i}:{s}'。
    可使用的占位符有：{y} 年、{m} 月、{d} 日、{h} 小时、{i} 分钟、{s} 秒、{w} 星期。
    @param {Date} date - 基准日期时间，默认为当前时间。
    @returns {string} 格式化后的日期时间字符串。
    */
function getFormattedDate(
  numAgo = { years: 0, months: 0, days: 0, hours: 0, minutes: 0, seconds: 0 },
  format = '{y}-{m}-{d} {h}:{i}:{s}',
  date = new Date()
) {
  // 根据 numAgo 修改时间
  const {
    years = 0,
    months = 0,
    days = 0,
    hours = 0,
    minutes = 0,
    seconds = 0,
  } = numAgo
  date.setFullYear(date.getFullYear() - years)
  date.setMonth(date.getMonth() - months)
  date.setDate(date.getDate() - days)
  date.setHours(date.getHours() - hours)
  date.setMinutes(date.getMinutes() - minutes)
  date.setSeconds(date.getSeconds() - seconds)

  // 获取年、月、日、时、分、秒、星期
  const [y, m, d, h, i, s] = [
    date.getFullYear(),
    date.getMonth() + 1,
    date.getDate(),
    date.getHours(),
    date.getMinutes(),
    date.getSeconds(),
  ]
  const w = ['日', '一', '二', '三', '四', '五', '六'][date.getDay()]

  // 格式化时间
  const formattedDate = format
    .replace(/\{y\}/g, y)
    .replace(/\{m\}/g, m.toString().padStart(2, '0'))
    .replace(/\{d\}/g, d.toString().padStart(2, '0'))
    .replace(/\{h\}/g, h.toString().padStart(2, '0'))
    .replace(/\{i\}/g, i.toString().padStart(2, '0'))
    .replace(/\{s\}/g, s.toString().padStart(2, '0'))
    .replace(/\{w\}/g, w)

  return formattedDate
}
```

### 这个函数可以根据需求格式化时间，并且也支持修改时间。以下是一些调用方法

#### 1. 获取当前时间并格式化

```js
const currentTime = getFormattedDate()
console.log(currentTime) // 输出如：2023-03-14 18:34:14
```

#### 2. 获取当前时间并按指定格式格式化

```js
const format = '{y}/{m}/{d} {h}:{i}:{s}'
const currentTime = getFormattedDate({}, format)
console.log(currentTime) // 输出如：2023/03/14 18:35:30
```

#### 3. 获取当前时间前一天的时间并格式化

```js
const numAgo = { days: 1 }
const currentTime = getFormattedDate(numAgo)
console.log(currentTime) // 输出如：2023-03-13 18:35:51
```

#### 4. 获取当前时间前一周的时间并按指定格式格式化

```js
const numAgo = { days: 7 }
const format = '{y}/{m}/{d} {h}:{i}:{s}'
const currentTime = getFormattedDate(numAgo, format)
console.log(currentTime) // 输出如：2023/03/07 18:36:07
```

#### 5. 获取指定时间并格式化

```js
const date = new Date('2022-02-02 12:00:00')
const currentTime = getFormattedDate({}, '{y}/{m}/{d} {h}:{i}:{s}', date)
console.log(currentTime) // 输出如：2022/02/02 12:00:00
```

#### 6. 获取指定时间前一小时的时间并格式化

```js
const date = new Date('2022-02-02 12:00:00')
const numAgo = { hours: 1 }
const currentTime = getFormattedDate(numAgo, '{y}-{m}-{d} {h}:{i}:{s}', date)
console.log(currentTime) // 输出如：2022-02-02 11:00:00
```

#### 7. 获取指定时间前一年一月一日一小时一分一秒的时间并格式化

```js
const currentTime = getFormattedDate(
  { years: 1, months: 1, days: 1, hours: 1, minutes: 1, seconds: 1 },
  '{y}-{m}-{d} {h}:{i}:{s}',
  new Date('2022-03-14 17:37:00')
)
console.log(currentTime) // 输出如：2021-02-13 16:35:59
```

#### 8. 获取当前时间前一年一月一日一小时一分一秒的时间并格式化

```js
const currentTime = getFormattedDate(
  { years: 1, months: 1, days: 1, hours: 1, minutes: 1, seconds: 1 },
  '{y}-{m}-{d} {h}:{i}:{s}'
)
console.log(currentTime) // 输出如：2022-02-13 18:25:13
```

#### 9.  获取当前时间后一年一月一日星期的时间并格式化

```js
const currentTime = getFormattedDate(
  { years: 1, months: 1, days: 1 },
  '{y}-{m}-{d} 星期{w}'
)
console.log(currentTime) //输出如：2023-03-15 星期三
```