Git 是一种流行的版本控制系统，数百万开发人员使用它来管理自己的代码库。Git最强大的功能之一是通过远程仓库协同工作的能力。

在一个项目中与多人合作时，你必须能够从远程仓库中获取变更并将其与本地仓库合并。本文将教你如何在 Git 中获取远程分支。

什么是远程分支？

在了解如何获取远程分支之前，让我们先定义一下远程分支。

远程分支是指存在于 GitHub、GitLab 或 Bitbucket 等远程仓库中的分支。

克隆一个仓库时，Git 会自动创建一个指向原始仓库的 “remote”分支。然后，你就可以用这个远程分支来获取项目中其他协作者所做的修改。

如何在 Git 中获取远程分支

当你克隆一个仓库时，你可以访问它的所有远程分支。你可以使用git branch命令和-r选项来验证这一点：

git branch -r

你可以使用git checkout命令签出到这些分支中的任何一个。

当你与一群人一起工作时，其中一个贡献者会远程创建一个新的分支。你可能需要将这个远程分支拉取到你的项目中。你可以使用git fetch命令来完成这项工作。

git fetch命令会转向你的远程项目，并从该远程项目中拉取你还没有的所有数据。接着，你就可以获得该远程分支的所有引用，随时可以合并或检查这些引用。

git fetch

你可以写上远程仓库库名称，默认为origin：

git fetch origin

需要注意的是，当你使用git fetch命令时，它只会将远程仓库中的更改下载到本地仓库，而不会自动与你的工作合并，也不会修改你当前的工作。你需要在准备就绪后手动合并更改。

要访问获取的内容，需要使用git checkout命令。这样就能确保在将提交整合到本地仓库之前，对提交进行审核。

如果想获取远程分支并将其与自己的工作合并或修改当前工作，可以使用git pull命令。为此，请使用以下命令：

git pull --all

然后就可以运行git branch -r来验证远程仓库是否已被添加。

总结

在 Git 中获取远程分支是开发环境中协作的一个重要方面。

按照本文概述的步骤，你就能获取其他协作者在远程分支上所做的改动，并将它们与本地仓库合并。这样，你就能在 Git 仓库的不同分支上工作，并与其他开发人员有效协作。

开启学习之旅，浏览 200 多篇关于 web 开发的专业文章。查看我的博客，获取更多精彩内容。

祝你编码愉快！

一直想学习正则表达式但被它们的复杂性劝退了？在本文中，我将向你展示五个易于学习的正则技巧，你可以立即在你最喜欢的文本编辑器中开始使用它们。

文本编辑器设置

虽然现在几乎所有文本编辑器都支持正则表达式，但我将在本教程中使用 Visual Studio Code。你可以使用任何你喜欢的编辑器。另外，请注意，你通常需要在搜索输入附近的某处打开 RegEx。这是在 VS Code 中执行此操作的方法：

1) . — 匹配任何字符

让我们从简单的开始。点符号 . 匹配任何字符：

b.t

上面的 RegEx 匹配 "bot”、"bat” 和任何其他以 b 开头并以 t 结尾的三个字符的单词。但是如果你想搜索点符号，你需要用 \ 对其进行转义，所以这个 RegEx 只会匹配精确的文本 "b.t"：

b\.t

2) .* — 匹配任何字符

这里 . 表示“任何字符”，* 表示“此符号之前的任何内容重复任意次数”。它们一起（.*）表示“任何符号任意次数”。例如，你可以使用它来查找以某些文本开头或结尾的匹配项。假设我们有一个带有以下签名的 JavaScript 方法：

loadScript(scriptName: string, pathToFile: string)

我们想要找到这个方法的所有调用，其中 pathToFile 指向文件夹 “lua” 中的任何文件。你可以为此使用以下正则表达式：

loadScript.*lua

这意味着，匹配所有以 “loadScript” 开头的文本，然后是最后一次出现的 “lua”。

3) ? — 非贪婪匹配

.* 后面的 ? 和其他一些 RegEx 序列之后的符号表示“尽可能少地匹配”。如果你查看上一张图片，你会看到文本 “lua” 在每次匹配中出现两次，并且匹配到第二个 “lua” 的所有内容。如果你想将所有内容匹配到第一次出现的 "lua"，你将使用以下正则表达式：

loadScript.*?lua

这意味着，匹配以 "loadScript" 开头的所有内容，然后是第一次出现的 "lua"。

4) ( ) $ — 捕获组和反向引用

好的，现在我们可以匹配一些文本。但是如果我们想改变我们找到的部分文本呢？为此，我们经常不得不使用捕获组。

假设我们更改了 loadScript 方法，现在它突然需要在两个参数之间插入另一个参数。让我们将这个新参数命名为 id，因此新函数签名应该是 loadScript(scriptName, id, pathToFile)。我们不能在这里使用文本编辑器的普通替换功能，但正则表达式正是我们所需要的。

上面你可以看到运行以下正则表达式的结果：

loadScript\(.*?,.*?\)

这意味着：匹配以 "loadScript(" 开头的所有内容，然后是第一个 , 之前的任何内容，然后是第一个 ) 之前的任何内容。

唯一对你来说可能看起来很奇怪的是 \ 符号。它们用于转义括号。

我们需要对符号 ( 和 ) 进行转义，因为它们是 RegEx 用来捕获部分匹配文本的特殊字符。但是我们需要匹配实际的括号字符。

在前面的 RegEx 中，我们用 .*? 定义了方法调用的两个参数。符号。让我们通过在它们周围添加 ( 和 ) 符号来使我们的每个参数成为一个单独的捕获组：

loadScript\((.*?),(.*?)\)

如果你运行这个正则表达式，你会发现没有任何改变。这是因为它匹配相同的文本。但是现在我们可以将第一个参数称为 $1，将第二个参数称为 $2。这可被称为反向引用，它将帮助我们做我们想做的事情：在调用中间添加另一个参数。

搜索输入：

loadScript\((.*?),(.*?)\)

这意味着与之前的正则表达式相同，但将参数分别映射到捕获组 1 和 2。

替换输入：

loadScript($1,id,$2)

这意味着将每个匹配的文本替换为文本 “loadScript(“，后跟捕获组 1、“id”、捕获组 2 和 )。请注意，你不需要在替换输入中转义括号。

5) [ ] — 字符类

你可以通过在这些字符周围放置 [ 和 ] 符号来列出要在特定位置匹配的字符。例如，class [0-9] 匹配从 0 到 9 的所有数字。你也可以显式列出所有数字：[0123456789] ——含义相同。你也可以将破折​​号与字母一起使用，[a-z] 将匹配任何小写拉丁字符，[A-Z] 将匹配任何大写拉丁字符，而 [a-zA-Z] 将匹配两者。

你也可以在字符类之后使用 *，就像在 . 之后一样，在这种情况下，这意味着：匹配该类中出现的任意数量的字符。

总结

你应该知道有几种正则表达式风格。我在这里讨论的是 JavaScript RegEx 引擎。大多数现代引擎都是相似的，但可能存在一些差异。通常，这些差异包括转义字符和反向引用标记。

我建议你立即打开文本编辑器并开始使用其中的一些技巧。你将看到自己现在可以比以前更快地完成许多重构任务。如果你对这些技巧感到满意，你就可以开始更多地研究正则表达式。

感谢你阅读这篇文章。如果你觉得它有帮助，请将它分享给更多人。

JavaScript 是一种多范式语言，可以按照不同的编程范式进行编写。编程范式本质上就是你在写代码时遵循一些规则，以帮助你解决一个特定的问题。

这就是四大支柱的含义。它们是软件设计原则，帮助你编写整洁的面向对象的代码。

面向对象编程的四大支柱是：

• 抽象
• 封装
• 继承
• 多态

让我们仔细看看这些支柱。

面向对象编程中的抽象

抽象的意思是把实现的细节隐藏在某个东西里面——有时是一个原型，有时是一个函数。因此，当你调用这个函数时，你不需要确切地了解它在做什么。

如果你必须了解一个大代码库中的每一个函数，你将永远无法编码。要花几个月的时间才能读完它。

你可以通过抽象化某些细节来创建一个可重用的、简单易懂的、容易修改的代码库。让我给你举个例子：

function hitAPI(type){
	if (type instanceof InitialLoad) {
		// 实施示例
	} else if (type instanceof NavBar) {
		// 实施示例
	} else {
		// 实施示例
	}
}

你能从这个例子中看到，你如何准确地实现你的自定义用例所需要的东西吗？

你需要的每一个新的 API 都需要一个新的 if 块，以及它自己的自定义代码。这不是抽象的，因为你需要为你添加的每一个新类型担心实现。这不是可重用的，而且是一个维护的恶梦。

像下面这样的方法怎么样？

hitApi('www.kealanparr.com', HTTPMethod.Get)

你现在只需向你的函数传递一个 URL 和你想使用的 HTTP 方法就可以了。

你不必担心这个函数如何工作。它已经被解决了。这极大地有利于代码重用！同时也使你的代码更容易维护。

这就是抽象的意义所在。在你的代码中找到相似的东西，并提供一个通用的函数或对象来服务于多个地方/多个关注点。

这里还有一个很好的抽象的例子：想象一下，如果你正在创建一台机器，为你的用户制作咖啡，可能有两种方法：

如何在有抽象的情况下创建按钮

• 有一个标题为“制作咖啡”的按钮

如何在没有抽象的情况下创建按钮

• 有一个标题为“烧水”的按钮
• 有一个标题为“向水壶中加入冷水”的按钮
• 有一个标题为“向干净的杯子中加入一勺咖啡粉”的按钮
• 有一个标题为“清洁任何脏杯子”的按钮
• 以及所有其他的按钮

这是一个非常简单的例子，但第一种方法将逻辑抽象到机器中去了，第二种方法迫使用户了解如何制作咖啡，并且基本上是自己制作。

下一个支柱向我们展示了一种我们可以实现抽象的方法，即使用封装。

面向对象编程中的封装

封装的定义是“将某物封闭在或像封闭在一个胶囊中的行为”。移除对部分代码的访问并使之成为私有的东西正是封装的意义所在（很多时候，人们把它称为数据隐藏）。

封装意味着你代码中的每个对象都应该控制自己的状态。状态是你的对象的当前“快照”，例如键、你的对象上的方法、布尔属性等等。如果你要重置一个布尔值或从对象中删除一个键，它们都是对你状态的改变。

限制你的代码中哪些部分可以访问。如果不需要的话，让更多的东西无法访问。

在 JavaScript 中，私有属性是通过使用闭包来实现的。下面是一个例子：

var Dog = (function () {

	// 私有
	var play = function () {
		// 执行代码
	};
    
	// 私有
	var breed = "Dalmatian"
    
	// 公有
	var name = "Rex";

	// 公有
	var makeNoise = function () {
 		return 'Bark bark!';
	};

 	return {
		makeNoise: makeNoise,
		name: name
 	};
})();

我们做的第一件事是创建一个立即被调用的函数（Immediately Invoked Function Expression，简称 IIFE）。这创建了一个任何人都可以访问的对象，但隐藏了一些细节。你不能调用 play，也不能访问 breed，因为我们没有在最后的对象中用 return 暴露它。

上面这个特殊的模式被称为揭示模块模式（Revealing Module Pattern），但它只是一个你如何实现封装的例子。

我想更多地关注封装的思想（因为它比仅仅学习一个模式更重要）。

反思一下，多想想如何能把你的数据和代码藏起来，把它分开来。模块化和明确责任是面向对象的关键。

我们为什么要喜欢私有？为什么不把所有的东西都变成全局的呢？

• 很多不相关的代码将通过全局变量成为相互依赖/耦合的对象。
• 如果名字被重复使用，你很可能会覆盖这些变量，这可能会导致错误或不可预测的行为。
• 你很可能最终会产生意大利面条式的代码——很难推理出是什么在读写你的变量和改变状态。

封装可以通过将长行代码分离成较小的独立函数来应用。将这些函数分离成模块。我们把数据隐藏在一个没有其他需要访问的地方，并显示出需要的东西。

这就是封装。将你的数据绑定到某个东西上，无论是类、对象、模块还是函数，并尽你所能保持它的私有性。

面向对象编程中的继承

继承让一个对象获得另一个对象的属性和方法。在 JavaScript 中，这是通过原型继承完成的。

主要的好处是可重用性。我们知道，有时多个地方需要做同样的事情，而且除了一个小部分之外，它们需要做的事情都是一样的。这就是继承可以解决的问题。

每当我们使用继承时，我们都会努力使父代和子代的代码具有高关联度。例如， Bird 类型是否从 DieselEngine 类型中延伸出来？

保持你的继承简单易懂，可以预测。不要因为有一个你需要的方法或属性而从完全不相关的地方继承。继承并不能很好地解决这个特殊问题。

使用继承时，你应该需要大部分的功能（你不一定需要所有的功能）。

开发人员有一个原则，叫做里氏替换原则（Liskov Substitution principle）。它指出，如果你能在使用子类（我们称之为 ChildType）的任何地方使用父类（我们称之为 ParentType）——并且 ChildType 继承自 ParentType——那么你就通过了测试。

你不能通过这个测试的主要原因是，如果 ChildType 从父类移除了一些东西。如果 ChildType 删除了它从父类继承的方法，就会导致 TypeError，即出现未定义的东西，不符合你的期望。

继承链是一个术语，用来描述从基础对象的原型（其他东西都是从它继承的）到继承链的“终点”（最后继承的类型——上面例子中的 Dog）的继承流。

尽力保持你的继承链清晰且合理。在使用继承时，你很容易出现编程反模式（Fragile base anti-pattern）——当你的基础原型被认为是“脆弱的”，因为你对基础对象做了一个“安全”的改变，然后开始破坏你所有的子对象。

面向对象编程中的多态

多态意味着“以多种不同形式出现的条件”。这正是第四个也是最后一个支柱所关注的——同一继承链中的类型能够做不同的事情。

从上一个图中，我们可能有一个叫做 Animal 的基本原型，它定义了 makeNoise。然后，从这个原型延伸出来的每个类型都可以覆盖，做他们自己的自定义工作。就像这样。

// 让我们创建一个 Animal 和 Dog 的例子
function Animal(){}
function Dog(){}

Animal.prototype.makeNoise = function(){
	console.log("Base noise");
};

// 我们编码的大多数动物有 4 个，如果需要的话，这可以被重写
Animal.prototype.legs = 4;

Dog.prototype = new Animal();

Dog.prototype.makeNoise = function(){
	console.log("Woof woof");  
};

var animal = new Animal();
var dog = new Dog();

animal.makeNoise(); // Base noise
dog.makeNoise();    // Woof woof- 这个被覆盖了
dog.legs;           // 4！被继承了

Dog 扩展自 Animal，可以利用默认的 legs 属性。但它也能自己实现制造自己的噪音。

多态的真正力量在于共享行为，并允许自定义重写。

总结

我希望这篇文章解释清楚了什么是面向对象编程的四大支柱，以及它们是如何帮助我们写出更整洁更高效的代码的。

如果你喜欢这篇文章并想看到更多文章，可以在 Twitter 上关注我。

无论你是一个多么有经验的开发者，为一份新工作参加面试总是很有压力。从我自己的经验来看，确实是这样。

我从事专业软件开发工作已经两年半了，经历过五次开发者面试。

我看到人们过多地关注学习具体的算法问题，或者在专门提供面试挑战的在线平台上进行培训。但是，面试还有另一面，我认为它同样重要——而人们对它的关注度较低。

因此，如果你想知道我认为你应该如何关注你的面试训练，请冲一杯咖啡，舒服地坐下来。不要担心，我会通过 Python 示例来帮助你理解。

这是我们要讨论的内容：

1. 算法和数据结构对面试重要吗
2. 专注于协作方式
3. 尝试做模拟面试
   – 第一个面试问题示例
   – 第二个面试问题示例
   – 最难的面试问题示例
4. 总结

让我们深入了解一下。

算法和数据结构对面试重要吗

简短的回答是重要。

了解数据结构和算法往往能帮助你找到工作。此外，拥有扎实的算法背景的一个好处是在面对挑战性问题时能够做出更好的决定。

在现实生活中，算法问题不会像你可能研究的学术练习中的语句那样。不过，你经历的训练越多，你就越有可能识别出平衡二叉树或最短路径算法的应用。

考虑到这一点，我建议不要仅仅为了你想擅长的面试而训练数据结构和算法。即使仅仅为了学习的乐趣，算法的设计和如何使用正确的数据结构也是非常有意思的话题。

面试的范围是非常有限的。要把重点放在解决问题的部分。试着了解如何使用一种算法（或其变体）来完成类似的任务。研究所有的变体，并学会在不同情况下识别它们，这将有助于你以开放的心态面对新任务。

另外，不要背诵解决方案。它不会给你带来任何提升。如果你只针对非常具体的主题进行训练，有经验的开发人员很容易提出正确的问题，让你“大显身手”。

针对一个问题，尝试用不同的方法来解决它。每次都尝试解决更难的问题。走出你的舒适区。

这将会给你回报。

专注于协作方式

很多人在 Leetcode 等网站上进行面试训练。这并没有什么问题。这些网站对训练你解决问题的能力很有帮助。

我至少在过去八年里一直在参加竞争性编程竞赛。我一直从这些在线资源中受益。

但是，对于大多数想要在面试中表现出色的软件工程师来说，有一件事很难理解。他们没有对软件开发中最重要的方面进行训练：协作。

通常情况下，当你在一个在线平台上处理问题时，它对一些输入的最大值有一些限制。它也可能有一些时间和内存的限制，要求你调整你的解决方案，以提高或降低效率。但这不是现实生活中的情况。

将这些约束条件映射到现实生活中的场景并不明显。它们通常是以来自客户的非常具体的要求或团队的非常具体的特征的形式出现。

在一个真实的项目中，团队将合作决定这些约束条件是什么。你必须分析你的用例、你有多少时间来完成任务、谁是最终的用户、有多少人将从事这项工作，等等......

经过一系列的讨论，你们会达成共识，最后开始实施适合你们的解决方案。而这个解决方案在某些情况下甚至不一定是更有效的，但可能是实施速度最快的。

这也是面试官在面试时希望从候选人那里看到的。

你不要直接跳到实施你所知道的针对你所面临的问题的最佳解决方案。相反，你应该把面试官当作一种有价值的资源，把他们当作你的队友（最终，你希望他们是）。问一些关于团队更倾向于如何实施该问题的解决方案的问题。

这将引发非常富有成效的讨论，你可以展示你的编码能力和你的协作技能。你可以先提出简单的解决方案，并带领你的面试官了解如何使用你的锦囊妙计来改进解决方案。

对于在线训练，我再说最后一点。我建议做个人和团队培训。使用诸如 Codeforces 或 AtCoder 这样的网站，这些网站有大量有趣（和具有挑战性）的问题，并尝试每天与自己比赛。

不要专注于你的评级。我以前也这么做过，这只会让你退步。

尝试做模拟面试

如果你读到了这里，我想提出一个小小的练习。让我们进行一次模拟面试，我将扮演面试官的角色。我会告诉你我认为候选人（你）应该如何回答每一个问题和执行每一项任务。

当然，我们将只关注编程挑战部分。面试的其他方面，如谈论以前的经验，也很重要，但我们将尝试在另一篇文章中介绍。

所以，如果你觉得准备得足够充分了，就开始吧！

第一个面试问题示例

让我们从你要解决的任务开始。请记住，如果你和我真的有机会面试，我不会使用这个相同的例子，不过我当然将使用相同的方法 😉。

这个问题的陈述如下：

“给出一个整数 X，确定它是否是一个质数。”

你可能很想去找你知道的最好的解决方案来解决这个问题。我认为这种方法，正如我之前解释的，并不总是正确的。

相反，我想知道的是解决这个问题的不同方法。另外，我希望你能问一下这个任务的要求。比如说：

• 我们应该以性能为目标，还是以更快的速度来解决它？
• 我们应该采取一个对其他开发者来说容易理解的解决方案吗？

通常，在为一个问题创建第一个解决方案时要考虑的是：

• 简单或困难：我们应该制定一个容易实施的解决方案，即使它并不完美，还是应该选择一个更强大但却难以实施的解决方案？
• 马虎与高效：我们应该先提供一个可行的、马虎的解决方案，然后再提供一个更有效的解决方案，还是应该直接选取高效的解决方案？

评估你的团队想要优化什么。达成一个共识，并实施商定的解决方案。

就我而言，如果你提出你能想到的最简单的、最快的、正确的解决方案，然后引导我改进这个方案，我会很高兴。

对于这个问题，一个非常好的初步解决方案的例子是像下面这样的：

# naive.py

def is_prime(x: int) -> bool:
    if x in [0, 1]:
        return False
    for i in range(2, x):
        if x % i == 0:
            return False
    return True

正如你所看到的，这个函数是正确的。由于质数是一个只能被数字 1 和它本身整除的整数，所以从 2 到 x-1 迭代寻找 x 的除数是有意义的，如果我们找到一个，我们可以立即返回 False。否则，我们返回 True。作为边缘案例，数字 0 和 1 根据定义不是质数。

这是一个很好的出发点！

现在，在深入优化这个方法之前，你可以讨论一下代码的风格。它够 Pythonic 吗？我们关心它吗？它可读吗？

所有这些问题一开始可能并不重要，但是，由于我们作为一个团队工作，它们确实很重要。有一个编码风格是很重要的，因为它使每个团队成员更容易理解对方的代码，而且会加快审核和重构的速度。另外，代码更多的是被阅读而不是被书写，所以可读性也很重要！

你可能很想炫耀一下你的 Python 技能，把前面的函数改写成如下：

# pythonic_naive.py

def is_prime(x: int) -> bool:
    return False if x in {0, 1} else all(x % i != 0 for i in range(2, x))

我认为这是一个很好的、符合 Pythonic 的方法来写这个函数。但是，由于团队是最重要的，所以这种修改有待商榷。

可能有些团队成员对 Python 不是那么熟练。也许，在这种情况下，我们应该对可读性进行优化，保留我们最初写的那个函数。

在讨论性能之前，一个更有趣的补充是为该函数添加文档字符串（docstring）。正如我之前所说，这段代码很可能在将来被你的团队成员阅读。那么，重要的是，让他们（和你未来的自己）更容易理解这个函数在做什么。

也许把这个函数改成下面这样会更好：

# naive.py

def is_prime(x: int) -> bool:
    """这个函数以一个整数 `x` 为参数，检查它是否是质数。

    Args:
        x (int): 判断是否为质数的整数。

    Returns:
        bool: 如果数字 `x` 是质数，返回 True，否则返回 False。
    """
    if x in [0, 1]:
        return False
    for i in range(2, x):
        if x % i == 0:
            return False
    return True

第一次优化

到此为止，我们有了一个初步的解决方案，它是可行的。我们已经讨论了一些重要的话题，如代码的样式、可读性和开发人员的文档。这些都是作为一个团队工作时需要考虑的重要事情。

但是我们仍然没有谈及解决方案的性能问题。所以，现在可能是时候了。

在这个时候，你也许应该提出，这个函数可以被改进，这样它的运行速度就会更快。现在是你展示你的所有算法知识的时候了。

之前的解决方案的时间复杂度为 O(x)，其中 x 是函数作为参数的输入整数。这可以通过以下代码优化为 O(sqrt(x))：

# sqrt.py

import math

def is_prime(x: int) -> bool:
    if x in [0, 1]:
        return False
    for i in range(2, int(math.sqrt(x)) + 1):
        if x % i == 0:
            return False
    return True

或者甚至像这样，不导入 math 库：

# sqrt.py

def is_prime(x: int) -> bool:
    if x in [0, 1]:
        return False
    i = 2
    while i**2 <= x:
        if x % i == 0:
            return False
        i += 1
    return True

两种方法对我来说都是可以的。

我在之前的实现中省略了文档字符串，是为了让实际的代码变化更加清晰。但是，如果能将函数的时间复杂度包含在文档中，对开发者来说是非常好的。你能提供的关于你的代码的信息越多，对你的团队成员和你自己来说就越好。

到目前为止，你做得很好。让我们继续吧!

第二个面试问题示例

到目前为止，我已经能够评估出你具有必要的协作能力，能够与团队一起承担简单的任务。现在，是时候让事情变得复杂一点了。

这是我要提出的第二个问题的陈述：

“给出两个整数 L 和 R，计算在区间 [L, R] 内有多少个质数。”

再说一遍，我建议讨论一下团队关于这项任务的优先级是什么。从简单的开始，逐步讨论改进初始解决方案。强调过早的优化并不是一个好的实践。

同时，讨论使用你为前一个任务实施的解决方案来解决这个任务的可能性。如果我们有一个函数可以告诉我们一个整数是否是质数，我们就可以把它用于一个范围内的每个数字。

而这是你在现实生活中必须要做的事情。通常情况下，当一个新的任务出现时，团队应该研究一下所维护的项目，看看哪些东西可以被重用，以加快实施过程的速度。如果你不这样做，你可能最终要编码重复的功能。

因此，这个任务的一个好的初步解决方案可以是这样的：

# range_primes.py

from sqrt import is_prime

def count_primes(l: int, r: int) -> int:
    primes = 0
    for i in range(l, r + 1):
        if is_prime(i):
            primes += 1
    return primes

这完全没问题，你已经表明你可以重用以前的功能来构建新的功能。就像第一个例子一样，你可能很想炫耀你的 Python 技能，把这个函数写成这样：

# range_primes.py

from sqrt import is_prime

def count_primes(l: int, r: int) -> int:
    return sum(bool(is_prime(i)) for i in range(l, r + 1))

我建议不要把这个 Pythonic 实现作为你的第一选择。留待讨论，评估代码的可读性，也许还可以分析一下性能的差异。不要忘了 docstrings！

下一节是事情变得有趣的时候。继续阅读。我们正在进行最后一步......

最难的面试问题示例

还记得我之前说过，竞争性编程网站中的约束条件很难映射到现实生活中的需求吗？

下面我将为你提出一个困难的挑战，让你确定这些约束条件，并实现你能做到的最佳解决方案：

“假设一个客户希望我们把计算一个范围内的质数的功能作为一项服务来提供。他们希望把重点放在性能上，因为他们计划经常使用这项服务。你将如何实现它？”

如果你一直在为面试练习你的算法技能，你可能已经解决了几次与此类似的问题。这里的主要区别是背景的变化。

我没有给你精确的指令、数字约束和输入或输出格式，而是给你一个更宽泛的任务描述。我在这里的目标和以前一样：让你和我互动，就好像我们是队友，从我们知道的一点信息中找出如何解决这个问题。

希望在交流了一些问题和答案之后，我们可以把之前的、比较模糊的说法翻译成更熟悉的东西：

“给出一组形式为 [L, R] 的查询，对于每个查询，回答该范围内有多少个整数是质数。”

这是有道理的，因为正如描述中所说，客户希望非常频繁地使用这项服务。

我们想把重点放在性能上。这应该是我们在实施解决方案时的主要关注点。但是，要达到一个最佳的解决方案，最好的办法还是从一个简单的解决方案开始，分析是否满足我们的性能要求，并不断地逐步改进。让我们来看看整个例子。

我们可以先用上一步实现的解决方案。它够好吗？

让我们假设，作为函数参数的最大数字范围是 [1, 10^6]。另外，现实中，让我们假设服务每分钟要回答的查询数量大约为 10^5。

我们之前的解决方案的时间复杂度为 O(sqrt(n))，以确定一个数字是否是质数。如果我们对范围内的每个数字都这样做，复杂度就会上升到 O(n * sqrt(n))。除此之外，如果我们对每个查询都这样做，我们最终会得到更高的时间复杂度 O(q * n * sqrt(n))。

把前面的变量替换为它们可能具有的最高值，你会得到这个解决方案将需要大约 10^14 次操作来回答所有的查询。假设一台计算机每秒可以进行大约 10^8 次基本操作，那么完成所有操作大约需要 10^6 秒。

注：将 10^6 秒转换为天，你会感到惊讶的 🤯。

如果目标是优先考虑我们的解决方案的性能，这个解决方案是不可行的。让我们看看如何改进它。

在这一点上，我所期望的是你利用自己通过所有在线平台的训练获得的最好经验，向我展示一个令人印象深刻的解决方案。这是展示你所有分析和算法技能的时候。

但只是现在，因为我知道你是一个团队型开发者。

最终解决方案

由于这是一次模拟面试，我很想知道你是如何有效地解决最后这个问题的。让我知道你将如何实现这个解决方案，或者在 GitHub 上分享你的代码——不要害羞。

我向你保证一件事：如果你能在真正的面试中做到这一点，可能你不知道这个问题的最佳解决方案也不会太重要。这并不意味着你不应该尽力去解决它，但请放心，你已经做得非常好了。

就是这些啦，现在我想看看你的代码。

总结

在这篇文章中，我尝试总结一些我认为在编程面试中最重要的方面。我特别强调协作部分，因为我认为大多数人都低估了这种技能的重要性。这是必须的，特别是如果你想和其他开发者在一个团队中工作。

我尝试通过一个模拟面试来引导你，我解释了在面试中我对于一个标准的编程任务将遵循的思考过程。我希望这个练习是有用的，它可以在下一次面试中帮助你（作为候选人或面试官）。

欢迎分享你对这次模拟面试的想法，让我们开始一场富有成效的讨论。

回头见！👋

资源

• 这篇文章里的代码示例在这里。
• 对于最后一个问题的提示：素数筛（Sieve of Eratosthenes）算法的实现。

👋 我是 Alberto，doWhile 的软件工程师、竞争性程序员、老师和健身爱好者。

🧡 如果你喜欢这篇文章，请考虑分享它。

🔗 All links | Twitter | LinkedIn

当你操作数据、从表单中接收数值以及以其他方式处理数据时，这些数值可能是不正确的数据类型。

假设你希望你的值是一个布尔值，要么是 true，要么是 false，但它被存储为一个字符串——"true" 或 "false"。这样一来，要想达到你的预期目的就变得很有挑战性，所以你必须首先将这些布尔字符串值转换成实际的布尔值。

在这篇文章中，你将学习如何使用 JavaScript 中的不同方法将字符串转换为布尔值。如果你着急了解，下面是操作方法：

// 使用恒等运算符
console.log((boolString === "true")); // true / false

// 使用正则
console.log((/true/).test(boolString)); // true

如果你不着急，让我们来了解每一种方法和更多的内容。

如何用恒等运算符（===）将一个字符串解析为布尔值

严格运算符是恒等运算符的另一个名字。只有当被比较的两个值是相同的时候，它才会返回 true。这意味着它们的字母大小写——以及其他一切——也必须是相同的。否则，它将返回 false。

在这种情况下，你想把一个字符串转换为布尔值，这意味着你要把它与字符串 "true " 进行比较。如果两个值相同，它将返回布尔值 true，否则，它将返回布尔值 false。

let boolString = "true"; 
let boolValue = (boolString === "true"); 
console.log(boolValue); // true

这是一个严格相等运算符，将对字母大小写进行严格比较：

let boolString = "True"; 
let boolValue = (boolString === "true"); 
console.log(boolValue); // false

你可以使用 toLowerCase() 方法来解决这个问题。它首先将字符串值转换为适合比较的字母大小写，然后再进行比较。

let boolString = "True"; 
let boolValue = (boolString.toLowerCase() === "true"); 
console.log(boolValue); // true

另一个与恒等运算符非常相似的方法是正则方法，你可以测试两个值是否匹配。

如何用正则将一个字符串解析为布尔值

Regex 正则是 Regular Expressions 的缩写。这一个庞大的编程主题，你可以用 regex 作为模式来匹配和测试字符串的字符组合。

一个非常简单的 regex 指南会告诉你，表达式要放在两个斜线（/）之间。例如，如果你想测试 "true" 字符串值，你会这样做：

let boolString = "true"; 
let boolValue = (/true/).test(boolString);
console.log(boolValue); // true

这也是区分大小写的：

let boolString = "True"; 
let boolValue = (/true/).test(boolString);
console.log(boolValue); // false

你必须在正则表达式的末尾添加 i 标志，以便进行不区分大小写的匹配。

let boolString = "True"; 
let boolValue = (/true/i).test(boolString);
console.log(boolValue); // true

如何用双 NOT 运算符（*!!*）将一个字符串解析为布尔值

你还应该知道如何使用单NOT运算符，你可以用它来反转一个结果。

当你在一个字符串前面加上 NOT 运算符时，它将返回 true 或 false。如果它是一个空字符串，它将返回 true，否则返回 false：

let stringValue1 = !'true';
let stringValue2 = !'';

console.log(stringValue1); // false
console.log(stringValue2); // true

这不是你想要的。相反，你想把一个字符串转换为布尔值，也就是说，当字符串为空时，它应该返回 false，而在其他情况下，它应该返回 true。

这时你可以使用双非逻辑运算符。你用它来反转单个 NOT 运算符的结果：

let stringValue1 = !!'true';
let stringValue2 = !!'';

console.log(stringValue1); // true
console.log(stringValue2); // false

你用这个方法将任何字符串值转换为布尔值。当它是空的，它返回 false。否则，它返回 true。

这个方法的一个缺点是，你不能把一个 "false" 的字符串转换成一个 false 的布尔值。只有当它是一个空字符串时才会返回 false。

如何用布尔封装器将一个字符串解析为布尔值

JavaScript 的布尔对象代表一个布尔值。这个方法就像双非运算符一样。

// 语法
Boolean() 

当你向布尔对象传递一个字符串值时，它将评估为 true，但当你传递一个空字符串时，它将评估为 false。

let stringValue1 = Boolean('true');
let stringValue2 = Boolean('');

console.log(stringValue1); // true
console.log(stringValue2); // false

这个方法的唯一限制是，如果你在引号之间添加空格代表字符串，它将返回 true——意味着它将其视为一个字符串。

let stringValue = Boolean(' ');

console.log(stringValue); // true

注意：当你转换一个 "false" 的字符串时，你会期望它返回一个布尔值为 false。但这将返回 true，因为它只在是空字符串时返回 false。

总结

在这篇文章中，你已经学会了如何将一个字符串值转换为布尔值。涵盖所有情况的最佳方法是恒等运算符，而布尔对象和双非运算符有更好的语法。

祝你编码愉快！

正则表达式 Regular expressions，缩写为 regex，或有时为 regexp，是你可能知道的真正强大和有用的概念之一。但它们可能令人生畏，特别是对初学的程序员来说，更是如此。

其实不一定是这样的。JavaScript 包括几个有用的方法，使正则表达式的使用更容易。在这些方法中，.match()、.matchAll() 和 .replace() 方法可能是你最经常使用的。

在本教程中，我们将介绍这些方法，并看看为什么你会使用这些方法而不是其他的 JS 方法。

对正则表达式的快速介绍

根据 MDN，正则表达式是“用于匹配字符串中字符组合的模式”。

这些模式有时可以包括特殊字符（*，+），断言（\W，^），组和范围（(abc)，[123]），以及其他使正则如此强大但难以掌握的东西。

就其核心而言，正则就是在字符串中寻找模式——从测试一个字符串的单个字符到验证一个电话号码是否有效，都可以用正则表达式完成。

如果你对正则表达式是个新手，想在继续阅读之前做一些练习，可以看看我们的交互式编码挑战。

如何使用 .match() 方法

因此，如果正则是关于在字符串中寻找模式，你可能会问自己是什么使 .match() 方法如此有用？

不像 .test() 方法只是返回 true 或者 false，.match() 将实际返回与你测试的字符串的匹配，例如：

const csLewisQuote = 'We are what we believe we are.';
const regex1 = /are/;
const regex2 = /eat/;

csLewisQuote.match(regex1); // ["are", index: 3, input: "We are what we believe we are.", groups: undefined]

csLewisQuote.match(regex2); // null

这对一些项目来说真的很有帮助，特别是当你想在不改变原始字符串的情况下提取和操作你所匹配的数据时。

如果你只想知道一个搜索模式是否被找到，请使用 .test() 方法——它要快得多。

从 .match() 方法中你可以期待两个主要的返回值：

• 如果有一个匹配，.match() 方法将返回一个包含匹配内容的数组。我们稍后会详细讨论这个问题。
• 如果没有匹配，.match() 方法将返回 null。

你可能已经注意到了这一点，但如果你看上面的例子，.match() 只匹配 “are” 这个词的第一个实例。

很多时候，你会想知道一个模式与你所测试的字符串的匹配频率，所以让我们看看如何用 .match() 来实现。

不同的匹配模式

如果有一个匹配，.match() 返回的数组有两种不同的模式，因为缺乏更好的术语。

第一种模式是不使用全局标志（g）时，例如在上面的例子中：

const csLewisQuote = 'We are what we believe we are.';
const regex = /are/;

csLewisQuote.match(regex); // ["are", index: 3, input: "We are what we believe we are.", groups: undefined]

在这种情况下，我们 .match() 一个数组，和包含第一个匹配项以及原始字符串中匹配项的索引、原始字符串本身，以及任何使用过的匹配组。

但是，假设你想看看 “are” 这个词在一个字符串中出现了多少次。要做到这一点，只需在你的正则表达式中添加全局搜索标志：

const csLewisQuote = 'We are what we believe we are.';
const regex = /are/g;

csLewisQuote.match(regex); // ["are", "are"]

你不会得到非全局模式所包含的其他信息，但你会得到一个包含你正在测试的字符串中所有匹配的数组。

大小写敏感

要记住的一件重要事情是，regex 是区分大小写的。例如，假设你想看看 “we” 这个词在你的字符串中出现了多少次：

const csLewisQuote = 'We are what we believe we are.';
const regex = /we/g;

csLewisQuote.match(regex); // ["we", "we"]

在这种情况下，你要匹配的是一个小写的 “w” 和一个小写的 “e”，而后者只出现两次。

如果你想要 “we” 这个词的所有实例，无论它是大写还是小写，你有几个选择。

首先，你可以在用 .match() 方法测试之前对字符串使用 .toLowercase() 方法：

const csLewisQuote = 'We are what we believe we are.'.toLowerCase();
const regex = /we/g;

csLewisQuote.match(regex); // ["we", "we", "we"]

或者如果你想保留原来的大小写，你可以在你的正则表达式中添加不区分大小写的搜索标志（i）：

const csLewisQuote = 'We are what we believe we are.';
const regex = /we/gi;

csLewisQuote.match(regex); // ["We", "we", "we"]

新的 .matchAll() 方法

现在你已经知道了关于 .match() 方法的所有情况，值得指出的是，最近引入了 .matchAll() 方法。

与 .match() 方法不同的是，.matchAll() 需要全局搜索标志（g），并返回一个迭代器或一个空数组：

const csLewisQuote = 'We are what we believe we are.';
const regex1 = /we/gi;
const regex2 = /eat/gi;

[...csLewisQuote.matchAll(regex1)]; 
// [
//   ["We", index: 0, input: "We are what we believe we are.", groups: undefined],
//   ["we", index: 12, input: "We are what we believe we are.", groups: undefined]
//   ["we", index: 23, input: "We are what we believe we are.", groups: undefined]
// ]

[...csLewisQuote.matchAll(regex2)]; // []

虽然它看起来只是一个更复杂的 .match() 方法，但 .matchAll() 的主要优势在于它能更好地处理捕获组。

下面是一个简单的例子：

const csLewisRepeat = "We We are are";
const repeatRegex = /(\w+)\s\1/g;

csLewisRepeat.match(repeatRegex); // ["We We", "are are"]

const csLewisRepeat = "We We are are";
const repeatRegex = /(\w+)\s\1/g;

[...repeatStr.matchAll(repeatRegex)];

// [
//   ["We We", "We", index: 0, input: "We We are are", groups: undefined],
//   ["are are", "are", index: 6, input: "We We are are", groups: undefined],
// ]

虽然这只是勉强触及表面，但请记住，如果你使用 g 标志并希望得到 .match() 为单个匹配提供的所有额外信息（索引、原始字符串等），使用 .matchAll() 可能更好。

如何使用 .replace() 方法

现在你知道了如何在字符串中匹配模式，你可能想对这些匹配做一些有用的事情。

一旦你找到一个匹配的模式，你最常做的事情之一就是用其他东西替换该模式。例如，你可能想把 “paidCodeCamp” 中的 “paid” 替换成 “free”。Regex 将是一个很好的方法来实现这一点。

由于 .match() 和 .matchAll() 返回每个匹配模式的索引信息，取决于你如何使用它，你可以用它来做一些花哨的字符串操作。但是有一个更简单的方法——通过使用 .replace() 方法。

使用 .replace()，你所需要做的就是把你想匹配的字符串或正则表达式作为第一个参数传给它，把要替换的字符串作为第二个参数：

const campString = 'paidCodeCamp';
const fCCString1 = campString.replace('paid', 'free');
const fCCString2 = campString.replace(/paid/, 'free');

console.log(campString); // "paidCodeCamp"
console.log(fCCString1); // "freeCodeCamp"
console.log(fCCString2); // "freeCodeCamp"

最重要的是，.replace() 返回一个新的字符串，而原来的则保持不变。

与 .match() 方法类似，.replace() 只会替换它找到的第一个匹配模式，除非你使用带有 g 标志的 regex：

const campString = 'paidCodeCamp is awesome. You should check out paidCodeCamp.';
const fCCString1 = campString.replace('paid', 'free');
const fCCString2 = campString.replace(/paid/g, 'free');

console.log(fCCString1); // "freeCodeCamp is awesome. You should check out paidCodeCamp."
console.log(fCCString2); // "freeCodeCamp is awesome. You should check out freeCodeCamp."

与之前类似，无论你传递的是字符串还是正则表达式作为第一个参数，都要记住匹配模式是区分大小写的：

const campString = 'PaidCodeCamp is awesome. You should check out PaidCodeCamp.';
const fCCString1 = campString.replace('Paid', 'free');
const fCCString2 = campString.replace(/paid/gi, 'free');

console.log(fCCString1); // "freeCodeCamp is awesome. You should check out PaidCodeCamp."
console.log(fCCString2); // "freeCodeCamp is awesome. You should check out freeCodeCamp."

如何使用 .replaceAll() 方法

就像 .match() 有一个更新的 .matchAll() 方法一样，.replace() 也有一个更新的 .replaceAll() 方法。

.replace() 和 .replaceAll() 之间唯一真正的区别是，如果你用 .replaceAll() 使用正则表达式，你需要使用全局搜索标志：

const campString = 'paidCodeCamp is awesome. You should check out paidCodeCamp.';
const fCCString1 = campString.replaceAll('paid', 'free');
const fCCString2 = campString.replaceAll(/paid/g, 'free');

console.log(fCCString1); // "freeCodeCamp is awesome. You should check out freeCodeCamp."
console.log(fCCString2); // "freeCodeCamp is awesome. You should check out freeCodeCamp."

.replaceAll() 的真正好处是它的可读性更强一些，当你把一个字符串作为第一个参数传给它时，它将替换所有匹配的模式。

现在你知道了用 regex 和一些内置的 JS 方法匹配和替换部分字符串的基本知识。这些都是非常简单的例子，但我希望它仍然显示了即使是一点点的 regex 也可以是多么强大。

这对你有帮助吗？你是如何使用 .match()、.matchAll()、.replace() 和 .replaceAll() 方法的？请在 Twitter 上告诉我。

在这篇文章中，你将通过一些代码实例学习如何在 Python 中使用 range() 函数。

Python 中的 range() 函数是什么？range() 函数语法详解

Python 内置的 range() 函数主要在处理 for 循环时使用——你可以用它来循环某些代码块指定次数。

range() 函数接受三个参数——一个是必需的，两个是可选的。

默认情况下，range() 函数的语法就像下面这样：

range(stop)

stop 参数是必需的。

range() 函数返回一个从 0 开始、增量为 1、以你指定的 stop 为结束值的数字序列（不包括结束值）。

但是如果你想遍历你指定的两个数字的范围，而不想从 0 开始计数，怎么办？

你可以传递第二个可选的起始值，start，来指定起始数字。语法是这样的：

range(start, stop)

这种语法在起始值（包括）和结束值（不包括）的基础上生成一个数字序列，以 1 为增量递增。

最后，如果你不希望默认的增量是 1，你可以指定第三个可选的参数，即步长 step。语法是这样的：

range(start, stop, step)

这种语法产生一个数字序列，从 start（包括）开始计数，并根据 step 递增，直到到达 stop（不包括）。

如何使用只有 stop 参数的 range() 函数

当在 range() 中只使用 stop 参数时，计数从 0 开始，按 1 递增，当达到你指定的 stop 值时计数停止。

请记住，你指定的结束值并不包括在内！

如果你指定的 stop 参数是 5，那么范围包括 0-4，而不是 0-5——计数将停止在 4 而不是 5。

让我们看看下面的例子：

for num in range(5):
    print(num)
    
# output 

# 0
# 1
# 2
# 3
# 4

在这个例子中，我指定了一个 range(5)。

该函数从 0 开始计数，每次迭代都递增 1，最后结束于 4。

如何使用带有 start 和 stop 参数的 range() 函数

如果你想有一个两个数字的范围，你可以使用两个参数——start 和 stop。请记住，起始值是包括在内的，而结束值则不是。

如果你想要一个从 5（含）到 10（含）的数值范围，你可以这样写一个 range(5,11)：

for num in range(5,11):
  print(num)
  
# output

# 5
# 6
# 7
# 8
# 9
# 10

你也可以向 range() 传递负的整数值：

for num in range(-5, 1):
  print(num)

# output

# -5
# -4
# -3
# -2
# -1
# 0

这里需要注意的是，你不能向 range() 传递浮点值。

在这个例子中，当我传递两个浮点数作为参数时，会出现错误：

for num in range(5.2, 4.3):
  print(num)

# output

# Traceback (most recent call last):
#  File "main.py", line 1, in <module>
#    for num in range(5.2, 4.3):
# TypeError: 'float' object cannot be interpreted as an integer

你可以传递负整数或正整数作为 start 和 stop 参数。

如何使用带有 start、stop 和 step 参数的 range() 函数

默认情况下，增量值是 1，并且没有指定。也就是说，你可以通过向 range() 函数传递一个 step 参数来改变它。

让我们看看下面的例子：

for num in range(10,21,2):
  print(num)
  
# output

# 10
# 12
# 14
# 16
# 18
# 20

在上面的例子中，我生成了一个从 10 到 20 的数字序列，并将递增量设置为 2，我通过指定 step 值为 2 来实现这一点。

需要注意的是，step 可以是一个负数或正数，但不能是 0。

下面是你如何生成一个带有负数 step 参数的范围：

for num in range(20, 11, -2):
  print(num)

# output

# 20
# 18
# 16
# 14
# 12

上面的代码生成了一个反向的数字序列。

再看看当 step 为 0 时发生了什么：

for num in range(10, 21 0):
  print(num)

# output

#  File "main.py", line 1
#    for num in range(10, 21 0):
                            ^
# SyntaxError: invalid syntax

如何使用 range() 函数创建一个数字列表

你可以通过将 range() 函数作为参数传递给 list() 构造函数来创建一个数字列表，就像这样：

my_numbers_list = list(range(5))

print(my_numbers_list)

# output

# [0, 1, 2, 3, 4]

在上面的例子中，我创建了一个从 0 到 4 的数字列表。

如何在 Python 中使用 len() 函数和 range()

假设你有一个项目的列表，想根据列表的长度对这些项目做一些处理。

为此，你可以使用 range() 并将列表的长度作为参数传给函数。

要计算一个列表的长度，可以使用 len() 函数。

programming_languages = ["Python", "JavaScript", "Java", "C++"]

programming_languages_length = len(programming_languages)

for languages in range(programming_languages_length):
  print("Hello World")
  
# output

# Hello World
# Hello World
# Hello World
# Hello World

总结

你现在知道如何在 Python 中使用 range() 函数了。

要学习更多关于 Python 的知识，请查看 freeCodeCamp 的 Python 入门课程。

感谢阅读，happy coding！

当与团队一起做一个项目或你自己做一个项目时，通过版本控制来跟踪代码库的变化是很重要的。

Git 为你提供了不同的命令来跟踪文件变化。这些命令将使你能够与其他开发人员协作、访问文件历史、管理代码，等等。

在这篇文章中，你将学习如何恢复和重置一个文件或提交到之前的提交。

我们将使用一些简单的 HTML 代码来演示如何使用 Git 恢复和重置到之前的提交。

让我们开始吧！

如何重置一个文件或提交

在本节中，你将学习如何使用以下命令来恢复/重置一个文件或提交：

• git revert
• git reset

如何使用 git revert 命令恢复文件或提交

下面是 git revert 命令的语法：

git revert [commit ID]

下面是我们将使用的代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

让我们假设上面的文件是每个在项目上工作的开发人员的代码库的当前状态。

我们将对该文件做一些修改，然后添加、提交和推送这些修改，即：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>
    <h1>Hello World!</h1>

    <ul>
        <li>Red</li>
        <li>Yellow</li>
        <li>Orange</li>
    </ul>
    
  </body>
</html>

我们已经在代码中添加了一个颜色列表。让我们用下面的命令推送这些变化：

git add .
git commit -m "added colors to the HTML file"
git push -u origin main

现在，新的变化已经为在特定代码分支上工作的所有人更新了。

但如果添加的颜色是应该在未来为用户发布的功能的一部分呢？你提前发布了这个功能，就犯了一个错误。

要恢复到之前的提交，你需要那个特定提交的 ID。要得到提交 ID，请执行下面的命令：

git log

该命令会显示每个提交的 ID、作者和日期。它应该是这样的：

在我们的例子中，提交 ID 是 785dd5a6dd0f1ebd9e06045df787d8d28fd38285。

所以，要重置文件，就用 git revert [commit ID]，即：

git revert 785dd5a6dd0f1ebd9e06045df787d8d28fd38285

上面的命令将重置某个特定提交之前对文件所做的所有修改。下面是现在的 HTML 文件：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

现在你可以推送这个新状态了。

请注意，git revert 命令并不从远程仓库中删除被恢复的提交。相反，它为被恢复的改动创建一个新的提交。

这意味着你将拥有被恢复的提交的历史和包含被恢复的修改的文件的新提交。

如何使用 git reset 命令重置文件或提交

git reset 命令也可以用来恢复修改。请看下面的提交历史：

上面的图片显示了所有的提交历史——从第一次提交到最后一节的还原提交。

如果我们用 git reset [commit ID] 来还原某个特定的提交，之后的其他提交都会从提交历史中被删除。

下面是一个例子：

git reset c1e4962a9b355f023c250609cfa9303a67b3063e

使用第一次提交的提交 ID，我们回到了第一次提交的状态。

运行 git log 命令，你会有一个这样的提交历史：

虽然你已经成功地恢复到了第一次提交，但代码中其他提交的历史却被抹去了。这在与其他开发者合作时，会产生非常负面的影响。

摘要

在这篇文章中，我们谈到了两个重要的 Git 命令，即 git revert 和 git reset，用于撤销 Git 仓库中的修改。

这两个命令都能让你回到代码库中之前的指定状态，但后果不同。

git revert 命令会恢复到指定的提交，但会保留代码库中其他所有提交的历史，并为恢复的改动创建一个新的提交。这是一种在与他人合作时撤销修改的更有效的方式。

另外，git reset 命令会恢复到指定的提交，然后删除指定提交之后的所有提交。

为了安全起见，在撤销有其他开发者工作的 repo 中的修改时，请使用 git revert。

你可以在撤销修改后想完全删除提交的情况下使用 git reset。

Happy coding!

在 JavaScript 编程中，我们都习惯于创建和处理一维数组。这些数组中包含具有类似的数据类型或多种数据类型的元素。

但是我们也可以了解一下 JS 中的二维数组。

在这篇文章中，你将了解什么是二维数组以及它们在 JavaScript 中是如何运行的。它与其他编程语言有很大的不同，因为从技术上讲，JavaScript 中没有二维数组。

什么是二维数组

二维数组是一个数据元素的集合，以行和列的网格状结构排列。数组中的每个元素都被称为单元，可以通过其行和列的索引进行访问。

[ a1, a2, a3, ..., an,
  b1, b2, b3, ..., bn,
  c1, c2, c3, ..., cn,
  .
  .
  .
  z1, z2, z3, ..., zn ]

在 JavaScript 中，没有像其他常用的编程语言如 C、C++ 和 Java 那样直接创建二维数组的语法。

你可以通过一个数组的数组在 JavaScript 中创建二维数组，像下面这样：

let twoDimensionalArr = [ [ a1, a2, a3, ..., an ],
[ b1, b2, b3, ..., bn ],
[ c1, c2, c3, ..., cn ],
.
.
.
[ z1, z2, z3, ..., zn ] ];

但是有一个限制。需要注意的是，二维数组有一个固定的大小。这意味着，一旦它们被创建，行和列的数量应该是固定的。而且，每一行应该有类似数量的元素（列）。

例如，下面的数组有三行和四个元素：

let myArray = [
[0, 1, 2, 3], 
[4, 5, 6, 7],
[8, 9, 0, 0]
];

其局限性在于，对于锯齿形数组，你不能指定固定的行和列。这意味着一个锯齿形数组可以有 m 行，每行有不同数量的元素。

let myArray = [
[0, 1, 2, 3], 
[4, 5, 6, 7],
[8, 9]
];

为什么要在 JavaScript 中使用二维数组

说到这里，你可能会问自己二维数组的重要性，特别是如果这是你第一次阅读关于二维数组的文章。

在 JavaScript 中，我们使用二维数组，也称为矩阵，以一种结构化和有组织的方式来存储和处理数据。

• 它们允许有效地存储和操作大量的数据，例如在图像或视频处理、科学模拟和电子表格应用中。
• 二维数组还可以使用矩阵运算，如矩阵乘法和转置，这可以简化复杂的计算，使代码更易读。
• 二维数组可以表示线性代数中的数学矩阵和广泛的数据，如图形、地图和表格。
• 二维数组常用于涉及数据表、图像处理和游戏开发的应用中。

如何访问 JavaScript 二维数组中的元素

在学习如何在 JavaScript 中创建二维数组之前，我们首先要学习如何访问二维数组中的元素。

你可以使用两个索引来访问二维数组中的元素，一个是行的索引，一个是列的索引。假设你有下面这个二维数组：

let MathScore = [
    ['John Doe', 20, 60, 'A'],
    ['Jane Doe', 10, 52, 'B'],
    ['Petr Chess', 5, 24, 'F'],
    ['Ling Jess', 28, 43, 'A'],
    ['Ben Liard', 16, 51, 'B']
];

上面是一个锯齿状的数组，其中每个元素都保存着学生的姓名、测试分数、考试分数和等级。你可以使用行和列的索引来访问特定的元素，如下面的语法：

arrayName[rowIndex][columnIndex]

为了更好地理解这一点，让我们使用 console.table(arrayName) 将上面的二维数组转换为表格。

注意：确保用你的二维数组的名称替换 arrayName。在我的例子中，它是 MathScore。

你会得到这样的输出，显示行和列的索引。记住，数组是零索引的，也就是说，项目的索引是从 0 开始的，而不是 1。

请注意，(index) 列和行是为了表示内部数组的索引。

你使用两个方括号来访问二维或多维数组的一个元素。第一个是访问行，第二个是访问指定行中的元素。

console.log(MathScore[4][0]); // returns 'Ben Liard'
console.log(MathScore[2][1]); // returns 5
console.log(MathScore[1][3]); // returns 'B'
console.log(MathScore[2][2]); // returns 24

如何访问一个二维数组的第一个和最后一个元素

有时你可能需要找到一个二维数组的第一个和最后一个元素。你可以使用行和列的第一个和最后一个索引来完成这个任务。

第一个元素的行和列的索引总是 0，这意味着你将使用 arrayName[0][0],。

然而，最后一个元素的索引可能不容易确定。例如，在上面的例子中，第一个元素是 “John Doe”，而最后一个是 “B”：

console.log(MathScore[0][0]); // returns 'John Doe'
console.log(MathScore[MathScore.length-1][(MathScore[MathScore.length -1]).length - 1]); // returns 'B'

如何将一个二维数组的所有元素相加

在某些情况下，你的二维数组的所有元素可能都是数字，你可能需要将它们相加。你可以用一个嵌套的循环来做这件事。你将首先遍历各行，然后，对于每一行，你遍历其元素。

let numberArr = [
  [10, 20, 60],
  [8, 10, 52],
  [15, 5, 24],
  [26, 28, 43],
  [12, 16, 51]
];

var sum = 0;
numberArr.forEach((row) => {
  row.forEach((element) => {
    sum += element;
  });
});
console.log("The sum of all elements in the array is:" + sum); // returns "The sum of all elements in the array is: 380"

如何在 JavaScript 中操作二维数组

你可以像操作一维数组一样使用一般的数组方法来操作二维数组，比如 pop、push、splice 等等。

让我们先来学习如何在二维数组中添加/插入一个新的行和元素。

如何在二维数组中插入一个元素

你可以用 push() 和 unshift() 方法向二维数组中添加一个或许多元素。

push() 方法将元素添加到二维数组的结尾，而 unshift() 方法将元素添加到二维数组的开头。

let MathScore = [
  ["John Doe", 20, 60, "A"],
  ["Jane Doe", 10, 52, "B"],
  ["Petr Chess", 5, 24, "F"],
  ["Ling Jess", 28, 43, "A"],
  ["Ben Liard", 16, 51, "B"]
];

MathScore.push(["Tom Right", 30, 32, "B"]);

MathScore.unshift(["Alice George", 28, 62, "A"]);

当你 console.log() 或 console.table() 数组时，你会看到新的行已经被添加：

[
  ["Alice George", 28, 62, "A"],
  ["John Doe", 20, 60, "A"],
  ["Jane Doe", 10, 52, "B"],
  ["Petr Chess", 5, 24, "F"],
  ["Ling Jess", 28, 43, "A"],
  ["Ben Liard", 16, 51, "B"],
  ["Tom Right", 30, 32, "B"]
]

你也可以向内层数组添加元素，但是只向一个内层数组推送而不影响所有数组元素的做法是错误的。这是因为二维数组的每个元素数组应该拥有相同数量的元素。

MathScore[0].push("B");

你可以一次性向所有元素数组添加元素，而不是只影响一个数组元素：

let MathScore = [
  ["John Doe", 20, 60, "A"],
  ["Jane Doe", 10, 52, "B"],
  ["Petr Chess", 5, 24, "F"],
  ["Ling Jess", 28, 43, "A"],
  ["Ben Liard", 16, 51, "B"]
];

MathScore.forEach((score) => {
  let totalScore = score[1] + score[2];
  score.push(totalScore);
});

console.log(MathScore);

这将返回：

[
  ["John Doe", 20, 60, "A", 80],
  ["Jane Doe", 10, 52, "B", 62],
  ["Petr Chess", 5, 24, "F", 29],
  ["Ling Jess", 28, 43, "A", 71],
  ["Ben Liard", 16, 51, "B", 67]
]

你也可以使用 unshift() 方法在开头插入元素，使用 splice() 方法在数组的中间插入：

let MathScore = [
  ["John Doe", 20, 60, "A"],
  ["Jane Doe", 10, 52, "B"],
  ["Petr Chess", 5, 24, "F"],
  ["Ling Jess", 28, 43, "A"],
  ["Ben Liard", 16, 51, "B"]
];

MathScore.splice(2, 0, ["Alice George", 28, 62, "A"]);

在上面，1 是你想让新数组插入的位置（记住它是零索引的），使用 0，所以它没有删除任何元素，然后第三个参数是要添加的数组。

这就是输出结果：

[
  ["John Doe", 20, 60, "A"],
  ["Jane Doe", 10, 52, "B"],
  ["Alice George", 28, 62, "A"],
  ["Petr Chess", 5, 24, "F"],
  ["Ling Jess", 28, 43, "A"],
  ["Ben Liard", 16, 51, "B"]
]

如何从二维数组中删除一个元素

你也可以用 pop() 和 shift() 方法从一个二维数组的开头和结尾处移除元素。这与 push() 和 unshift() 方法的工作原理类似，但这次你不需要向这些方法添加任何参数。

let MathScore = [
  ["John Doe", 20, 60, "A"],
  ["Jane Doe", 10, 52, "B"],
  ["Petr Chess", 5, 24, "F"],
  ["Ling Jess", 28, 43, "A"],
  ["Ben Liard", 16, 51, "B"]
];

MathScore.pop();

MathScore.shift();

当你 console.log() 或 console.table() 数组时，你会看到第一个和最后一个数组元素已经被移除：

[
  ["Jane Doe", 10, 52, "B"],
  ["Petr Chess", 5, 24, "F"],
  ["Ling Jess", 28, 43, "A"],
]

你也可以从每个数组元素中移除元素：

let MathScore = [
  ["John Doe", 20, 60, "A"],
  ["Jane Doe", 10, 52, "B"],
  ["Petr Chess", 5, 24, "F"],
  ["Ling Jess", 28, 43, "A"],
  ["Ben Liard", 16, 51, "B"]
];

MathScore.forEach((score) => {
  score.pop();
});

console.log(MathScore);

这将返回：

[
  ["John Doe", 20, 60],
  ["Jane Doe", 10, 52],
  ["Petr Chess", 5, 24],
  ["Ling Jess", 28, 43],
  ["Ben Liard", 16, 51]
]

你也可以使用 shift() 方法来移除开头的元素，使用 splice() 方法来移除特定位置上的数组元素：

let MathScore = [
  ["John Doe", 20, 60, "A"],
  ["Jane Doe", 10, 52, "B"],
  ["Petr Chess", 5, 24, "F"],
  ["Ling Jess", 28, 43, "A"],
  ["Ben Liard", 16, 51, "B"]
];

MathScore.splice(2, 1);

在上面的代码中，你从 MathScore 二维数组的索引 2 的位置删除了一个项目。这将输出：

[
  ["John Doe", 20, 60, "A"],
  ["Jane Doe", 10, 52, "B"],
  ["Ling Jess", 28, 43, "A"],
  ["Ben Liard", 16, 51, "B"]
]

注意：所有的 JavaScript 数组方法都会对二维数组进行操作，因为它是一个数组的数组。你只有在调整元素数组中的单个元素时才需要注意。你通过遍历对所有元素进行类似的改变，尽管 JavaScript 中的二维数组并不严格。

如何在 JavaScript 中创建二维数组

创建一个多维数组有两种选择。你可以用数组字面量表示法手动创建数组，它使用方括号 [] 来包裹一个用逗号分隔的元素列表。你也可以使用一个嵌套的循环。

如何使用数组字面量表示法创建一个二维数组

这就像我们一直在考虑的例子一样，使用下面的语法：

let arrayName = [
[ elements ],
[ elements ],
[ elements ], ... ];

例如，下面是一个二维数组，保存了每个学生的数学分数和等级的信息：

let MathScore = [
  ["John Doe", 20, 60, "A"],
  ["Jane Doe", 10, 52, "B"],
  ["Petr Chess", 5, 24, "F"],
  ["Ling Jess", 28, 43, "A"],
  ["Ben Liard", 16, 51, "B"]
];

如何使用嵌套 for 循环创建一个二维数组

有很多方法可以做到这一点。但一般来说，你要创建一个嵌套循环，第一个循环将遍历行，而第二个循环将遍历内部数组（列）中的元素：

let arr = [];
let rows = 4;
let columns = 3;

// creating two-dimensional array
for (let i = 0; i < rows; i++) {
  arr[i] = [];
  for (let j = 0; j < columns; j++) {
    arr[i][j] = j;
  }
}

console.log(arr);

在这个例子中，j 的索引被使用并将输出：

[
  [0, 1, 2],
  [0, 1, 2],
  [0, 1, 2],
  [0, 1, 2]
]

你可以决定创建一个数字，初始化为 0，然后随着遍历增加，这样你就不会对所有元素都有相同的数字：

let arr = [];
let rows = 4;
let columns = 3;

let value = 0;
// creating two-dimensional array
for (let i = 0; i < rows; i++) {
  arr[i] = [];
  for (let j = 0; j < columns; j++) {
    arr[i][j] = value++;
  }
}

console.log(arr);

这将返回：

[
  [0, 1, 2],
  [3, 4, 5],
  [6, 7, 8],
  [9, 10, 11]
]

你也可以决定创建一个接受这些值作为参数的函数：

const create2Darr = (rows, columns) => {
  let arr = [];
  let value = 0;

  // creating two-dimensional array
  for (let i = 0; i < rows; i++) {
    arr[i] = [];
    for (let j = 0; j < columns; j++) {
      arr[i][j] = value++;
    }
  }
  console.log(arr);
};

let rows = 4;
let columns = 3;
create2Darr(rows, columns);

如何在 JavaScript 中更新二维数组中的元素

这与你处理一维数组的方式非常相似，你可以通过使用索引分配另一个值，来更新一个数组的值。

let array = [1, 2, 3];
array[1] = 5;

console.log(array); // returns [1, 5, 3]

你可以用同样的方法来改变整个行，甚至单个元素：

let MathScore = [
  ["John Doe", 20, 60, "A"],
  ["Jane Doe", 10, 52, "B"],
  ["Petr Chess", 5, 24, "F"],
  ["Ling Jess", 28, 43, "A"],
  ["Ben Liard", 16, 51, "B"]
];

MathScore[1] = ["Alice George", 28, 62, "A"];
console.log(MathScore);

这将用这个新的数组替换索引 1 的值：

[
  ["John Doe", 20, 60, "A"],
  ["Alice George", 28, 62, "A"],
  ["Petr Chess", 5, 24, "F"],
  ["Ling Jess", 28, 43, "A"],
  ["Ben Liard", 16, 51, "B"]
]

你可以通过跟踪行和列的索引并更新它们的值来更新单个元素：

let MathScore = [
  ["John Doe", 20, 60, "A"],
  ["Jane Doe", 10, 52, "B"],
  ["Petr Chess", 5, 24, "F"],
  ["Ling Jess", 28, 43, "A"],
  ["Ben Liard", 16, 51, "B"]
];

MathScore[2][0] = "Jack Jim";
console.log(MathScore);

这将把索引为 2 的那一行的名字改为 “Jack Jim”，如下图所示：

[
  ["John Doe", 20, 60, "A"],
  ["Jane Doe", 10, 52, "B"],
  ["Jack Jim", 5, 24, "F"],
  ["Ling Jess", 28, 43, "A"],
  ["Ben Liard", 16, 51, "B"]
]

总结

在这篇文章中，你了解了什么是二维数组，以及它们在 JavaScript 中是如何运行的。

重要的是要知道，二维数组在 JavaScript 中的运行方式与一维数组非常相似，所以请放心使用 JavaScript 方法来调整和操作它们。

祝你编码愉快！

你可以访问我的网站以阅读我的 150 多篇文章。你也可以使用搜索栏来查看我是否写过特定的文章。

全栈工程师在过去十年中越来越受欢迎，是科技就业市场上最受欢迎的职位之一。

但究竟什么是全栈工程师？他们每天都在做什么？你如何才能成为一名全栈工程师呢？

在这篇文章中，我将介绍全栈的定义，并涵盖全栈工程师所从事的一些工作。我还会提到一些你成为一名全栈工程师需要学习的技能。

什么是全栈工程师

现代 web 应用由两层组成：前端和后端。

前端，也被称为客户端，由内容、内容的展示和布局以及互动性元素组成。它包括用户在屏幕上看到的并可以与之互动的所有可见部分。

后端，也被称为服务器端，包括一个运行代码的服务器，它有必要的逻辑来接收、处理以及加工请求，还有一个用于安全地存储用户数据的数据库。它包括用户不直接知道的所有幕后过程。

栈是技术的集合，指的是软件、工具、编程语言、框架和数据存储技术的组合，它们共同构建和运行 web 应用。

有许多技术栈。最流行的 JavaScript 语言的栈之一是 MERN，它代表 MongoDB、Express、React 和 NodeJs。

MongoDB 是一个文档数据库，Express 是 Node.js 的后端 web 应用框架，React 是一个前端 JavaScript 库，NodeJS 是一个后端 JavaScript 运行环境。

全栈工程师是指知道如何从头到尾构建一个 web 应用的工程师，包括前端部分、后端部分和它所处的基础设施。他们处理整个技术栈，了解其中的每一部分。

全栈工程师的任务和职责

全栈工程师致力于解决一系列广泛的问题，通常对项目有端到端的所有权——从概念化到部署。

一些日常职责可能包括：

• 通过与客户和利益相关者的沟通来收集项目需求，了解软件产品的愿景。
• 集思广益，与设计团队合作，在将设计原型编码成产品之前审查设计原型。
• 解决应用程序面向客户端的 HTML、CSS 和 JavaScript 问题，并处理应用程序内使用的前端框架。
• 确保 web 应用对终端用户的响应，应用能在大多数设备上运行。
• 遵循可访问性的最佳实践。
• 管理和维护数据库和服务器，以确保客户端高效和优化地工作。
• 确保应用程序的安全性、维护、性能、正常运行时间和可扩展性。
• 监控软件并编写测试，以确保代码按预期运行。寻找并修复代码中的错误，以优化软件。
• 编写干净的、设计良好的、高效的代码，遵守行业最佳实践。
• 跟进新的技术进展，以改善业务需求。
• 创建一个最小可行产品，向利益相关者展示并与决策者沟通。
• 在收集反馈意见后实施新功能。
• 审查其他工程师编写的代码，并提供建设性的反馈。
• 阅读和编写概述软件开发过程的文档。

任务和责任将取决于公司的规模。

例如，一个小公司可能只有一个处理整个应用程序的全栈开发人员。一个较大的公司可能有前端和后端开发人员，他们在自己的领域和专业知识范围内从事具体的工作。

全栈工程师的平均薪资是多少

软件工程师，包括全栈工程师，一般都有不错的薪水。

根据美国劳工统计局的数据，软件工程师的年薪中位数为 109,020 美元。

具体到全栈工程师，Glassdoor 列出的平均工资约为每年 120,300 美元。

Indeed 列出的平均工资为 120,749 美元。而 Stack Overflow 的开发者调查显示，全栈开发者的平均工资为 14 万美元。

请注意，这些数据是面向在美国的全栈工程师统计的。报酬是多少将取决于你的位置和经验年限。

搜索一下你所在地区与你有相同经验的软件工程师的平均工资，以帮助你更好地了解。

如何成为一名全栈工程师——全栈工程师所需的技能

在下面的章节中，我将介绍成为全栈工程师所需学习的一些技术。

成为全栈工程师需要时间，你不可能成为所有工具和技术的专家——更多的是要对技术有全面的了解，并充分理解使用代码解决问题。

学习互联网和 web 基础知识

作为一名全栈工程师，了解互联网的工作原理并熟悉一些网络术语，如 DNS 和 IP 地址，会让你受益匪浅。

要了解更多关于 DNS、IP 地址以及互联网如何运行的信息，请查看以下资源：

• 网络是如何运作的：web 开发新手入门手册
• 网络是如何工作第二部分：客户端-服务器模型和 web 应用程序的结构
• 什么是 DNS？域名系统、DNS 服务器和 IP 地址的概念解释

你还需要知道 HTTP（超文本传输协议），这是万维网的基础，因为它管理着客户（如 web 浏览器）和服务器之间的通信。

具体而言，你需要了解 HTTP 请求方法（如 GET、POST、PUT、PATCH 和 DELETE）和 HTTP 响应代码（如 200、404 和 500）。

要了解更多关于 HTTP 的信息，请查看以下资源：

• 什么是 HTTP？入门协议概述
• HTTP 是如何工作的，为什么它很重要
• 掌握 HTTP 网络协议
• HTTP 请求方法——用代码实例解释 Get、Put 和 Post

学习前端 web 开发基础知识

只有三种前端 web 语言在所有现代网络浏览器中运行： HTML、CSS 和 JavaScript。

HTML（超文本标记语言的简称）定义了网页的结构和内容，如文本、链接、表单、图像、视频等。

要学习 HTML，请查看这个课程。

CSS（层叠样式表的简称）对 HTML 内容设计样式，并使其具有美感——它决定了网页的外观和感觉。

CSS 负责确定页面上元素的大小、显示、布局和呈现。CSS 还负责使网页在所有屏幕尺寸上都能使用。

要了解更多关于 CSS 的信息，请查看这个课程，其中包括 Flexbox 和 Grid——两个重要的 CSS 主题。当你了解了基础知识，你可以学习一个 CSS 框架，如 Tailwind CSS。

JavaScript 是一种动态脚本编程语言，用于在浏览器中运行。

它是唯一可以用于前端 web 开发的编程语言，是 web 开发的重要组成部分。它与 HTML 和 CSS 一起被用来创建交互式网页。

要了解更多关于 JavaScript 的信息，请查看这个课程。

学习 Git 和 GitHub

Git 和 GitHub 是开发工作流程的核心部分，是每个软件开发工作中使用的工具。

Git 是一个分布式的版本控制系统，它提供了一种方法来对你的项目进行修改、备份这些修改、跟踪它们，甚至在需要时回溯到它们。它还可以让你在同一时间与其他团队成员协作。

GitHub 是一个在线托管服务，让你更容易使用 Git，是你和你的团队上传和审查代码的地方。

要了解更多关于 Git 和 GitHub 的信息，请查看这个课程。

学习一个前端库和框架

当你理解了 JavaScript 的核心概念，你就可以继续学习 JavaScript 的前端库和框架之一。

前端库是预先写好的可重复使用的代码，包含各种函数、方法或对象，你可以在你的 JavaScript 项目中使用，以执行任务和实现特定功能。而 web 框架是一种工具，可以使创建 web 应用更容易、更快速。

根据 2022 年 Stack Overflow 调查，最受欢迎和最常用的 JavaScript 库是 ReactJS。

要了解更多关于 ReactJS 的信息，请查看这个课程。

还有其他框架你可以使用和考虑学习，如 Vue、Angular 和 Svelte。每个框架都有其组织和编写代码的方式，以及其自身的优势和局限性。

在学习这些工具之前，请确保你有一个坚实的 JavaScript 基础。

学习后端 web 开发

作为全栈 web 开发人员，你需要了解前端技术和后端工具，所以你还需要能够使用服务器端的脚本编程语言。

有很多可供选择的语言，如 Python、Ruby 和 Java，仅举几例。

尽管 JavaScript 被广泛用于前端开发，近年来，因为 NodeJS，它也被用于后端网络开发。

NodeJS 是一个提供后端功能的 JavaScript 运行时，旨在建立动态可扩展的 web 应用。

首先，学习如何使用 NPM，这是一个 Node 包管理器，用于安装和管理 JavaScript 包的本地依赖。它是专门为与 NodeJS 一起使用而设计的。

要学习 NodeJS 的基础知识，请查看这个课程。

你可以将 NodeJS 与 ExpressJS 服务器端 web 框架结合，创建全栈 web 应用。要学习使用 NodeJS 和 ExpressJS 的后端开发，请查看这个课程。

学习数据库管理系统和 SQL

作为一名全栈工程师，你将与数据库打交道，因为你所开发的大多数 web 应用都有一个数据库。你将花很多时间编写数据库查询，以获取你需要的数据。

数据库是一个存储容器——一个存储项目中所有数据的地方，如用户数据。

有两种主要的数据库类型：

• SQL 或关系型数据库，也被称为 SQL 数据库，它以结构化的、有组织的、表格的形式存储数据。
• 非关系型或 NoSQL 数据库，它们不以表格形式存储数据。

一个数据库有一个叫作数据库管理系统（DBMS）的程序，它作为数据库之间的接口，允许用户或程序来检索、更新和管理数据。

要了解关系型数据库，请查看 freeCodeCamp 的关系数据库课程。

为了与关系型数据库通信并操作存储的数据，你要使用查询语言，如 SQL（结构化查询语言的简称）来查询它们。要了解更多关于 SQL 的信息，请查看这个资源。

如果你想开始使用 NoSQL 数据库管理系统，MongoDB 是一个不错的开始。要开始使用 MongoDB，请查看这些课程。

总结

希望这篇文章能帮助你更好地了解全栈工程师的工作。

在这篇文章中，我们介绍了全栈工程的定义，并涵盖了全栈工程师所从事的一些工作。

我们还介绍了一些你成为全栈工程师需要知道的工具和语言。

感谢你阅读本文！

统一资源定位符 URL（Uniform Resource Locator）引导你进入互联网上的一个页面或文件。URL 是互联网上事物的地址。

所有有效的 URL 都遵循某些模式。因此，如果你知道这些模式，你就可以在你的程序中确定一个 URL 是否有效，并给出反馈、抛出一个错误，等等。

在本教程中，你将学习三种方法来检查 JavaScript 中的一个字符串是否是有效的 URL。

• 如何使用 URL 构造器来验证 URL
• 如何使用 npm 包来验证 URL
• 如何使用 Regex 来验证 URL

如何使用 URL 构造函数来验证 URL

当你传递一个字符串给 URL 构造函数时，如果字符串是一个有效的 URL，它将返回一个新的 URL 对象。否则，它将返回一个错误。

const fccUrl = new URL("https://www.freecodecamp.org/");
console.log(fccUrl);

以下是你在控制台记录 fccUrl 时得到的信息：

这个对象意味着你传递给 URL 构造函数的字符串是一个有效的 URL。

现在让我们看看当你传递一个无效的 URL 字符串时，你会得到什么：

const fccUrl = new URL('freecodecamp');
console.log(fccUrl);

字符串 'freecodecamp' 不是一个有效的 URL。因此，你将得到错误 TypeError：

回顾一下：

1. 当你把一个有效的 URL 字符串传递给 URL 构造函数时，它返回一个新的 URL 对象。
2. 当你向 URL 构造函数传递一个无效的 URL 字符串时，它会返回一个 TypeError。

有了这些知识，你可以创建一个自定义函数来检查一个给定的 URL 字符串的有效性。

如何用 URL 构造函数创建一个 URL 验证器函数

通过使用 URL 构造函数和 try...catch 语句，你可以创建一个自定义 isValidUrl 函数：

function isValidUrl(string) {
  try {
    new URL(string);
    return true;
  } catch (err) {
    return false;
  }
}

当你作为参数传递的字符串是一个有效的 URL 时，isValidUrl 函数返回 true。否则，它返回 false：

console.log(isValidUrl('https://www.freecodecamp.org/')); // true
console.log(isValidUrl('mailto://mail@freecodecamp.org')); // true
console.log(isValidUrl('freecodecamp')); // false

如何用 URL 构造器只验证 HTTP URL

有时，你可能想检查这个字符串是否是一个有效的 HTTP URL，而拒绝其他有效的 URL，如 'mailto://mail@freecodecamp.org'。

如果你仔细看一下 URL 对象，它的一个属性是 protocol：

在上面的例子中，protocol 属性的值是 'https:'。

要检查一个字符串是否是一个有效的 HTTP URL，你可以使用 URL 对象的 protocol 属性：

function isValidHttpUrl(string) {
  try {
    const newUrl = new URL(string);
    return newUrl.protocol === 'http:' || newUrl.protocol === 'https:';
  } catch (err) {
    return false;
  }
}

console.log(isValidHttpUrl('https://www.freecodecamp.org/')); // true
console.log(isValidHttpUrl('mailto://mail@freecodecamp.org')); // false
console.log(isValidHttpUrl('freecodecamp')); // false

这里的区别是，在新的 URL 对象被创建后，你没有返回 true。相反，你要检查 protocol 属性的值是否等于 "http: " 或 "https:"，如果是则返回 true，如果不是则返回 false。

如何使用 npm 包来验证 URL

有两个 NPM 包供你使用：is-url 和 is-url-http。

这些包是检查一个字符串是否为有效 URL 的最简单方法。你所需要做的就是传入一个字符串作为参数，而它们将返回 true 或 false。

让我们看看这两个包是如何工作的：

如何用 is-url 包验证 URL

你可以使用 is-url 包来检查一个字符串是否是一个有效的 URL。这个包并不检查传递给它的 URL 的协议。

要使用 is-url，首先使用下面的命令安装它：

npm install is-url

然后导入它，并将你的 URL 字符串作为一个参数传给它：

import isUrl from 'is-url';

const firstCheck = isUrl('https://www.freecodecamp.org/');
const secondCheck = isUrl('mailto://mail@freecodecamp.org');
const thirdCheck = isUrl('freeCodeCamp');

console.log(firstCheck); // true
console.log(secondCheck); // true
console.log(thirdCheck); // false

is-url 包对具有有效 URL 格式的字符串返回 true，对具有无效 URL 格式的字符串返回 false。

在这个例子中，firstCheck（使用 https: 协议）和 secondCheck（使用 mailto: 协议）都返回 true。

如何用 is-http-url 包来验证 HTTP URL

你可以使用 is-url-http 包来检查一个字符串是否是一个有效的 HTTP URL。

用下面的命令安装这个包：

npm install is-url-http

然后导入它，像这样把 URL 字符串传给它：

import isUrlHttp from 'is-url-http';

const firstCheck = isUrlHttp('https://www.freecodecamp.org/');
const secondCheck = isUrlHttp('mailto://freecodecamp@mail.org');
const thirdCheck = isUrlHttp('freeCodeCamp');

console.log(firstCheck); // true
console.log(secondCheck); // false
console.log(thirdCheck); // false

在这个例子中，只有 firstCheck 返回 true。is-url-http 包不仅检查字符串是否是一个有效的 URL，它还检查它是否是一个有效的 HTTP URL。这就是为什么它对 secondCheck 返回 false，因为它不是一个有效的 HTTP URL。

如何使用 Regex 来验证 URL

你也可以使用正则表达式来检查一个字符串是否是有效的 URL。

所有有效的 URL 都遵循一个特定的模式。它们有三个主要部分，分别是：

• 协议
• 域名（或 IP 地址）
• 端口和路径

有时路径后面是一个查询字符串或片段定位符。

你可以从这篇关于 URL 模式的 freeCodeCamp 文章中了解更多关于 URL 模式的信息。

知道了 URL 的模式，你可以使用正则来检查字符串中是否存在这样的模式。如果这些模式存在，那么这个字符串就通过了正则测试。否则，它就会失败。

另外，使用正则，你可以检查所有有效的 URL，或者只检查有效的 HTTP URL。

如何用正则验证 URL

function isValidUrl(str) {
  const pattern = new RegExp(
    '^([a-zA-Z]+:\\/\\/)?' + // protocol
      '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
      '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR IP (v4) address
      '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
      '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
      '(\\#[-a-z\\d_]*)?$', // fragment locator
    'i'
  );
  return pattern.test(str);
}

console.log(isValidUrl('https://www.freecodecamp.org/')); // true
console.log(isValidUrl('mailto://freecodecamp.org')); // true
console.log(isValidUrl('freeCodeCamp')); // false

上面 isValidUrl 函数中的正则检查一个字符串是否是一个有效的 URL。协议检查 ^([a-zA-Z]+:\\/\\/)? 不仅仅限于 https:。

这就是为什么第二个例子中的 mailto: 协议会返回 true。

如何用正则验证 HTTP URL

要使用正则来检查一个字符串是否是有效的 HTTP URL，你需要编辑协议检查。

你应该使用 '^(https?:\\/\\/)?'，而不是 ^([a-zA-Z]+:\\/\\/)?：

function isValidHttpUrl(str) {
  const pattern = new RegExp(
    '^(https?:\\/\\/)?' + // protocol
      '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
      '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
      '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
      '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
      '(\\#[-a-z\\d_]*)?$', // fragment locator
    'i'
  );
  return pattern.test(str);
}

console.log(isValidHttpUrl('https://www.freecodecamp.org/')); // true
console.log(isValidHttpUrl('mailto://freecodecamp.org')); // false
console.log(isValidHttpUrl('freeCodeCamp')); // false

现在只有第一个具有有效的 https: 协议的例子返回 true。请注意，带有 http: 的 URL 字符串也可以工作。

总结

在这篇文章中，你学到了如何在 JavaScript 中检查 URL 的有效性。现在，你知道了以下三种方法，可以做到这一点。

• 如何使用 URL 构造器来验证 URL 的有效性
• 如何使用 npm 包来验证 URL（is-url 和 is-http-url）
• 如何使用正则来验证 URL

你可以选择自己喜欢的工作方法。

谢谢你阅读本文，happy coding！

大多数开发人员都非常熟悉 React hooks 的工作方式和常见用例，但是有一个 useEffect 问题很多人可能不太清楚。

用例

让我们从一个简单的场景开始。我们正在构建一个 React 应用程序，希望在一个组件中显示当前用户的用户名。但首先，我们需要从 API 中获取用户名。

因为我们知道我们也需要在应用程序的其他地方使用用户数据，所以我们还想在自定义 React hook 中抽象数据获取逻辑。

我们希望 React 组件看起来像这样：

const Component = () => {
  // useUser custom hook
  
  return <div>{user.name}</div>;
};

看起来很简单！

useUser React hook

第二步是创建我们的 useUser 自定义钩子。

const useUser = (user) => {
  const [userData, setUserData] = useState();
  useEffect(() => {
    if (user) {
      fetch("users.json").then((response) =>
        response.json().then((users) => {
          return setUserData(users.find((item) => item.id === user.id));
        })
      );
    }
  }, []);

  return userData;
};

让我们分解一下。我们正在检查钩子是否正在接收用户对象。之后，我们从名为 users.json 的文件中获取用户列表，并对其进行过滤以找到具有我们需要的 id 的用户。

然后，一旦我们获得了必要的数据，我们就将其保存为钩子的 userData 状态。最后返回 userData。

注意：这是一个仅用于说明目的的示例！现实世界中的数据获取要复杂得多。如果你对该主题感兴趣，请查看我关于如何使用 ReactQuery、Typescript 和 GraphQL 创建出色的数据获取设置的文章。

让我们在 React 组件中插入钩子，看看会发生什么。

const Component = () => {
  const user = useUser({ id: 1 });
  return <div>{user?.name}</div>;
};

好的，一切都按预期进行。但是等等……这是什么？

ESLint exhaustive-deps 规则

我们的钩子中有一个 ESLint 警告：

React Hook useEffect has a missing dependency: 'user'. Either include it or remove the dependency array. (react-hooks/exhaustive-deps)

嗯，我们的 useEffect 似乎缺少依赖项。那好吧！ 让我们添加它。可能发生的最坏情况是什么？ 😂

const useUser = (user) => {
  const [userData, setUserData] = useState();
  useEffect(() => {
    if (user) {
      fetch("users.json").then((response) =>
        response.json().then((users) => {
          return setUserData(users.find((item) => item.id === user.id));
        })
      );
    }
  }, [user]);

  return userData;
};

看起来我们的组件 Component 现在不会停止重新渲染。这里发生了什么？！

让我们解释一下。

无限重新渲染问题

我们的组件重新渲染的原因是因为 useEffect 依赖项在不断变化。但为什么？我们总是将相同的对象传递给钩子！

虽然我们确实传递了一个具有相同键和值的对象，但它并不是完全相同的对象。每次重新渲染组件时，我们实际上都是在创建一个新对象，然后我们将新对象作为参数传递给 useUser 钩子。

在内部，useEffect 比较两个对象，由于它们有不同的引用，它再次获取用户并将新的用户对象设置为状态。状态更新然后触发组件中的重新渲染，不断重复……

所以，我们能做些什么？

如何修复

现在我们了解了问题，可以开始寻找解决方案。

第一个也是最明显的选择是从 useEffect 依赖数组中移除依赖，忽略 ESLint 规则，继续我们的生活。

但这是错误的做法。它可以（并且可能会）导致我们的应用程序中出现错误和意外行为。如果你想了解更多有关 useEffect 如何工作的信息，我强烈推荐 Dan Abramov 的完整指南。

下一个是什么？

在我们的例子中，最简单的解决方案是从组件中取出 { id: 1 } 对象。这将为对象提供稳定的引用并解决我们的问题。

const userObject = { id: 1 };

const Component = () => {
  const user = useUser(userObject);
  return <div>{user?.name}</div>;
};

export default Component;

但这并不总是可能的。想象一下，用户 id 以某种方式依赖于组件 props 或状态。

例如，可能是我们使用 URL 参数来访问它。如果是这种情况，我们可以使用一个方便的 useMemo 钩子来记忆对象并再次确保稳定的引用。

const Component = () => {
  const { userId } = useParams();
  
  const userObject = useMemo(() => {
    return { id: userId };
  }, [userId]); // Don't forget the dependencies here either!

  const user = useUser(userObject);
  return <div>{user?.name}</div>;
};

export default Component;

最后，不是将对象变量传递给我们的 useUser 钩子，而是可以只传递用户 ID 本身，这是一个原始值。这将防止 useEffect 钩子中的引用相等问题。

const useUser = (userId) => {
  const [userData, setUserData] = useState();

  useEffect(() => {
    fetch("users.json").then((response) =>
      response.json().then((users) => {
        return setUserData(users.find((item) => item.id === userId));
      })
    );
  }, [userId]);

  return userData;
};

const Component = () => {
  const user = useUser(1);

  return <div>{user?.name}</div>;
};

问题解决啦！

在此过程中，我们甚至不必违反任何 ESLint 规则......

注意：如果我们传递给自定义钩子的参数是一个函数，而不是一个对象，我们将使用非常相似的技术来避免无限重新渲染。一个显着的区别是我们必须在上面的例子中用 useCallback 替换 useMemo。

感谢你阅读本文！

对代码感到好奇吗？在这里探索吧。

欢迎访问我的博客并在 Twitter 上关注我，以获取更多与 React 相关的内容。

图片作者：vectorjuice

数组数据类型是处理有序值列表时最常用的数据类型之一。

每个值都被称为具有唯一 id 的元素。它存储可以通过单个变量访问的各种数据类型的元素。

在实践中，一个数组可以包含一个用户列表，我们可能需要在最后一个元素之后、第一个元素之前或数组中的任何指定点添加一个元素到数组中。

本文将向你展示如何使用 JavaScript 将元素插入到数组中。如果你赶时间，以下是我们将在本文中深入讨论的方法：

// 添加到数组的开头
Array.unshift(element);

// 添加到数组的末尾
Array.push(element);

// 添加到指定位置
Array.splice(start_position, 0, new_element...);

// 使用 concat 方法添加而不改变原始数组
let newArray = [].concat(Array, element);

• 当你想在数组末尾添加一个元素时，请使用 push()。
• 如果你需要在数组的开头添加一个元素，请使用 unshift()。
• 如果要将元素添加到数组的特定位置，请使用 splice()。
• 最后，当你想保持原始数组时，可以使用 concat() 方法。

如何使用 unshift() 方法添加到数组的开头

在 JavaScript 中，你可以使用 unshift() 方法将一个或多个元素添加到数组的开头，并在添加新元素后返回数组的长度。

如果我们有一个国家数组，并且想在当前第一个索引 0 处的 “Nigeria” 之前添加一个国家，我们可以使用 unshift() 方法来完成，如下所示：

const countries = ["Nigeria", "Ghana", "Rwanda"];

countries.unshift("Kenya");

console.log(countries); // ["Kenya","Nigeria","Ghana","Rwanda"]

我们还可以使用 unshift() 方法添加多个元素：

const countries = ["Nigeria", "Ghana", "Rwanda"];

countries.unshift("South Africa", "Mali", "Kenya");

console.log(countries); // ["South Africa","Mali","Kenya","Nigeria","Ghana","Rwanda"]

在我们对 unshift() 方法的解释中，我们还声明它返回新数组的长度，如下所示：

const countries = ["Nigeria", "Ghana", "Rwanda"];

let countriesLength = countries.unshift("South Africa", "Mali", "Kenya");

console.log(countriesLength); // 6

如何使用 push() 方法推送到数组的末尾

push() 方法类似于 unshift() 方法，因为它将元素添加到数组的末尾而不是开头。它返回新数组的长度，并且与 unshift() 方法一样，可用于添加多个元素。

让我们再次尝试相同的示例，但这次使用 push() 方法将它们添加到数组的末尾：

const countries = ["Nigeria", "Ghana", "Rwanda"];

countries.push("Kenya");

console.log(countries); // ["Nigeria","Ghana","Rwanda","Kenya"]

countries.push("South Africa", "Mali");

console.log(countries); // ["Nigeria","Ghana","Rwanda","Kenya","South Africa","Mali"]

我们可以用它来获取新数组的长度：

const countries = ["Nigeria", "Ghana", "Rwanda"];

let countriesLength = countries.push("Kenya");

console.log(countriesLength); // 4

如何使用 splice() 方法将元素添加到数组中的指定位置

到目前为止，我们只看到了如何将元素添加到数组的开头或结尾，但是你可能想知道如何将元素添加到数组中的特定位置。好吧，你可以使用 splice() 方法来做到这一点。

splice() 方法是一种通用方法，用于通过在数组的指定位置删除、替换或添加元素来更改数组的内容。本节将介绍如何使用此方法将元素添加到特定位置。

例如，考虑以下国家数组，其中包含按字母顺序排列的三个元素（国家）：

const countries = ["Ghana", "Nigeria", "Rwanda"];

假设我们要添加 “Kenya”，按照字母顺序，它应该放在第二个位置，索引 1（在 Ghana 之后和 Nigeria 之前）。在这种情况下，我们将使用 splice() 方法，语法如下：

Array.splice(start_position, 0, new_element...);

• start_position 指定了我们希望将新元素插入到数组中的位置的索引。如果有多个元素，它指定插入的元素将从哪里开始。
• 如果我们想添加元素到数组中，我们将第二个参数设置为零（0），指示 splice() 方法不要删除任何数组元素。
• 以下参数或元素可能不止一个，因为这些是我们要在指定位置添加到数组中的元素。

例如，让我们在国家数组中将 “Kenya” 放在 “Ghana” 之后：

const countries = ["Ghana", "Nigeria", "Rwanda"];

countries.splice(1, 0, 'Kenya');

console.log(countries); // ["Ghana","Kenya","Nigeria","Rwanda"]

就像我们对其他方法所做的那样，我们也可以添加多个元素：

const countries = ["Ghana", "Nigeria", "Rwanda"];

countries.splice(1, 0, 'Kenya', 'Mali');

console.log(countries); // ["Ghana","Kenya","Mali","Nigeria","Rwanda"]

请注意，前面的方法返回新数组的长度，但 splice() 方法更改了原始数组。它不会删除任何元素，因此它返回一个空数组。

如何使用 concat() 方法将元素添加到数组

我们可以使用 concat() 方法将元素添加到数组中，而无需改变或更改原始数组。如果我们不希望原始数组受到影响，则创建一个新数组是一种更好的方法。

我们可以使用此方法根据放置元素的位置将元素添加到数组的开头和结尾：

const countries = ["Ghana", "Nigeria", "Rwanda"];

let newCountries = [].concat("Mali", countries, "Kenya");

console.log(newCountries); // ["Mali","Ghana","Nigeria","Rwanda","Kenya"]

concat() 方法还允许我们将两个（或更多）数组连接到一个新数组中：

const africanCountries = ["Ghana", "Nigeria", "Rwanda"];
const europeanCountries = ["Germany", "France", "spain"];

let countries = [].concat(africanCountries, europeanCountries);

console.log(countries); // ["Ghana","Nigeria","Rwanda","Germany","France","spain"]

总结

在本文中，我们学习了使用 splice() 方法将元素添加到数组的开始、末尾或任何位置的各种方法。

我们还了解到 concat() 方法允许我们在不改变原始数组的情况下添加元素。

你可以使用任何你需要的方法。

祝你编程快乐！

在 Web 开发中，REST API 在确保客户端和服务器之间的顺利通信方面发挥了重要作用。

你可以把客户端看作是前端，把服务器看作是后端。

客户端（前端）和服务器（后端）之间的通信通常不是超级直接的。因此，我们使用一个叫作“应用编程接口”（或 API）的接口，作为客户端和服务器之间的中介。

因为 API 在这种客户端-服务器通信中起着至关重要的作用，所以我们在设计 API 时应该始终考虑到最佳实践。这有助于维护它们的开发人员和那些使用它们的人，在履行职责时不会遇到问题。

在这篇文章中，我将带你了解创建 REST API 时需要遵循的 9 个最佳实践。这将帮助你创建最好的 API，并使你的 API 用户使用起来更容易。

首先，什么是 REST API

REST 是Representational State Transfer 的缩写。它是由 Roy Fielding 在 2000 年创造的一种软件架构风格，用于指导网络的架构设计。

任何遵循 REST 设计原则的 API（应用编程接口）都被称为 RESTful。

简单地说，REST API 是两台计算机通过 HTTP（超文本传输协议）进行通信的媒介，与客户端和服务器的通信方式相同。

REST API 设计最佳实践

使用 JSON 作为发送和接收数据的格式

在过去，接受和响应 API 请求主要是通过 XML 甚至 HTML 完成的。但如今，JSON（JavaScript Object Notation）已经在很大程度上成为发送和接收 API 数据的事实格式。

这是因为，以 XML 为例，对数据进行解码和编码往往有点麻烦——所以 XML 不再受到框架的广泛支持。

例如，JavaScript 有一个内置的方法来通过 fetch API 解析 JSON 数据，因为 JSON 主要是为它而生成的。但是如果你使用任何其他编程语言，如 Python 或 PHP，它们现在也都有解析和操作 JSON 数据的方法。

例如，Python 提供 json.load() 和 json.dumps() 来处理 JSON 数据。

为了确保客户端正确地解释 JSON 数据，你应该在发出请求时将响应头中的 Content-Type 类型设置为 application/json。

另一方面，对于服务器端的框架，许多框架会自动设置 Content-Type。例如，Express 现在有 express.json() 中间件来实现这一目的。body-parser NPM 包也仍然适用于同一目的。

在端点中使用名词而不是动词

当你设计一个 REST API 时，你不应该在端点路径中使用动词。端点应该使用名词，表示它们各自的作用。

这是因为 HTTP 方法，例如 GET、POST、PUT、PATCH 和 DELETE，已经以动词形式执行基本的 CRUD（创建、读取、更新、删除）操作。

GET、POST、PUT、PATCH 和 DELETE 是最常见的 HTTP 动词。还有其他一些动词，如 COPY、PURGE、LINK、UNLINK 等等。

因此，举例来说，一个端点不应该是这样的：

https://mysite.com/getPosts or https://mysite.com/createPost

它应该是这样的： https://mysite.com/posts

简而言之，你应该让 HTTP 动词来处理端点的工作。因此，GET 将检索数据，POST 将创建数据，PUT 将更新数据，DELETE 将删除数据。

用复数名词命名集合

你可以把你的 API 的数据看成是来自用户的不同资源的集合。

如果你有一个像 https://mysite.com/post/123 这样的端点，用 DELETE 请求删除一个帖子，或用 PUT 或 PATCH 请求更新一个帖子，可能是可以的，但它没有告诉用户在这个集合中可能还有一些其他的帖子。这就是为什么你的集合应该使用复数的名词。

所以，不应该是 https://mysite.com/post/123，而是 https://mysite.com/posts/123。

在错误处理中使用状态码

你应该在对你的 API 请求的响应中始终使用常规的 HTTP 状态代码。这将帮助你的用户知道发生了什么——请求是否成功，或者是否失败，或者其他情况。

下面的表格显示了不同的 HTTP 状态代码范围和它们的含义：

在端点上使用嵌套来显示关系

很多时候，不同的端点可以相互联系，所以你应该对它们进行嵌套，这样更容易理解它们。

例如，对于一个多用户博客平台，不同的帖子可能是由不同的作者写的，所以在这种情况下，像 https://mysite.com/posts/author 这样的端点会成为一个有效的嵌套。

同样地，帖子可能有各自的评论，所以要检索评论，可以使用 https://mysite.com/posts/postId/comments 这样的端点。

你应该避免超过 3 层的嵌套，因为这可能使 API 不那么优雅和具有可读性。

使用过滤、排序和分页来检索请求的数据

有时，API 的数据库可能非常大。如果发生这种情况，从这样的数据库中检索数据可能非常缓慢。

过滤、排序和分页都是可以在 REST API 的集合上执行的操作。这样只能检索、排序和排列必要的数据，并将其分页，以防服务器请求过载。

以下是一个已过滤的端点的示例：https://mysite.com/posts?tags=javascript。此端点将检索具有 JavaScript 标签的任何帖子。

使用 SSL 保障安全

SSL 指的是安全套接层。这对于 REST API 设计的安全性至关重要。这将保护你的 API，使其更不容易受到恶意攻击。

你还应考虑其他安全措施，包括：使服务器和客户端之间的通信保密，确保使用 API 的任何人不会获得他们请求的以外的数据。

SSL 证书不难加载到服务器上，而且大多数情况下在第一年是免费的。即使需要购买，它们也并不昂贵。

运行在 SSL 上的 REST API 的 URL 与不运行在 SSL 上的 URL 的明显区别是 HTTP 中的 “s”：https://mysite.com/posts 运行在 SSL 上，http://mysite.com/posts 不运行在 SSL 上。

明确版本划分

REST API 应该有不同的版本，所以你不会强迫客户（用户）迁移到新版本。如果你不小心，这甚至可能破坏应用程序。

网络开发中最常见的版本控制系统之一是语义版本控制。

语义版本管理的一个例子是 1.0.0、2.1.2 和 3.3.4。第一个数字代表主要版本，第二个数字代表次要版本，第三个数字代表补丁版本。

许多科技巨头和个人的 RESTful API 通常是这样的：https://mysite.com/v1/ 代表版本 1，https://mysite.com/v2 代表版本 2。

Facebook 的 API 版本是这样的：

Spotify 以同样的方式做他们的版本管理：

并不是每个 API 都是这样的情况。Mailchimp 的 API 版本是这样的：

当你以这种方式创建 REST API 时，你不强制客户端在选择不迁移的情况下迁移到新版本。

提供准确的 API 文档

当你创建 REST API 时，你需要帮助用户（消费者）正确学习并了解如何使用它。最好的方法是为 API 提供良好的文档。

文档应包含：

• API 的相关端点
• 端点的示例请求
• 在几种编程语言中的实现
• 不同错误的消息列表及其状态代码

你可以用于 API 文档的最常用工具是 Swagger。你也可以使用 Postman 来记录你的 API，这是软件开发中最常见的 API 测试工具。

总结

在这篇文章中，你了解了在创建 REST API 时需要记住的几个最佳实践。

将这些最佳实践和惯例付诸实践是很重要的，这样你就可以创建功能强大的应用程序，使其运行良好、安全，并最终使你的 API 用户能够更加容易地使用它。

谢谢你阅读本文。现在，去用这些最佳实践创建一些 API 吧。

导航栏是网站和 web 应用中经常使用的基本组件。作为一名 web 开发人员，你需要能够为客户的项目或者基本的作品集网站定制它。

在本指南中，你将学习如何只用 HTML、CSS 和 JavaScript 从头开始创建一个导航栏。你还将学习如何从无障碍方面优化它。

下面是这个导航栏的截图：

这个设计的灵感来自 Dribbble 上 Tran Mau Tri Tam 的极简导航栏。

第 1 步 - 添加 HTML 标记

为了简洁起见，我们将使用一个叫做 boxicons 的图标库来为这个导航栏导入某些图标。我强烈建议使用内联 SVG。

要使用这个库，请在你的 HTML 文件的 head 插入下面的片段：

<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>

该标记被分为三个主要部分：

• 一个 class 为 nav-start 的 div 元素
• 另一个 div 元素，class 为 nav-end
• 一个 id 为 hamburger 的 button 元素

所有这些元素都将被包裹在一个 header 标签中。为了更好地解释这一点，请复制下面的标记。

<header id="nav-menu" aria-label="navigation bar">
  <div class="container">
    <div class="nav-start">
      <a class="logo" href="/">
        <img src="https://github.com/Evavic44/responsive-navbar-with-dropdown/blob/main/assets/images/logo.png?raw=true" 
             width="35" 
             height="35" 
             alt="Inc Logo"
          />
      </a>
      <nav class="menu"></nav>
    </div>

    <div class="nav-end">
      <div class="right-container">
        <form class="search" role="search">
          <input type="search" name="search" placeholder="Search" />
          <i class="bx bx-search" aria-hidden="true"></i>
        </form>

        <a href="#profile">
          <img src="https://github.com/Evavic44/responsive-navbar-with-dropdown/blob/main/assets/images/user.jpg?raw=true" 
               width="30" 
               height="30" 
               alt="user image" 
            />
        </a>
        <button class="btn btn-primary">Create</button>
      </div>

      <button id="hamburger" aria-label="hamburger" aria-haspopup="true" aria-expanded="false">
        <i class="bx bx-menu" aria-hidden="true"></i>
      </button>
    </div>
  </div>
</header>

对于 nav-start，我们有以下元素：

• 一个 <img> 元素作为 logo，包裹在一个 <a> 标签中
• 一个 <nav> 元素，class 为 menu，包含所有导航链接，我们将使用 <ul>、<li> 和 <a> 定义这些链接

nav-end 有以下元素：

• 一个 <form> 元素，它的 role 是 search，包含一个搜索输入和搜索图标
• 一个 class 为 btn 的按钮元素，我们将使用这个 class 来设计按钮

对于汉堡包按钮：

• 一个按钮，其 id 和 aria-label 为 hamburger，aria-haspopup 设置为 “true”，aria-expanded 设置为 “false”。这些标签将使我们能够使这个按钮更容易被屏幕阅读器访问。

下面是输出：

导航菜单

导航菜单 <nav> 是导航链接所在的位置。用下面这个标记替换你先前添加的 nav 元素：

<nav class="menu">
    <ul class="menu-bar">
        <li>
            <button 
              class="nav-link dropdown-btn" 
              data-dropdown="dropdown1" 
              aria-haspopup="true" 
              aria-expanded="false" 
              aria-label="browse">
                Browse
              <i class="bx bx-chevron-down" aria-hidden="true"></i>
            </button>
            <div id="dropdown1" class="dropdown"></div>
        </li>
        <li>
            <button 
              class="nav-link dropdown-btn" 
              data-dropdown="dropdown2" 
              aria-haspopup="true" 
              aria-expanded="false" 
              aria-label="discover">
                Discover
              <i class="bx bx-chevron-down" aria-hidden="true"></i>
            </button>
            <div id="dropdown2" class="dropdown"></div>
        </li>
        <li><a class="nav-link" href="/">Jobs</a></li>
        <li><a class="nav-link" href="/">Livestream</a></li>
        <li><a class="nav-link" href="/">About</a></li>
    </ul>
</nav>

这里你有一个 nav 标签，它包含一个无序的列表，其中有五个 li 元素，代表每个导航菜单项目：browse、discover、 jobs、livestream 和 about。

前两个元素，browse 和 discover，是 button 元素，将被用来切换它们各自的下拉菜单。而元素 Jobs、livestream 和 about 只是普通的链接。

使用到目前为止的代码，你的结果应该是这样的：

下拉元素

接下来，让我们为每个导航按钮定义下拉元素。下面是第一个下拉菜单的标记。把你的标记中的第一个 li 元素替换成这样：

<!-- markup truncated for brevity-->
<li>
  <button
    class="nav-link dropdown-btn"
    data-dropdown="dropdown1"
    aria-haspopup="true"
    aria-expanded="false"
    aria-label="browse"
  >
    Browse
    <i class="bx bx-chevron-down" aria-hidden="true"></i>
  </button>
  <div id="dropdown1" class="dropdown">
    <ul role="menu">
      <li role="menuitem">
        <a class="dropdown-link" href="#best-of-the-day">
          <img src="./assets/icons/botd.svg" class="icon" />
          <div>
            <span class="dropdown-link-title"
              >Best of the day</span
            >
            <p>Shorts featured today by curators</p>
          </div>
        </a>
      </li>
      <li role="menuitem">
        <a class="dropdown-link" href="#featured-streams">
          <img src="./assets/icons/fs.svg" class="icon" />
          <div>
            <span class="dropdown-link-title"
              >Featured Streams</span
            >
            <p>Leading creatives livestreams</p>
          </div>
        </a>
      </li>
      <li role="menuitem">
        <a class="dropdown-link" href="#subscriptions">
          <img src="./assets/icons/sp.svg" class="icon" />
          <div>
            <span class="dropdown-link-title">Subscriptions</span>
            <p>Gain exclusive access</p>
          </div>
        </a>
      </li>
      <li role="menuitem">
        <a class="dropdown-link" href="#creative-feed">
          <img src="./assets/icons/cf.svg" class="icon" />
          <div>
            <span class="dropdown-link-title">Creative Feed</span>
            <p>See trending creations</p>
          </div>
        </a>
      </li>
    </ul>

    <ul role="menu">
      <li class="dropdown-title">
        <span class="dropdown-link-title">Browse by apps</span>
      </li>
      <li role="menuitem">
        <a class="dropdown-link" href="#adobe-xd">
          <img src="./assets/icons/xd.svg" />
          Adobe XD
        </a>
      </li>
      <li role="menuitem">
        <a class="dropdown-link" href="#after-effect">
          <img src="./assets/icons/ae.svg" />
          After Effect
        </a>
      </li>
      <li role="menuitem">
        <a class="dropdown-link" href="#sketch">
          <img src="./assets/icons/sketch.svg" />
          Sketch
        </a>
      </li>
      <li role="menuitem">
        <a class="dropdown-link" href="#indesign">
          <img src="./assets/icons/indesign.svg" />
          Indesign
        </a>
      </li>
      <li role="menuitem">
        <a class="dropdown-link" href="#figma">
          <img src="./assets/icons/figma.svg" />
          Figma
        </a>
      </li>
    </ul>
  </div>
</li>

你可以在这里获得 SVG 图标。

看看这个标记，我们添加了以下内容：

• 一个 id 为 dropdown1、class 为 dropdown 的 div 元素。
• 两个 ul 元素，每个元素的 role 是 "menu"。
• 一个 span 元素，其 class 为 dropdown-link-title，作为每个 menu 集合的 header。
• 使用 li 和 a 标签定义的链接集合，li 标签有一个 role 为 "menuitem"，每个链接有一个 class 为 dropdown-link。
• 在每个锚标签内，通过 img 标签添加一个图标。

注意：由于通过img标签添加的图标是严格意义上的声明性的，我强烈建议你直接将它们作为SVG元素添加。我这样做只是为了使代码更容易阅读

下面是第二个下拉元素dropdown2的标记：

<!-- markup truncated for brevity-->
<li>
  <button
    class="nav-link dropdown-btn"
    data-dropdown="dropdown2"
    aria-haspopup="true"
    aria-expanded="false"
    aria-label="discover"
  >
    Discover
    <i class="bx bx-chevron-down" aria-hidden="true"></i>
  </button>
  <div id="dropdown2" class="dropdown">
    <ul role="menu">
      <li>
        <span class="dropdown-link-title">Browse Categories</span>
      </li>
      <li role="menuitem">
        <a class="dropdown-link" href="#branding">Branding</a>
      </li>
      <li role="menuitem">
        <a class="dropdown-link" href="#illustrations">Illustration</a>
      </li>
    </ul>
    <ul role="menu">
      <li>
        <span class="dropdown-link-title">Download App</span>
      </li>
      <li role="menuitem">
        <a class="dropdown-link" href="#mac-windows">MacOS & Windows</a>
      </li>
      <li role="menuitem">
        <a class="dropdown-link" href="#linux">Linux</a>
      </li>
    </ul>
  </div>
</li>

最终结果应该是这样：

本教程最后将提供完整的标记。

第 2 步 - 为导航栏设计样式

像往常一样，我们将从重置页面上每个元素的默认 margin 和 padding 开始，添加全局变量，并对一些元素进行一些基本的样式设计。

/* style.css */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
}

:root {
  --dark-grey: #333333;
  --medium-grey: #636363;
  --light-grey: #eeeeee;
  --ash: #f4f4f4;
  --primary-color: #2b72fb;
  --white: white;
  --border: 1px solid var(--light-grey);
  --shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
    rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}

body {
  font-family: inherit;
  background-color: var(--white);
  color: var(--dark-grey);
  letter-spacing: -0.4px;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  border: none;
  background-color: transparent;
  cursor: pointer;
  color: inherit;
}

接下来，添加一些可重复使用的样式。

.btn {
  display: block;
  background-color: var(--primary-color);
  color: var(--white);
  text-align: center;
  padding: 0.6rem 1.4rem;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 5px;
}

.icon {
  padding: 0.5rem;
  background-color: var(--light-grey);
  border-radius: 10px;
}

.logo {
  margin-right: 1.5rem;
}

#nav-menu {
  border-bottom: var(--border);
}

.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1600px;
  margin: 0 auto;
  column-gap: 2rem;
  height: 90px;
  padding: 1.2rem 3rem;
}

现在你已经得到了这些基本的样式，你可以专注于核心导航栏本身的样式。

导航菜单的样式

下面是为导航栏容器设计的标记：

.menu {
  position: relative;
  background: var(--white);
}

.menu-bar li:first-child .dropdown {
  flex-direction: initial;
  min-width: 480px;
}

.menu-bar li:first-child ul:nth-child(1) {
  border-right: var(--border);
}

.menu-bar li:nth-child(n + 2) ul:nth-child(1) {
  border-bottom: var(--border);
}

.menu-bar .dropdown-link-title {
  font-weight: 600;
}

.menu-bar .nav-link {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.6px;
  padding: 0.3rem;
  min-width: 60px;
  margin: 0 0.6rem;
}

.menu-bar .nav-link:hover,
.dropdown-link:hover {
  color: var(--primary-color);
}

.nav-start,
.nav-end,
.menu-bar,
.right-container,
.right-container .search {
  display: flex;
  align-items: center;
}

下拉菜单的样式

除了对下拉菜单进行样式设计外，还将使用 visibility 和 opacity 属性的组合来隐藏它。我们的想法是，只有在一个按钮被点击时才显示菜单。

.dropdown {
  display: flex;
  flex-direction: column;
  min-width: 230px;
  background-color: var(--white);
  border-radius: 10px;
  position: absolute;
  top: 36px;
  z-index: 1;
  visibility: hidden;
  opacity: 0;
  transform: scale(0.97) translateX(-5px);
  transition: 0.1s ease-in-out;
  box-shadow: var(--shadow);
}

.dropdown.active {
  visibility: visible;
  opacity: 1;
  transform: scale(1) translateX(5px);
}

.dropdown ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.2rem;
  font-size: 0.95rem;
}

.dropdown-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.15rem;
}

.dropdown-link {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-radius: 7px;
  transition: 0.1s ease-in-out;
}

.dropdown-link p {
  font-size: 0.8rem;
  color: var(--medium-grey);
}

接着，可以通过使用 active class 将 visibility 和 opacity 属性恢复到默认状态来切换该菜单。但我们将通过 JavaScript 来做这件事。

如果你喜欢完全隐藏菜单，可以用 display: none; 代替 opacity 和 visibility 属性。虽然这个属性在 CSS 中不能用过渡来做动画。

右边的菜单样式

接下来，为搜索输入、按钮和个人资料图片添加样式，然后在桌面屏幕上隐藏汉堡包按钮。

.right-container {
  display: flex;
  align-items: center;
  column-gap: 1rem;
}

.right-container .search {
  position: relative;
}

.right-container img {
  border-radius: 50%;
}

.search input {
  background-color: var(--ash);
  border: none;
  border-radius: 6px;
  padding: 0.7rem;
  padding-left: 2.4rem;
  font-size: 16px;
  width: 100%;
  border: var(--border);
}

.search .search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.6;
}

#hamburger {
  display: none;
  padding: 0.1rem;
  margin-left: 1rem;
  font-size: 1.9rem;
}

现在它是这样的：

为了完成样式设计，添加媒体查询样式：

@media (max-width: 1100px) {
  #hamburger {
    display: block;
  }

  .container {
    padding: 1.2rem;
  }

  .menu {
    display: none;
    position: absolute;
    top: 87px;
    left: 0;
    min-height: 100vh;
    width: 100vw;
  }

  .menu-bar li:first-child ul:nth-child(1) {
    border-right: none;
    border-bottom: var(--border);
  }

  .dropdown {
    display: none;
    min-width: 100%;
    border: none !important;
    border-radius: 5px;
    position: static;
    top: 0;
    left: 0;
    visibility: visible;
    opacity: 1;
    transform: none;
    box-shadow: none;
  }

  .menu.show,
  .dropdown.active {
    display: block;
  }

  .dropdown ul {
    padding-left: 0.3rem;
  }

  .menu-bar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    row-gap: 1rem;
    padding: 1rem;
  }

  .menu-bar .nav-link {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-weight: 600;
    font-size: 1.2rem;
    margin: 0;
  }

  .menu-bar > li:not(:last-child) {
    padding-bottom: 0.5rem;
    border-bottom: var(--border);
  }
}

@media (max-width: 600px) {
  .right-container {
    display: none;
  }
}

首先，这排列了元素，最重要的是，它定位 hamburger class 并将其隐藏。现在在平板电脑和手机屏幕上，导航栏是响应式的，汉堡包按钮是可见的。

这就完成了导航栏的样式设计。让我们在下一节中进行功能设计。

第 3 步 - 添加 JavaScript 功能

对于 JavaScript 功能，我们将专注于以下几个类别：

• 切换下拉菜单的可见性
• 关闭下拉菜单
• 切换汉堡包菜单的可见性
• 切换 aria-expanded 属性

首先，使用 DOM 的 querySelector 方法选择你的类，并将它们存储在变量中，以便它们可以重复使用。

// script.js
const dropdownBtn = document.querySelectorAll(".dropdown-btn");
const dropdown = document.querySelectorAll(".dropdown");
const hamburgerBtn = document.getElementById("hamburger");
const navMenu = document.querySelector(".menu");
const links = document.querySelectorAll(".dropdown a");

接下来在你的代码中添加下面的函数。我稍后将解释它们的用途。

function setAriaExpandedFalse() {
  dropdownBtn.forEach((btn) => btn.setAttribute("aria-expanded", "false"));
}

function closeDropdownMenu() {
  dropdown.forEach((drop) => {
    drop.classList.remove("active");
    drop.addEventListener("click", (e) => e.stopPropagation());
  });
}

function toggleHamburger() {
  navMenu.classList.toggle("show");
}

获取下拉菜单 ID

下一步是获取下拉菜单的 ID。由于有两个下拉菜单，其值将基于点击的下拉按钮。

为了获得 ID，你将利用 dataset 属性，然后将该值存储到它自己的变量中。

dropdownBtn.forEach((btn) => {
  btn.addEventListener("click", function (e) {
    const dropdownIndex = e.currentTarget.dataset.dropdown;
    const dropdownElement = document.getElementById(dropdownIndex);
    console.log(dropdownElement);
  });
});

理解这个片段：

• forEach 方法遍历按钮的集合
• addEventListener() 方法为每个按钮附加了一个点击事件
• currentTarget.dataset 属性获取被点击按钮的当前下拉菜单
• 每一个 id 都被用来定位相应的下拉元素

这意味着，当 dataset 为 dropdown1 的按钮被点击时，id 为 dropdown1 的 div 元素被记录到控制台，反之则为 dropdown2 按钮。

切换下拉菜单

切换菜单是相当容易的，因为你已经把下拉元素的 ID 存储到一个叫作 dropdownElement 的变量中。通过定位这个变量，你可以切换每个下拉元素的 active class。

dropdownBtn.forEach((btn) => {
  btn.addEventListener("click", function (e) {
    const dropdownIndex = e.currentTarget.dataset.dropdown;
    const dropdownElement = document.getElementById(dropdownIndex);

    dropdownElement.classList.toggle("active");
    dropdown.forEach((drop) => {
      if (drop.id !== btn.dataset["dropdown"]) {
        drop.classList.remove("active");
      }
    });
    e.stopPropagation();
  });
});

除了切换下拉菜单外，我们还添加了一个条件，检查当前下拉元素的 id 是否与活动按钮相匹配。这可以确保每次只有一个下拉元素被展开。

切换 aria-expanded 属性

aria-expanded 属性允许辅助技术告知一个交互式菜单是展开还是折叠的。要切换这个属性，请在 btn 代码块中的 e.stopPropagation() 下插入这段代码：

btn.setAttribute(
    "aria-expanded",
    btn.getAttribute("aria-expanded") === "false" ? "true" : "false"
);

现在，只要下拉菜单是可见的，aria-expanded 属性就被设置为 true；而当菜单折叠时，它被设置为 false。

折叠下拉菜单

到目前为止，下拉菜单只有在点击按钮的时候才会折叠。它应该被折叠的其他情况包括：

• 当点击下拉菜单内的链接时
• 当你按下 ESC 键时
• 当你点击文档主体时——在下拉容器之外

通过调用前面创建的函数 closeDropdownMenu 和 setAriaExpandedFalse，可以折叠下拉菜单并将 aria-expanded 属性设置为 false。

// 当点击下拉链接时关闭下拉菜单
links.forEach((link) =>
  link.addEventListener("click", () => {
    closeDropdownMenu();
    setAriaExpandedFalse();
  })
);

// 当点击文档主体时关闭下拉菜单
document.documentElement.addEventListener("click", () => {
  closeDropdownMenu();
  setAriaExpandedFalse();
});

// 当按 ESC 键时关闭下拉菜单
document.addEventListener("keydown", (e) => {
  if (e.key === "Escape") {
    closeDropdownMenu();
    setAriaExpandedFalse();
  }
});

下面是输出：

切换汉堡包菜单

要在平板电脑和手机屏幕上看到导航栏，请将 toggleHamburger 函数作为汉堡包按钮的回调，然后在 links 代码块内调用该函数。

links.forEach((link) =>
  link.addEventListener("click", () => {
    closeDropdownMenu();
    setAriaExpandedFalse();
    toggleHamburger();
  })
);

hamburgerBtn.addEventListener("click", toggleHamburger);

这会切换一个名为 show 的不同 class，控制显示或隐藏导航栏。

下面是最终的输出：

添加更多下拉菜单

你可以添加更多下拉菜单，只需将任何一个列表项替换为按钮和下拉菜单的链接。为了使其发挥作用，请确保你更新以下内容：

• 根据你需要的菜单数量，更新下拉菜单的 ID。例如，第三个菜单的 ID 是 dropdown3
• 按钮的 data-dropdown 值将设置为 dropdown3

下面是一个将 Jobs 链接转换为下拉菜单的例子。

之前：

<li><a class="nav-link" href="/">Jobs</a></li>

之后：

<li>
  <button
    class="nav-link dropdown-btn"
    data-dropdown="dropdown3"
    aria-haspopup="true"
    aria-expanded="false"
    aria-label="jobs"
  >
    Jobs
    <i class="bx bx-chevron-down" aria-hidden="true"></i>
  </button>
  <div id="dropdown3" class="dropdown">
    <ul role="menu">
      <li><span class="dropdown-link-title">Software</span></li>
      <li role="menuitem">
        <a class="dropdown-link" href="#frontend">Frontend</a>
      </li>
      <li role="menuitem">
        <a class="dropdown-link" href="#backend">Backend</a>
      </li>
      <li role="menuitem">
        <a class="dropdown-link" href="#ai-ml">AI/ML</a>
      </li>
      <li role="menuitem">
        <a class="dropdown-link" href="#mobile-dev">Mobile Development</a>
      </li>
    </ul>
    <ul role="menu">
      <li>
        <span class="dropdown-link-title">Others</span>
      </li>
      <li role="menuitem">
        <a class="dropdown-link" href="#ui-ux">UI/UX</a>
      </li>
      <li role="menuitem">
        <a class="dropdown-link" href="#writing">Technical Writing</a>
      </li>
    </ul>
  </div>
</li>

这是最终的结果：

按照这个过程，你可以添加你想要的下拉菜单。

就这样，你用 HTML、CSS 和 JavaScript 成功地创建了一个带有下拉菜单的响应式导航栏。你还学会了如何使用包括 aria-expanded 属性在内的几个 aria 属性来使菜单可访问。

下面是测试这个导航栏运行情况的 CodePen 文件：

这是 GitHub 的代码链接。

总结

我真诚地希望你觉得这篇文章有趣或有用。如果你这么想，请与你的朋友分享它或订阅我的博客，这样你就不会错过任何未来的文章。感谢阅读。

GitHub | Twitter | Blog | LinkedIn