在提交代码时有哪些注意事项

分享 10 种适合初学者的技术，这些技术将帮助您立即编写更好的代码。因此，如果您准备好将您的编码技能提升到一个新的水平，请继续阅读！

1. 从计划开始

编写更好代码的最佳方法之一是从计划开始。在开始编码之前，请花几分钟时间考虑一下您希望代码执行的操作。

不要只是因为您认为自己知道需要做什么而跳入编写代码。花一些时间真正了解手头的问题。

输入和输出是什么？
预期结果是什么？
从一个到另一个涉及哪些步骤？
您需要哪些数据结构？
是否有任何需要考虑的边缘情况？

在开始编码之前回答这些问题可以帮助您避免在兔子洞中迷路数小时或数天。它让你有机会巩固你对项目如何运作的心理概念化，根据任何明显的神奇思维飞跃来验证它，并开发一组测试用例来检查你的工作。

Wining可能很有趣（而且通常很诱人），但这种方法不需要以狭窄的方式限制你或占用数小时的时间。在你启动编辑器之前，即使是在纸上画出几分钟的图表，也会带来巨大的回报。

清楚地了解需要做什么，使您能够将想法转化为具体的计划。即使你开发的高级程序结构并不完美（让你内心的完美主义者摆脱困境——它不会！），你会发现生成的代码更容易阅读，扩展代码的复杂性更容易管理。

虽然您的代码会更简洁，但如果您发现了一些未知因素并制定了计划，您将真正从节省的无数时间中受益匪浅。这是为解决更高级的问题和发展有益于您和您的职业生涯的技能而获得的无数小时。

制定高级计划的提示

清楚地了解您要解决的问题。
在开始编码之前，请花一些时间考虑一下您希望代码执行哪些操作以解决此问题。
在开始编码之前编写伪代码。伪代码是还不是真正代码的代码。它对于勾勒出代码的结构很有用，而不会陷入细节的泥潭。
绘制图表。可视化问题可以帮助您更好地了解需要做什么以及不同的部分如何组合在一起。
检查您的工作。一旦你有一个计划，检查它与任何明显的神奇思维飞跃，并确保它是可行的。
使用内联评论来解释您的思维过程。编写代码后，请包含内联注释来解释您正在执行的操作和原因。当您或其他人稍后返回到代码时，这些注释非常有用。如果您正在处理一个可能会让其他人感到困惑的复杂问题，则尤其如此。

2. 编写有意义的变量和函数名称

编写良好的代码的标志之一是易于阅读和理解。使代码易于阅读的一个重要部分是使用有意义的变量和函数名称。

为事物取好名字是很困难的。但这很重要，即使在 Web 开发中也是如此。变量和函数名称通常是人们在尝试理解您的代码时首先要看的东西。

请考虑以下示例：

<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-javascript">let x<span style="color:#c792ea">,</span> y<span style="color:#c792ea">,</span> z<span style="color:#c792ea">;</span>

function <span style="color:#82aaff">f</span><span style="color:#c792ea">(</span><span style="color:#c792ea">)</span> <span style="color:#c792ea">{</span> 

<span style="color:#697098">// function</span>

<span style="color:#c792ea">}</span></code></span></span>

这段代码不是很容易阅读。x、y 和 z 代表什么？f（）有什么作用？

现在考虑这个例子：

<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-javascript">let firstName<span style="color:#c792ea">,</span> lastName<span style="color:#c792ea">;</span>

function <span style="color:#82aaff">printFullName</span><span style="color:#c792ea">(</span>firstName<span style="color:#c792ea">,</span> secondName<span style="color:#c792ea">)</span> <span style="color:#c792ea">{</span> 

<span style="color:#697098">// function</span>

<span style="color:#c792ea">}</span></code></span></span>

此代码更易于阅读。变量名称是信息丰富的，函数名称让我们很好地了解它的作用。

在查看代码时，您也更有可能发现错误。当名称是描述性的时，更容易发现错误 - 例如将错误的变量传递给函数。否则，您必须始终将该变量的含义保存在您的工作记忆中。

很容易记住我们为什么定义变量a，但是在你的工作记忆中保存密码变得势不可挡——早在你定义z之前。这成为一种认知瓶颈，会严重限制您能够管理的复杂性范围。

您还应该采用一致的样式来设置名称的格式。当人们在开发中提到命名约定时，他们通常会谈论使用大写和分隔符来增强可读性的方式。

以下是您在开发中最常看到的命名约定：

骆驼案： 变量名称由一系列单词组成，这些单词连接在一起，除第一个单词外，每个单词都以大写字母开头。示例：firstName， lastName， printFullName（）。驼峰大小写在 JavaScript 中很常见。
帕斯卡案例：帕斯卡大小写类似于骆驼大小写，但第一个单词也是大写的。示例：FirstName， LastName， PrintFullName（）。
蛇案：蛇形大小写使用所有小写字母和下划线来分隔单词。示例：first_name、last_name、print_full_name（）。
烤肉串案例：烤肉串大小写类似于蛇大小写，但使用连字符而不是下划线。示例：名字、姓氏、打印全名（）。

选择命名约定后，保持一致并坚持下去非常重要。

例如，您可能决定对变量名称使用驼峰大小写（firstName），对函数使用蛇大小写（print_full_name（））。在这种情况下，使用不同的约定使得一致性对于可读性尤为重要。您暗示每个命名约定都有其含义。

如果这是随机更改的，则需要解释您的代码的其他人将不得不放慢速度并可能误解它，或者只是不得不放慢速度并应用不必要的更多焦点。

编写清晰变量名称的提示

变量和函数名称应为：

描述。
易于记忆和发音。
与代码中的其他名称一致。

为此，您应该：

使用描述性名称。变量或函数的名称应描述其用途。
避免使用单个字母名称，除非从上下文中含义非常清楚。例如，通常可以将 i 用作 for 循环中的索引，因为这是一个常见的约定。
避免使用幻数。幻数是代码中使用的数字文字，没有明确解释其含义。
确定命名约定，然后坚持下去。
与往常一样，注释您的代码。当一个清晰的名称是不够的，并且您确实需要查看原始函数或变量时，您将能够快速刷新内存。

当您为事物选择名称时，请问自己以下问题：

这个变量或函数有什么用？
它的名字是否描述了它的目的？
我什么时候发音容易记住吗？
它是否与代码中的其他名称一致？

如果您不能轻松回答所有这些问题，那么选择一个不同的名称可能是个好主意。

3. 编写小型模块化函数

函数是程序员工具箱中最强大的工具之一。它们允许您处理一个大问题并将其分解为更小、更易于管理的部分。

较小的函数更易于测试、调试和重用。它们还使您的代码更具可读性，因为每个函数的目的都很明确。

请考虑以下示例：

<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-javascript">function <span style="color:#82aaff">multiplySquaredNumbers</span><span style="color:#c792ea">(</span>x<span style="color:#c792ea">,</span> y<span style="color:#c792ea">)</span> <span style="color:#c792ea">{</span>
  let xSquared <span style="color:#89ddff">=</span> x <span style="color:#89ddff">*</span> x<span style="color:#c792ea">;</span>
  let ySquared <span style="color:#89ddff">=</span> y <span style="color:#89ddff">*</span> y<span style="color:#c792ea">;</span>
  return xSquared <span style="color:#89ddff">*</span> ySquared<span style="color:#c792ea">;</span>
<span style="color:#c792ea">}</span>

<span style="color:#ffcb6b">console</span><span style="color:#c792ea">.</span><span style="color:#82aaff">log</span><span style="color:#c792ea">(</span><span style="color:#82aaff">multiplySquaredNumbers</span><span style="color:#c792ea">(</span><span style="color:#f78c6c">5</span><span style="color:#c792ea">,</span> <span style="color:#f78c6c">6</span><span style="color:#c792ea">)</span><span style="color:#c792ea">)</span><span style="color:#c792ea">;</span> <span style="color:#697098">// Output: 360</span></code></span></span>

如您所见，此函数接受两个参数。它声明变量来管理对输入参数进行平方的结果，以便后续行可以对它们进行操作。在这里，这发生在返回行上，当这些变量在单个数字传递回调用方之前相乘时。

我们还有其他方法可以简化此功能，您可能已经发现了。这是其中之一：

<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-javascript">function <span style="color:#82aaff">multiplySquaredNumbers</span><span style="color:#c792ea">(</span>num1<span style="color:#c792ea">,</span> num2<span style="color:#c792ea">)</span> <span style="color:#c792ea">{</span>
    return <span style="color:#ffcb6b">Math</span><span style="color:#c792ea">.</span><span style="color:#82aaff">pow</span><span style="color:#c792ea">(</span>num1<span style="color:#c792ea">,</span> <span style="color:#f78c6c">2</span><span style="color:#c792ea">)</span> <span style="color:#89ddff">*</span> <span style="color:#ffcb6b">Math</span><span style="color:#c792ea">.</span><span style="color:#82aaff">pow</span><span style="color:#c792ea">(</span>num2<span style="color:#c792ea">,</span> <span style="color:#f78c6c">2</span><span style="color:#c792ea">)</span><span style="color:#c792ea">;</span>
<span style="color:#c792ea">}</span>

<span style="color:#ffcb6b">console</span><span style="color:#c792ea">.</span><span style="color:#82aaff">log</span><span style="color:#c792ea">(</span><span style="color:#82aaff">multiplySquaredNumbers</span><span style="color:#c792ea">(</span><span style="color:#f78c6c">2</span><span style="color:#c792ea">,</span> <span style="color:#f78c6c">3</span><span style="color:#c792ea">)</span><span style="color:#c792ea">)</span><span style="color:#c792ea">;</span></code></span></span>

但是为了演示模块化代码的实用性，我们将把数字平方的过程外包给它自己的函数。

<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-javascript">function <span style="color:#82aaff">square</span><span style="color:#c792ea">(</span>x<span style="color:#c792ea">)</span> <span style="color:#c792ea">{</span>
  return x <span style="color:#89ddff">*</span> x<span style="color:#c792ea">;</span>
<span style="color:#c792ea">}</span>

function <span style="color:#82aaff">multiplySquaredNumbers</span><span style="color:#c792ea">(</span>x<span style="color:#c792ea">,</span> y<span style="color:#c792ea">)</span> <span style="color:#c792ea">{</span>
  return <span style="color:#82aaff">square</span><span style="color:#c792ea">(</span>x<span style="color:#c792ea">)</span> <span style="color:#89ddff">*</span> <span style="color:#82aaff">square</span><span style="color:#c792ea">(</span>y<span style="color:#c792ea">)</span><span style="color:#c792ea">;</span>
<span style="color:#c792ea">}</span>

<span style="color:#ffcb6b">console</span><span style="color:#c792ea">.</span><span style="color:#82aaff">log</span><span style="color:#c792ea">(</span><span style="color:#82aaff">multiplySquaredNumbers</span><span style="color:#c792ea">(</span><span style="color:#f78c6c">5</span><span style="color:#c792ea">,</span> <span style="color:#f78c6c">6</span><span style="color:#c792ea">)</span><span style="color:#c792ea">)</span><span style="color:#c792ea">;</span> <span style="color:#697098">// Output: 360</span></code></span></span>

乍一看，很难看出这种方法如何帮助我们编写更好的代码。此示例过于简单（并且依赖于太多的基本运算符），无法减少代码行数。事实上，我们添加了一对。

简洁的代码始终比不必要的冗长代码更受欢迎。但是，除非您要完成代码挑战，否则不要以牺牲健壮、可读的代码为代价来实现它。

重要的是要明白，代码模块化并不是在代码中追求极简主义。这是关于在问题再次出现时从您花在解决问题上的时间中受益。

现在，每当我们想要在未来对一个数字进行平方时，我们将能够使用我们的模函数来完成这项工作，即使我们永远不需要再次将两个平方数相乘。我们已经告诉计算机如何完成这项工作。我们不妨从中受益！

如果我们采用原始示例中的方法，则必须在想要为后续操作对一些数字进行平方时告诉解释器如何进行。

这是一个简单的例子，但它说明了如何使用函数将较大的问题分解为较小的部分。

在Web开发中，您需要反复解决的问题通常更为复杂。例如，您可能需要显示来自 API 调用的数据列表。这涉及获取数据、迭代数据以及动态创建在页面上显示某些数据的元素。

解决这个问题一次就很好，但是如果你需要在每次进行API调用或更新数据列表时都这样做，你将不得不复制大量代码。这将很快变得难以管理，特别是随着可能需要显示此列表的不同位置的数量增加。

相反，您可以创建一个函数，该函数获取一些数据并返回在页面上显示该数据所需的元素。然后，每当需要创建这些元素时，都可以使用适当的数据调用函数。这将使我们能够保持代码干燥并避免重复自己。

编写模块化函数的提示

在编写模块化函数时，您可以遵循一些最佳实践：

通过赋予职能单一责任来保持职能规模较小

当你编写一个函数时，想想它应该做什么，并且只让它这样做。

编写一个大型的、包罗万象的函数，一次性完成所有工作可能很诱人。但这会使您的代码更难推理，并可能导致错误。

通常最好编写几个小函数，每个函数做一件事。这些更易于测试，并且更有可能在代码的不同部分中重用。

以描述性方式命名函数

函数名称应清晰且具有描述性，以便您（和其他开发人员）在阅读代码时可以轻松理解它们的作用。我们已经讨论了命名，但这对于在整个代码库中重复使用的函数尤其重要。

避免副作用

如果函数修改了超出其范围的内容，则称其具有副作用。例如，将数组作为参数并对数组进行排序的函数将被视为具有副作用。

没有副作用的函数称为纯函数。这些通常是首选，因为它们更可预测。

一直避免副作用可能很困难，但在编写函数时要记住这一点。

明智地使用参数

当您决定在函数中包含哪些参数时，请考虑它们是否真的必要。

参数通常用于使函数更灵活，以便可以在不同情况下使用。但是太多的参数会使函数难以理解和使用。

通常，包含较少数量的精心选择的参数比包含大量不太重要的参数更好。

4. 适当使用数据结构

数据结构是组织数据以便可以有效使用数据的方法。有许多不同类型的数据结构，但最常见的是数组和对象。

数组是数据列表。它们可用于存储任何类型的数据，但数组中的每个项目必须具有相同的类型。数组使用方括号声明：

<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-javascript">
const arr <span style="color:#89ddff">=</span> <span style="color:#c792ea">[</span><span style="color:#c3e88d">'a'</span><span style="color:#c792ea">,</span> <span style="color:#c3e88d">'b'</span><span style="color:#c792ea">,</span> <span style="color:#c3e88d">'c'</span><span style="color:#c792ea">]</span><span style="color:#c792ea">;</span>
</code></span></span>

对象是使用键值对组织的数据集合。键用于访问值，这些值可以是任何类型的数据。对象使用大括号声明：

<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-javascript">
const obj <span style="color:#89ddff">=</span> <span style="color:#c792ea">{</span>
  key1<span style="color:#89ddff">:</span> <span style="color:#c3e88d">'value1'</span><span style="color:#c792ea">,</span>
  key2<span style="color:#89ddff">:</span> <span style="color:#c3e88d">'value2'</span><span style="color:#c792ea">,</span>
  key3<span style="color:#89ddff">:</span> <span style="color:#c3e88d">'value3'</span><span style="color:#c792ea">,</span>
<span style="color:#c792ea">}</span><span style="color:#c792ea">;</span>
</code></span></span>

应适当使用数据结构，以使代码更具可读性和效率。例如，如果您有一个需要在页面上显示的数据列表，则使用数组比使用对象更合适。这是因为迭代数组并创建显示数据所需的元素会更容易。

另一方面，如果您有需要在页面上显示的数据集合，但每条数据也有一些关联的元数据，则使用对象比使用数组更合适。这是因为使用密钥访问数据和元数据会更容易。

5. 自由地注释你的代码

注释是未执行的代码行，但可供开发人员为自己或他人留下注释。在 JavaScript 中，注释表示为 // 表示单行注释，/* */ 表示多行注释：

<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-javascript"><span style="color:#697098">// this is a single-line comment</span>

<span style="color:#697098">/*

  this is
  a multi-line
  comment

*/</span></code></span></span>

注释是提高代码可读性的好方法。使用注释来解释您的代码正在做什么以及为什么要这样做。

注释很重要，主要有两个原因：它们可以帮助您记住代码正在做什么，以及它们可以帮助其他人理解您的代码。养成在编写代码时注释代码的习惯很重要。这将帮助您跟踪您的想法，并使其他人更容易理解您的代码。

一个常见的约定是使用 TODO 注释为自己留下关于需要做的事情的笔记：

<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-javascript"><span style="color:#697098">// TODO: Implement login functionality</span></code></span></span>

另一个常见的约定是使用 FIXME 注释为自己留下有关需要修复的事项的注释：

<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-javascript"><span style="color:#697098">// FIXME: This code is not working properly</span></code></span></span>

这是跟踪需要做什么的有用方法，它也使其他人很容易看到需要做什么。

一般来说，当你不确定某事应该做什么，或者你认为可能有更好的方法来做某事时，留下评论是个好主意。注释也通常用于解释复杂或不明显的代码。

请务必记住，注释应该用于提高代码的可读性，而不是使其更难理解。如果您发现自己编写的注释比它正在注释的代码长，则表明您的代码不可读，应该重构。

注释代码的提示

使用注释来解释您的代码正在做什么以及为什么要这样做。
使用评论为自己留下关于需要完成或修复的事情的笔记。
使用注释来解释复杂或不明显的代码。
使用注释来增强可读性代码，而不是作为拐杖。
在编写代码时注释代码。不要等到以后。
不要过度注释您的代码。只评论需要解释的部分。
在评论中使用清晰简洁的语言。
避免使用首字母缩略词或行话。
使用代码使注释保持最新。如果您更改代码，请更改注释。
删除过时的注释。

4. 缩进代码以提高可读性

缩进代码使其更易于阅读，还可以帮助您发现错误。正确缩进代码后，可以更轻松地查看代码的结构以及每个部分的开始和结束位置。这是调试代码和查找错误的有用方法。

在 JavaScript 中，标准缩进是两个空格。在 Python 中，标准缩进是四个空格。在像 Python 这样缩进很重要的语言中，使用错误的缩进可能会导致代码中断。

但即使在像 JavaScript 这样的语言中，缩进纯粹是一个表示问题，与缩进保持一致也很重要。不一致的缩进会使代码更难阅读和理解。

缩进代码的主要原因是提高可读性。但缩进代码也可以帮助您查找错误。如果代码正确缩进，则更容易看到某些内容何时不合适。

例如，查看以下代码示例：

<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-javascript"><span style="color:#697098">// Unindented code</span>

function <span style="color:#82aaff">printHello</span><span style="color:#c792ea">(</span><span style="color:#c792ea">)</span> <span style="color:#c792ea">{</span>
<span style="color:#ffcb6b">console</span><span style="color:#c792ea">.</span><span style="color:#82aaff">log</span><span style="color:#c792ea">(</span><span style="color:#c3e88d">"Hello, world!"</span><span style="color:#c792ea">)</span><span style="color:#c792ea">;</span>
<span style="color:#c792ea">}</span>
<span style="color:#82aaff">printHello</span><span style="color:#c792ea">(</span><span style="color:#c792ea">)</span><span style="color:#c792ea">;</span>

<span style="color:#697098">// Indented code</span>

function <span style="color:#82aaff">printHello</span><span style="color:#c792ea">(</span><span style="color:#c792ea">)</span> <span style="color:#c792ea">{</span>
  <span style="color:#ffcb6b">console</span><span style="color:#c792ea">.</span><span style="color:#82aaff">log</span><span style="color:#c792ea">(</span><span style="color:#c3e88d">"Hello, world!"</span><span style="color:#c792ea">)</span><span style="color:#c792ea">;</span>
<span style="color:#c792ea">}</span>

<span style="color:#82aaff">printHello</span><span style="color:#c792ea">(</span><span style="color:#c792ea">)</span><span style="color:#c792ea">;</span></code></span></span>

在未缩进的代码中，很难看到语句位于函数内部。但在缩进代码中，很明显该语句位于函数内部。这样可以更轻松地发现错误，例如忘记添加大括号。console.log()printHello()console.log()printHello()

缩进代码是一个样式问题，但与缩进保持一致很重要。大多数编程语言都有关于代码应如何缩进的约定，因此最好遵循这些约定。

通常，每当启动新块时，都应缩进代码。块是一起执行的代码段。例如，块可以是函数、if 语句或 for 循环。

6. 使用空格提高可读性

除了缩进代码之外，还可以使用空格来提高其可读性。通过在代码行之间添加额外的间距，可以使代码更易于扫描和理解。这在查看大型代码块时特别有用。

空间本身可以更轻松地跟踪您的阅读位置，就像自然语言的段落一样。但是，当空格将相关的代码行组合在一起时，它最擅长使代码更易于阅读。

通常的做法是在函数的末尾和下一个函数的开头之间放置一个空行。

<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-javascript">function <span style="color:#82aaff">printHello</span><span style="color:#c792ea">(</span><span style="color:#c792ea">)</span> <span style="color:#c792ea">{</span>
       <span style="color:#ffcb6b">console</span><span style="color:#c792ea">.</span><span style="color:#82aaff">log</span><span style="color:#c792ea">(</span><span style="color:#c3e88d">"Hello, world!"</span><span style="color:#c792ea">)</span><span style="color:#c792ea">;</span>
<span style="color:#c792ea">}</span>

function <span style="color:#82aaff">printWelcome</span><span style="color:#c792ea">(</span>name<span style="color:#c792ea">)</span> <span style="color:#c792ea">{</span>
      <span style="color:#ffcb6b">console</span><span style="color:#c792ea">.</span><span style="color:#82aaff">log</span><span style="color:#c792ea">(</span><span style="color:#c3e88d">"Hello, "</span> <span style="color:#89ddff">+</span> name<span style="color:#c792ea">)</span><span style="color:#c792ea">;</span>
<span style="color:#c792ea">}</span></code></span></span>

可以在条件语句的子句之间添加一个空行。

<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-javascript">function <span style="color:#82aaff">printWelcome</span><span style="color:#c792ea">(</span>name<span style="color:#c792ea">)</span> <span style="color:#c792ea">{</span>

if <span style="color:#c792ea">(</span>name <span style="color:#89ddff">===</span> <span style="color:#c3e88d">"John"</span><span style="color:#c792ea">)</span> <span style="color:#c792ea">{</span>
     <span style="color:#82aaff">print</span><span style="color:#c792ea">(</span><span style="color:#c3e88d">"Welcome, John!"</span><span style="color:#c792ea">)</span><span style="color:#c792ea">;</span>
<span style="color:#c792ea">}</span> 

else <span style="color:#c792ea">{</span>
     <span style="color:#82aaff">print</span><span style="color:#c792ea">(</span><span style="color:#c3e88d">"Welcome, stranger!"</span><span style="color:#c792ea">)</span><span style="color:#c792ea">;</span>
<span style="color:#c792ea">}</span></code></span></span>

还可以在声明变量的代码行和使用变量的代码行之间添加一个空行。

<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-javascript"><span style="color:#89ddff"><</span><span style="color:#89ddff">?</span>php
$name <span style="color:#89ddff">=</span> <span style="color:#c3e88d">"John"</span><span style="color:#c792ea">;</span>
$<span style="color:#bfc7d5">location</span> <span style="color:#89ddff">=</span> <span style="color:#c3e88d">"Sydney"</span><span style="color:#c792ea">;</span>

echo <span style="color:#c3e88d">"Welcome to $location, $name!"</span><span style="color:#c792ea">;</span>
<span style="color:#89ddff">?</span><span style="color:#89ddff">></span></code></span></span>

空格和缩进都有其自身的好处，但它们协同工作以创建阐明执行流的视觉层次结构。当您结合使用空格对相关行进行分组和缩进以指示范围时，您的代码及其可读性将受益最大。

7. 使用数组和循环提高效率

数组和循环是基础但功能强大的工具，可以帮助您编写更好的代码。如果你已经开始学习编码，你可能已经知道它们了。

通过使用数组，您可以以有组织的方式存储数据。这可以使您的代码更高效、更易于阅读。另一方面，循环可以帮助您自动执行重复性任务。

一旦您知道如何正确使用它们，它们就可以为您节省大量时间和精力。例如，它们通常可以消除对复杂的嵌套条件块的需求。

嵌套 if 语句很难阅读，因为它们有如此多的代码行，并且在逻辑流中涉及如此多的分支。

下面是嵌套 if 语句的示例：

<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-javascript">if <span style="color:#c792ea">(</span>x <span style="color:#89ddff">></span> <span style="color:#f78c6c">0</span><span style="color:#c792ea">)</span> <span style="color:#c792ea">{</span>
  if <span style="color:#c792ea">(</span>x <span style="color:#89ddff"><</span> <span style="color:#f78c6c">10</span><span style="color:#c792ea">)</span> <span style="color:#c792ea">{</span>
    <span style="color:#82aaff">print</span><span style="color:#c792ea">(</span><span style="color:#c3e88d">"x is between 0 and 10"</span><span style="color:#c792ea">)</span><span style="color:#c792ea">;</span>
  <span style="color:#c792ea">}</span> else <span style="color:#c792ea">{</span>
    <span style="color:#82aaff">print</span><span style="color:#c792ea">(</span><span style="color:#c3e88d">"x is greater than 10"</span><span style="color:#c792ea">)</span><span style="color:#c792ea">;</span>
  <span style="color:#c792ea">}</span>
<span style="color:#c792ea">}</span> else <span style="color:#c792ea">{</span>
  <span style="color:#82aaff">print</span><span style="color:#c792ea">(</span><span style="color:#c3e88d">"x is less than or equal to 0"</span><span style="color:#c792ea">)</span><span style="color:#c792ea">;</span>
<span style="color:#c792ea">}</span></code></span></span>

使用数组和循环可以更清楚地编写相同的逻辑：

<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-javascript">let numbers <span style="color:#89ddff">=</span> <span style="color:#c792ea">[</span><span style="color:#89ddff">-</span><span style="color:#f78c6c">5</span><span style="color:#c792ea">,</span> <span style="color:#f78c6c">0</span><span style="color:#c792ea">,</span> <span style="color:#f78c6c">5</span><span style="color:#c792ea">,</span> <span style="color:#f78c6c">10</span><span style="color:#c792ea">,</span> <span style="color:#f78c6c">15</span><span style="color:#c792ea">]</span><span style="color:#c792ea">;</span>

for <span style="color:#c792ea">(</span>let i <span style="color:#89ddff">=</span> <span style="color:#f78c6c">0</span><span style="color:#c792ea">;</span> i <span style="color:#89ddff"><</span> numbers<span style="color:#c792ea">.</span>length<span style="color:#c792ea">;</span> i<span style="color:#89ddff">++</span><span style="color:#c792ea">)</span> <span style="color:#c792ea">{</span>

  let x <span style="color:#89ddff">=</span> numbers<span style="color:#c792ea">;</span>

  if <span style="color:#c792ea">(</span>x <span style="color:#89ddff">></span> <span style="color:#f78c6c">0</span> <span style="color:#89ddff">&&</span> <span style="color:#89ddff"><</span> <span style="color:#f78c6c">10</span><span style="color:#c792ea">)</span> <span style="color:#c792ea">{</span>
    <span style="color:#ffcb6b">console</span><span style="color:#c792ea">.</span><span style="color:#82aaff">log</span><span style="color:#c792ea">(</span><span style="color:#c3e88d">`</span><span style="color:#c3e88d">x is between 0 and 10</span><span style="color:#c3e88d">`</span><span style="color:#c792ea">)</span><span style="color:#c792ea">;</span>

  <span style="color:#c792ea">}</span> else if  <span style="color:#c792ea">(</span>x <span style="color:#89ddff">></span> <span style="color:#f78c6c">10</span><span style="color:#c792ea">)</span> <span style="color:#c792ea">{</span>
    <span style="color:#ffcb6b">console</span><span style="color:#c792ea">.</span><span style="color:#82aaff">log</span><span style="color:#c792ea">(</span><span style="color:#c3e88d">`</span><span style="color:#c3e88d">x is greater than 10</span><span style="color:#c3e88d">`</span><span style="color:#c792ea">)</span><span style="color:#c792ea">;</span>

  <span style="color:#c792ea">}</span> else <span style="color:#c792ea">{</span>
    <span style="color:#ffcb6b">console</span><span style="color:#c792ea">.</span><span style="color:#82aaff">log</span><span style="color:#c792ea">(</span><span style="color:#c3e88d">`</span><span style="color:#c3e88d">x is less than or equal to 0</span><span style="color:#c3e88d">`</span><span style="color:#c792ea">)</span><span style="color:#c792ea">;</span>
  <span style="color:#c792ea">}</span>
<span style="color:#c792ea">}</span></code></span></span>

此代码更易于阅读，因为它更简洁，逻辑流更线性。for 循环遍历数组的元素，if 语句测试每个元素以查看它是否满足指定的条件。

这通常更有效，因为它消除了对多个条件测试的需求。

8. 尽可能编写自文档代码

自记录代码是易于阅读和理解的代码，无需注释。这种类型的代码的编写方式使其目的明确。

这并不能取代良好的评论习惯，但它确实迫使您牢记高级程序结构。您将生成更易于理解的代码，这些代码更易于维护且不易出错。

有许多方法可以使代码自文档化。我们已经介绍了其中的一些：

使用清晰且具有描述性的变量和函数名称。
编写做一件事并做好的简短函数。
通过使用命名常量来避免幻数（没有明显含义的数字）。
使用空格将代码分隔为逻辑块。
使用清晰一致的编码约定。这使您的代码更易于阅读和理解，即使对于不熟悉您的代码库的人也是如此。

以下是使代码自文档化的其他一些方法：

避免不必要的代码。这包括死代码（不再使用但尚未删除的代码）和声明显而易见的注释。
编写易于测试的代码。这意味着您的代码应该是模块化的，并且具有定义良好的接口。它还应该以一致的方式优雅地处理错误。
保持较小的代码库。这样可以更轻松地找到要查找的内容并了解代码的工作原理。
保持代码井井有条。这意味着使用一致的编码风格和结构，并使用注释来解释复杂的代码。
文档很重要，但自我记录代码更好。它更易于阅读、理解和维护。因此，下次编写代码时，问问自己是否可以做些什么来使其更具自我记录性。

这些只是一些准则。随着您成为更有经验的开发人员，您会发现更多使代码自我记录的方法。

9.不要重复自己（干）

良好编码最重要的原则之一是 DRY 原则：不要重复自己。

这意味着应尽可能避免重复代码。重复的代码更难维护，也更容易出错。

可以使用许多工具来避免代码中的重复。

功能和模块。函数允许您封装要重用的代码，我们之前已经看过了（当我们第一次提到 DRY 原则时）。模块允许您将相关功能组合在一起。
数据结构。数据结构可用于以易于访问和修改的方式存储信息。例如，如果你有一个名称列表，则可以将它们存储在数组中，而不是在整个代码中将它们硬编码为函数调用。
遗产。避免重复的更高级方法是使用继承。这是一种通过让一个类继承另一个类来在类之间共享代码的方法。我们不会在这里详细介绍继承，但只要说它是一个强大的工具，可以帮助您避免重复代码就足够了。
图书馆。最后，您可以使用工具和库来避免重复。有许多开源库可用于执行常见任务。例如，lodash 库提供了广泛的实用程序函数。

DRY 原则是良好编码最重要的原则之一。尽可能避免重复代码非常重要。这样可以节省您的时间，因为您只解决问题一次，并且只需在其他因素更改时更改解决方案的一个实现。

而且，由于当出现问题时，您只需要修复一个实现，因此 DRY 代码更易于维护且不易出错。

编写 DRY 代码的提示

尽可能尝试重用代码，避免重复自己。如果您知道您将在代码中的其他地方再次执行某些操作，则可以在第一次将该代码编写为离散实体，并避免返回重构。
重用代码时，请将其模块化。不要将解决方案复制到新位置。相反，将其移动到适当类型的对象或数据结构中，然后引用它。
当您看到从重写为 DRY 代码中受益的重要机会时，请重构您的代码。这意味着在不更改其功能的情况下重组代码。重构有时可能是一个拖延陷阱，但如果你意识到你将再次需要一个大函数的一部分，这是值得做的。
使用库和框架来避免重新发明轮子。如果你不应该重复自己，你为什么要写代码来解决已经解决的问题？
使用继承在类之间共享代码。
创建文档时遵循 DRY 原则 - 不要不必要地重复信息。
使用清晰的变量和函数名称，并在必要时注释代码。