🍊

JavaScript的高阶函数是一个非常强大的特性，它允许我们编写更加灵活和可重用的代码。在本文中，我们将探讨高阶函数的概念、它们如何实现以及一些示例。

什么是高阶函数

高阶函数是指接受一个或多个函数作为参数，并可以返回函数作为结果的函数。这种函数可以用来将其他函数“包装起来”或者实现某种通用的行为。ES6的箭头函数使得编写高阶函数变得更加简单和方便。

高阶函数的实现

下面是一个使用普通函数实现高阶函数的例子：

1
2
3
4
5
6
7
8

function map(arr, fn) {
    const mappedArr = [];
    for (let i=0; i<arr.length; i++) {
        const val = fn(arr[i], i, arr);
        mappedArr.push(val);
    }
    return mappedArr;
}

这个函数实现了一个非常常见的高阶函数——map()。它接受一个数组和一个函数作为参数，并返回一个新数组，这个新数组的元素是将原数组的每个元素传递给函数之后得到的新值。

使用箭头函数，我们可以更加简洁地实现同样的功能：

1

const map = (arr, fn) => arr.map(fn);

这个例子中，我们用箭头函数实现了一个新的map()函数。它使用了原生的Array.map()方法实现了同样的功能，代码更加简洁和优雅。

高阶函数的示例

现在我们来看一些常见的高阶函数例子，以及它们如何用于实现通用的行为。

forEach()

forEach()是一个很常见的高阶函数，它用于遍历数组。我们可以使用它将一个函数应用于数组的每个元素：

1
2

const numbers = [1, 2, 3, 4, 5];
numbers.forEach(num => console.log(num));

这将会打印数组中的每个数字。

filter()

filter()是另一个常见的高阶函数，它用于过滤数组。我们可以使用它筛选出我们想要的元素：

1
2
3
4
5
6
7

const people = [
    {name: 'John', age: 25},
    {name: 'Jane', age: 30},
    {name: 'Bob', age: 20}
];
const adults = people.filter(person => person.age >= 25);
console.log(adults);

这将会输出年龄大于或等于25岁的人的信息。

reduce()

reduce()是一个非常强大的高阶函数，它可以从一个数组中提取出一个值。我们可以使用它来计算数组的平均值、求和等操作：

1
2
3

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum);

这将会输出数组的总和5。

总结

高阶函数是一个非常有用和强大的概念。它们允许我们编写更加灵活和可重用的代码。在本文中，我们探讨了高阶函数的概念和实现方法，并给出了一些实际例子。当您编写JavaScript代码时，请记得考虑使用高阶函数来提高代码的可维护性和灵活性。

这是一份 Git 命令的快速查找手册，包含了 Git 的常用命令和基本用法。快速找到你需要的命令和用法，让你的 Git 使用更加轻松自如。

🚀 初始化

• git init : 初始化一个 Git 仓库。
• git clone <URL> : 克隆一个远程 Git 仓库。

📝 添加与提交

• git add <file> : 将文件添加到暂存区。
• git add . : 将所有修改添加到暂存区。
• git commit -m "<message>" : 提交变更并附上提交信息。
• git commit -a : 跳过暂存区，直接提交所有变更。

🌿 分支和合并

• git branch : 列出当前仓库的所有分支。
• git branch <branch> : 创建一个新分支。
• git checkout <branch> : 切换到一个分支。
• git checkout -b <branch> : 创建一个新的分支并立即切换到该分支。
• git merge <branch> : 合并指定分支到当前分支。
• git merge --no-ff <branch> : 强制 Git 创建一个新的合并提交，即使当前分支可以通过快进合并到指定分支。

🔀 推送与拉取

• git pull : 从远程仓库拉取代码。
• git push : 将本地分支的更改推送到远程仓库。
• git push -u <remote> <branch> : 第一次推送分支时，使用此命令将本地分支推送到远程仓库。
• git fetch <remote> : 从远程仓库拉取变更，但不自动合并它们。
• git fetch --all : 从远程仓库拉取所有分支的变更，但不自动合并它们。
• git push <remote> --delete <branch> : 从远程仓库删除指定分支。

🔎 查看日志

• git log : 查看提交日志。
• git log --oneline : 查看简洁的提交日志。
• git log --graph --oneline : 查看提交日志并显示分支合并图。
• git blame <file> : 显示指定文件的每一行是由谁添加的。

❌ 撤销与修改

• git checkout <file> : 用仓库中的文件替换工作目录中的文件，从而撤消最近的修订。
• git reset HEAD <file> : 取消已暂存文件。
• git reset HEAD~ : 返回上一个commit版本，并将文件修改保留在工作目录。
• git reset <commit> : 恢复指定提交的状态，同时将工作区和暂存区的修改移回到工作区。
• git reset --hard : 取消所有本地修改，并恢复到最近的提交状态。
• git clean -f : 删除未被跟踪的文件。

🎨 其他命令

• git status : 显示工作目录下已提交和未提交的修改。
• git diff : 显示工作目录和本地仓库之间的差异。
• git stash : 将工作目录中的未提交修改保存到一个栈中。
• git stash apply : 恢复最新的stash，并将内容应用于工作区。
• git stash list : 显示所有的stash记录。
• git stash pop : 删除最新的stash，并将其应用于工作区。
• git stash drop : 删除最新的stash。
• git remote add <name> <url> : 将一个新远程仓库添加到当前 Git 仓库中。
• git remote -v : 显示当前仓库的所有远程仓库及其 URL。
• git tag : 列出已经存在的标签。
• git tag <tagname> : 新建一个标签，默认为HEAD，用于后续推送到远程仓库。
• git push origin <tagname> : 将指定标签推送到远程仓库。
• git push origin --tags : 将所有标签推送到远程仓库。
• git show <commit> : 显示指定提交的信息。

Vite 是一个快速、轻量级、易于使用的前端工具。它为开发者提供了一种现代的构建方式，可以快速地构建出高效且易于维护的 Web 应用程序。

在 Vite 版本 4.2 及以上的版本中，我们可以使用 configureServer 方法来拦截 Vite 开发服务器，并将其替换为 express HTTP 服务器。这样，我们就可以使用更加灵活的 HTTP 服务器组合，并且可以方便地实现登录、鉴权等功能。

配置 Vite 插件

为了使用自定义的 express 应用程序，我们需要编写一个 Vite 插件

我们可以通过 myPlugin 函数来创建一个新插件。这个插件暴露了一个 configureServer 方法，我们可以在这个方法中创建并配置一个 express 应用程序。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

import express from 'express'
import cors from 'cors'
import bodyParser from 'body-parser'
import cookieParser from 'cookie-parser'

export default function myPlugin () {
    return {
        name: 'my-plugin',
        configureServer (server) {
            const app = express()

            app.use(cors({
                credentials: true,
                origin: true
            }))

            app.use(bodyParser.urlencoded({
                extended: false
            }))

            app.use(cookieParser())

            server.middlewares.use(app)

            app.use('/login', () => {
                // login
            })
        }
    }
}

在 configureServer 方法中，我们首先创建了一个新的 express 应用程序 app。

接下来，我们注册了 cors、body-parser 和 cookie-parser 中间件，这样我们就可以在应用程序中使用这些中间件了。

然后，我们将应用程序添加到 Vite 开发服务器的中间件中，这样就可以使用自定义的 express 应用程序来处理 HTTP 请求了。

最后，我们向应用程序中添加了一个处理 /login URL 路径的路由处理函数，用于执行登录逻辑。

配置 Vite

使用 configureServer 来配置 Vite 开发服务器也很简单。我们只需要将插件导入应用程序，然后将其添加到 Vite 配置的 plugins 队列中，就可以完整地拦截 Vite 开发服务器了。

1
2
3
4
5
6
7
8

import myPlugin from './myPlugin'

export default defineConfig({
    // ...
    plugins: [
        myPlugin()
    ]
})

结论

通过使用 configureServer 方法，我们可以轻松地拦截 Vite 开发服务器，并使用 express HTTP 服务器来替换它。

这种方式可以让我们在 Vite 开发服务器中使用更加灵活的 HTTP 服务器组合，并且可以方便地实现登录、鉴权等功能。