写高质量 JS 变量的5种最佳做法

超、凢脫俗 2023-01-02 06:22 127阅读 0赞

> 作者：Shadeed  
> 译者：前端小智  
> 来源：dmitripavlutin

> **点赞再看**，微信搜索\*\*【大迁世界】\*\*关注这个没有大厂背景，但有着一股向上积极心态人。本文 `GitHub` [https://github.com/qq449245884/xiaozhi][https_github.com_qq449245884_xiaozhi] 上已经收录，文章的已分类，也整理了很多我的文档，和教程资料。

最近开源了一个 Vue 组件，还不够完善，欢迎大家来一起完善它，也希望大家能给个 star 支持一下，谢谢各位了。

**github 地址：https://github.com/qq449245884/vue-okr-tree**

变量无处不在，即使我们在写一个小的函数，或者一个应用程序:我们总是先声明，分配和使用变量。编写好的变量可提高代码的可读性和易维护性。

在本文中，主要介绍 5种有关在 JavaScript 中声明和使用变量的最佳做法。

## 1.首选 const，再 let ##

我使用`const`或`let`声明变量，两者之间的主要区别是`const`变量需要一个初始值，并且一旦初始化就无法重新分配其值。

另一方面，`let`声明不需要初始值，我们可以多次重新分配其值。

// const 需要初始化
    const pi = 3.14;
    // 不能重新分配const
    pi = 4.89; // throws "TypeError: Assignment to constant variable"

另一方面，`let`声明不需要初始值，我们可以多次重新分配其值。

// let 初始化是可选的
    let result;
    // let can be reassigned
    result = 14;
    result = result * 2;

选择变量的声明类型时的一个好习惯是首选`const`，否则使用`let`。

function myBigFunction(param1, param2) {
      /* lots of stuff... */
    
      const result = otherFunction(param1);
    
      /* lots of stuff... */
      return something;
    }

例如，如果我们正在查看函数体，并看到`const result = ...`声明：

function myBigFunction(param1, param2) {
      /* lots of stuff... */
    
      const result = otherFunction(param1);
    
      /* lots of stuff... */
      return something;
    }

不知道`myBigFunction()`内部会发生什么， 我们可以得出结论，`result` 变量只分配了一次，声明之后是只读的。

在其他情况下，如果必须在执行过程中多次重新分配变量，则可以使用let声明。

## 2.最小化变量的范围 ##

变量存在于它们所创建的作用域内。代码块和函数体为`const`和`let`变量创建一个作用域。提高变量可读性的一个好习惯是将变量保持在最小作用域内。

例如，以下函数是二进制搜索算法的实现：

`middle`和`middleItem`变量在函数体的开头声明。因此，这些变量在`binarySearch()`函数体创建的整个作用域内都是可用的。

`middle`变量保留二进制搜索的中间索引，而`middleItem`变量保留二进制搜索的中间索引。

但是，`middle`和`middleItem`变量只在`while`循环代码块中使用。所以为什么不直接在`while`代码块中声明这些变量呢?

现在，`middle`和`middleItem`变量仅存在于使用变量的作用域。 他们的生命周期和生命周期极短，因此更容易推断其作用。

## 3.在接近位置声明变量 ##

我强烈希望在函数主体的顶部声明所有变量，尤其是在函数较大的情况下。 不幸的是，这种做法的缺点是使我在函数中使用的意图变量变得混乱。

尽量在接近使用位置的地方声明变量。这样，我们就不用猜了:嘿，我看到了这里声明的变量，但是它在哪里被使用了。

假设我们有一个函数，该函数的主体中包含很多语句。 我们可以在函数的开头声明并初始化变量结果，但是只能在`return`语句中使用`result`：

function myBigFunction(param1, param2) {
      const result = otherFunction(param1);
      let something;
    
      /*
       * calculate something... 
       */
    
      return something + result;
    }

问题在于`result` 变量在开头声明，但仅在结尾使用，没有足够的理由在开始时声明该变量。

让我们通过将`result` 变量声明移到`return`语句之前来改进这个函数

function myBigFunction(param1, param2) {
      let something;
    
      /* 
       * calculate something... 
       */
    
      const result = otherFunction(param1);
      return something + result;
    }

现在，`result`变量在函数中有了它的正确位置。

## 4.好的命名意味着易于阅读 ##

从良好的变量命名的众多规则中，我区分出两个重要的规则。

第一个很简单：使用驼峰命名为变量取名，并且在命名所有变量时保持一致。

const message = 'Hello';
    const isLoading = true;
    let count

有特殊含义的数字或字符串，变量命名通常是大写的，在单词之间加下划线，以区别于常规变量

const SECONDS_IN_MINUTE = 60;
    const GRAPHQL_URI = 'http://site.com/graphql';

第二条规则，在变量命名中，我认为这是最重要的：变量名称应明确无歧义地指出哪些数据保存了该变量。

以下是一些很好的变量命名示例：

let message = 'Hello';
    let isLoading = true;
    let count;

`message` 名称表示此变量包含某种消息，很可能是字符串。

`isLoading`相同，布尔值指示加载是否在进行中。

`count`变量表示保存一些计数结果的数字类型变量。

选择一个明确表明其角色的变量名。

举个例子，这样就能看出区别了。假设看到了这样一个函数:

function salary(ws, r) {
      let t = 0;
      for (w of ws) {
        t += w * r;
      }
      return t;
    }

你能总结出这个函数的作用吗?像`ws`、`r`、`t`、`w`这样的变量名几乎没有说明它们的意图。

相反，相同的函数，但使用了解释性变量命名

function calculateTotalSalary(weeksHours, ratePerHour) {
      let totalSalary = 0;
      for (const weekHours of weeksHours) {
        const weeklySalary = weekHours * ratePerHour;
        totalSalary += weeklySalary;
      }
      return totalSalary;
    }

该代码清楚地说明了它的作用。 这就是良好命名的力量。

## 5. 引入中间变量 ##

我比较少注释代码。我更喜欢编写代码即解释的风格，通过对变量、属性、函数和类的良好命名来表达意图。

编写自文档代码的一个好习惯是引入中间变量。 在处理长表达式时很有用。

考虑以下表达式：

const sum = val1 * val2 + val3 / val4;

我们引入两个中间变量，增强长表达式的可读性:

const multiplication = val1 * val2;
    const division       = val3 / val4;
    
    const sum = multiplication + division;

另外，让我们回顾一下二进制搜索实现算法：

这里`middleItem`是一个保存中间项目的中间变量。 使用中间变量`MiddleItem`而不是直接使用项目访问器`array [middle]`可读性更好。

与缺少`middleItem`解释变量的函数版本进行比较:

这个版本，没有解释变量，可读性就比较差。

## 6. 总结 ##

变量无处不在，我们总是先声明，分配和使用变量。

在 JS 中使用变量时，第一个好的做法是使用`const`，否则使用`let`

试着保持变量的作用域尽可能小。同样，将变量声明往尽可能靠近使用位置。

不要低估好的命名的重要性。始终遵循这样的规则:变量名应该清晰而明确地表示保存变量的数据。不要害怕使用较长的名字:最好是清晰而不是简洁。

最后，少使用注释，多写写代码即的效果 。 在高度复杂的地方，我更喜欢引入中间变量。

--------------------

**代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 [Fundebug][]。**

原文：https://dmitripavlutin.com/javascript-variables-practices/

## 交流 ##

文章每周持续更新，可以微信搜索「 大迁世界 」第一时间阅读和催更（比博客早一到两篇哟），本文 GitHub [https://github.com/qq449245884/xiaozhi][https_github.com_qq449245884_xiaozhi] 已经收录，整理了很多我的文档，欢迎Star和完善，大家面试可以参照考点复习，另外关注公众号，后台回复**福利**，即可看到福利，你懂的。

[https_github.com_qq449245884_xiaozhi]: https://github.com/qq449245884/xiaozhi
[Fundebug]: https://www.fundebug.com/?utm_source=xiaozhi