15 个 JavaScript 技巧：简化代码的最佳实践

本文由 Ryan Thelin 撰写，最初发表于Educative。

好了，你已经掌握了 JavaScript 的编写方法，但如何将实践转化为实际问题的解决方案呢？如何修改你的 JS 代码，使其更简洁易读？如果你在团队中工作，编写简洁的代码至关重要。因为你不是在真空中工作，所以你的程序必须易于团队成员理解。每个人都喜欢简洁的代码！学习如何让JavaScript尽可能轻松是一项宝贵的技能，一定会让你成为办公室里的宠儿。

让我们来看看 15 条最佳实践技巧，它们能帮助你简化 JavaScript，让其他开发者更容易理解。以下是我们将要介绍的内容。

在顶部声明并初始化变量
构建模块化、专业化的功能
识别并删除重复代码
经常注释你的代码
谨防过度使用递归
高效地进行 DOM 操作
尽一切努力避免全局变量
使用简写符号（对象文字）

使用严格模式捕获静默错误
设置默认值
使用模板字面量来组合字符串
解决存在性测试includes
使用错误值来缩短条件
通过继承共享方法
使用数组方法编写更短的循环
总结和资源

正在寻找简化代码的高级指南？不妨查看我们的课程《简化 JavaScript》，进行实践练习。

1. 在顶部声明并初始化变量

没有什么比声明过晚更影响代码的可读性了。就像在开始工作之前准备好所有工具一样，在深入函数细节之前声明所有变量也更简单。这样，如果我们以后需要调整任何名称或值，就能轻松访问。

谈到变量，最佳做法是在创建时初始化变量，以便您和您的团队可以确保没有遗漏任何变量undefined。

<script>
var x = 5;
</script>

2. 构建模块化、专业化的功能

为了提高效率和可读性，一个函数不应该包办所有事情。相反，在设计函数时，应该考虑它应该完成的单个任务，并编写一个只完成该任务的函数。函数的命名要与该任务相匹配。

这使得代码更容易被其他人阅读。如果只针对一项任务，该函数本身会更简单，占用空间更小。此外，它还允许您和您的团队在以后需要时将此函数迁移到另一个程序中。即使只传递变量名和函数标题，我们也能在下面的第二个版本中更清楚地了解在哪里可以找到某些任务。

function table (columns, rows, item){
creates table and searches it for the passed item
}

// compared to

function createTable (columns, rows){
//creates table
}

function searchTable (table.length, item) {
//searches table for the passed item
}

3.识别并删除重复代码

与上一个示例类似，您应该留意代码中是否存在相同的重复代码行。在这种情况下，您应该将重复的代码移到一个函数中，并在所有之前使用过该函数的实例中调用该函数。这可以减少视觉混乱，并有助于后续调试，因为团队只需查看一个函数，而不是查看其多个使用部分。

<script>
var x = 5;
var y = 6;
var x = x*2
var y = y*2
</script>

<script>
var x = 5;
var y = 6;

function double (value){
return value*2;
}
double (x);
double(y);
</script>

4. 经常注释你的代码

注释是总结代码片段用途的绝佳方式，可以节省其他开发人员自行判断的时间。如果代码未完成注释中指定的任务，注释还能帮助他们发现可能的错误。通常情况下，最好为每个函数都添加一条注释。如果您不确定是否应该添加注释，那就直接添加吧！如果注释过于杂乱，以后随时可以删除。

//declares and initializes var x
<script>
var x = 5;
</script>

5. 谨防过度使用递归

注意不要嵌套过多的递归函数。虽然嵌套能够解决很多问题，但众所周知，它很难一眼看懂。
为了避免混淆，请留意在何处可以不显著增加运行时开销的情况下将递归函数从嵌套位置中分离出来，并尽可能这样做。如果函数嵌套超过 3 层，你的其他开发人员很可能会难以理解。


function1 (a,b){
  function2{
    function3{
    //this is too hard to follow and can likely be solved another way
    }
  }
}
</script>

6. 高效地进行 DOM 操作

访问 DOM 对于充分利用程序至关重要，但反复访问 DOM 会造成视觉混乱，并降低程序速度。建议您只访问一次 DOM，然后将其缓存在变量中以供后续使用。这样，您就可以访问该变量，而不是直接访问 DOM。这种方式在视觉上更简洁，也更高效。

注意：引用 DOM 变量时，标准做法是使用来表示$。

function accountInfo(){
var email = $("#accounts").find(".email").val();
var accountNumber = $("#accounts").find(".accountNumber").val();
}

// Contents cached to variable "accounts"

function accountInfo(){ var $accounts = $("#accounts"); 
var name = $accounts.find(".email").val(); 
var age = $accounts.find(".accountNumber").val();
}

7. 尽量避免使用全局变量

在 JavaScript 中，变量具有其使用范围，可以是全局的，也可以是局部的。
这些范围决定了这些变量在代码中定义或访问的位置。
全局变量可以在程序中的任何位置定义，并且存在于函数之外。
局部变量仅在其定义的函数内可见。

如果存在同名的局部变量和全局变量，JavaScript 将优先使用局部变量，而忽略全局变量。
仍然应避免使用全局变量，因为它们可能会意外覆盖窗口变量，从而导致错误。此外，过多的全局变量会降低程序速度，因为它们直到窗口关闭才会被删除，而局部变量则会在函数执行完成后被删除。

<html>
      <script>
            var myVar = "my global variable"; // This variable is declared as global
            function localVariable( ) {
               var myVar = "my local variable";  // This is a locally declared variable
      </script>
   </body>
</html>

8. 使用简写符号（对象字面量）

在 JavaScript 中设计对象或数组时，可以通过选择简写符号来节省行空间。这可以通过在声明期间（而不是声明之后）设置对象或数组的属性或单元格来实现。这样就无需在每一行中识别要设置的对象或数组，从而使该部分更易于阅读。虽然这看起来像是一个小小的改变，但随着对象和数组变得越来越复杂，它可以为您的团队减轻大量的视觉疲劳。

普通对象：

var computer = new Object();
    computer.caseColor = 'black';
    computer.brand = 'Dell';
    computer.value = 1200;
    computer.onSale = true;

速记对象：

var computer = {
    caseColor: 'black';
    brand: 'Dell';
    value: 1200;
    onSale: true;
}

速记数组：

var computerBrands = [
'Dell',
'Apple',
'Lenovo',
'HP',
'Toshiba',
'Sony'
];

9. 使用严格模式捕获静默错误

与 C++ 和 Java 等其他硬编码语言相比，JavaScript 是一种非常宽容的语言。虽然这种宽容有助于代码正常运行而不抛出错误，但这种宽容可能会导致静默错误，这些错误无需纠正即可通过。如果 JavaScript 可以通过多种方式解决静默错误，这还可能导致行为不一致。

要绕过此问题，请选择“严格模式”。此设置有两个主要变化：

以前可以通过编译器的静默错误现在会引发错误，从而使您可以在代码到达团队成员之前对其进行微调。
修复阻止 JavaScript 优化代码的错误
JavaScript 严格代码程序通常比“草率”的程序运行得更快

要选择严格模式，'use strict';请在脚本部分的顶部添加该行（如果您希望整个部分都严格）或在所需功能之前添加该行（如果只有某些部分应该是严格的）。

10.设置默认值

创建对象时，您可以为对象的部分或全部属性设置默认值。这样做可以确保每个属性的值不会出现问题undefined。它还能说明该属性所需的数据类型。此外，通过不为某些属性设置默认值，您可以告知团队，这些值并非对象正常运行所必需的。

function logProperty({
    address = '111 11th Street, 11111', 
    unit,   //optional
    landlord = 'Sara', 
    tenant = 'Raj', 
    rent = 500, 
})

上图中，并非所有属性都包含单位编号，但所有属性都包含其他四个属性，这些属性会填充预期的数据类型。为了演示这一点，我们将其unit留空。

继续学习。

学习如何编写简洁的 JavaScript 代码，无需费力浏览视频或文档。Pragmatic Programmers 为 JS 程序员整理了 51 条实用技巧。Educative 的文本课程易于浏览，并配有实时编程环境，让学习变得快速高效。
《简化 JavaScript：软件工程师实用指南》

11. 使用模板字面量来组合字符串

将字符串组合在一起很麻烦，尤其是在组合字符串和变量时。为了简化此过程，可以使用模板字面量（以反引号标记），它同时接受字符串和变量。

function greet(name) {
    return `Hi, ${name}`; //template literal
}
console.log(greet('Leo'));

请注意，通过使用模板字面量，我们可以根据传递给我们的名称，结合字符串Hi,和传递的变量的值，向任何用户记录问候语name。
因此，此代码将打印：
Hi, Leo

12. 解决存在性测试`includes`

测试数组中某个值是否存在是一个常见问题。幸好，JavaScript 提供了一个特殊的数组方法，includes()如果数组包含搜索的值，它将返回布尔值。与搜索数组相比，此方法提供了一种高效且易于理解的解决方案。

const sections = ['contact', 'shipping'];

function displayShipping(sections) {
    return sections.includes('shipping');
}

console.log(displayShipping(sections));

在《实用程序员》的完整课程中，您还将学习如何使用该indexOf()方法来检查值并查找其索引！

13. 使用假值缩短条件

false在 JavaScript 中，许多值在多种类型的变量中是等效的。其中包括：

布尔值false
null
0
NaN（不是数字）
' '
" "

在 JavaScript 中，“等效”==表示两个对象具有相同的值，但它们的类型可能不同。“相同”===表示两个对象具有相同的类型和相同的值。
但这有什么用呢？

好吧，与其创建单独的变量来保存布尔值，不如使用上述值作为默认值，false以便在没有覆盖的情况下进行报告。考虑这个例子，您需要检查给定员工是否接受过设备培训（equipmentTraining）。这台机器只需要最低级别的培训，培训级别并不重要。

因此，我们的if语句会检查equipmentTrainingdefault 是否仍然为假值' '。如果是，if则执行该语句并返回该员工未被授权。如果equipmentTrainingdefault 包含除 default 之外的任何字符串，则该语句将具有真值，因此不会执行该if语句。

const employee = {
    name: 'Eric',
    equipmentTraining: '',
}

if (!employee.equipmentTraining) {
    console.log('Not authorized to operate machinery');
}

14.通过继承共享方法

继承是指在类之间共享属性或方法的一种方式。使用super标签允许中的构造函数FlashCoupon访问中的父类构造函数Coupon。这样，您只需在父类中定义一次方法，即可增强代码的可读性。由于继承类可以针对特定任务进行专门化，这使得代码更加模块化。

请注意，顶部代码框建立了一个父类，Coupon其属性和方法是共享的，FlashCoupon如通过在其最后一行FlashCoupon调用方法所示。getExpirationMessage

class Coupon {
  constructor(price, expiration) {
    this.price = price;
    this.expiration = expiration || 'Two Weeks';
  }
  getExpirationMessage() {
    return `This offer expires in ${this.expiration}`;
  }
}
export default Coupon;

import Coupon from './extend';

class FlashCoupon extends Coupon {
    constructor(price, expiration) {
        super(price);
        this.expiration = expiration || 'two hours';
    }
}

const flash = new FlashCoupon(10);
console.log(flash.getExpirationMessage());

15. 使用数组方法编写更短的循环

最后一个技巧是深入探讨数组优化的复杂性。循环是创建和填充数组的常用方法。然而，循环会造成代码混乱，并且由于代码量较大，难以阅读。您可以使用数组方法来实现与for循环类似的效果，但代码量要小得多。
以下for循环为例。

const prices = ['1.0', 'negotiable', '2.15'];

const formattedPrices = [];
for (let i = 0; i < prices.length; i++) {
    const price = parseFloat(prices[i]);
    if (price) {
        formattedPrices.push(price);
    }
}
console.log(formattedPrices);

除了上面的代码，我们可以使用以下三行map代码来实现相同的效果。此方法创建一个大小相同的数组，该数组仅包含prices属性。然后，我们使用来获取该价格的浮点值parseFloat。

const prices = ['1.0', '2.15'];
const formattedPrices = prices.map(price => parseFloat(price));
console.log(formattedPrices)

总结和资源

追求更简洁的代码是一个持续的过程，因为最佳实践会随着语言的不断发展而演变。这个过程是软件开发的乐趣之一，而学习最佳实践则能真正体现出对一门编程语言的精通。

想要快速学习简化 JavaScript 代码的最佳实践和技巧，不妨看看 Pragmatic Programmer 的课程《简化 JavaScript：软件工程师实用指南》。课程结束后，你将成为一名高效的现代 JavaScript 开发人员。

其他 JavaScript 资源

文章来源：https://dev.to/educative/15-javascript-tips-best-practices-to-simplify-your-code-35d9

15 个 JavaScript 技巧：简化代码的最佳实践

15 个 JavaScript 技巧：简化代码的最佳实践

1. 在顶部声明并初始化变量

2. 构建模块化、专业化的功能

3.识别并删除重复代码

4. 经常注释你的代码

5. 谨防过度使用递归

6. 高效地进行 DOM 操作

7. 尽量避免使用全局变量

8. 使用简写符号（对象字面量）

9. 使用严格模式捕获静默错误

10.设置默认值

继续学习。

11. 使用模板字面量来组合字符串

12. 解决存在性测试includes

13. 使用假值缩短条件

14.通过继承共享方法

15. 使用数组方法编写更短的循环

总结和资源

其他 JavaScript 资源

12. 解决存在性测试`includes`