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

做者：Shadeed
译者：前端小智
来源：dmitripavlutin

点赞再看，微信搜索 【大迁世界】关注这个没有大厂背景，但有着一股向上积极心态人。本文 GitHub https://github.com/qq44924588... 上已经收录，文章的已分类，也整理了不少个人文档，和教程资料。

最近开源了一个 Vue 组件，还不够完善，欢迎你们来一块儿完善它，也但愿你们能给个 star 支持一下，谢谢各位了。

github 地址：https://github.com/qq44924588...

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

在本文中，主要介绍 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变量建立一个做用域。提升变量可读性的一个好习惯是将变量保持在最小做用域内。

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

function binarySearch(array, search) {
  let middle;
  let middleItem;
  let left = 0;
  let right = array.length - 1;

  while(left <= right) {
    middle = Math.floor((left + right) / 2);
    middleItem = array[middle];
    if (middleItem === search) { 
      return true; 
    }
    if (middleItem < search) { 
      left = middle + 1; 
    } else {
      right = middle - 1; 
    }
  }
  return false;
}

binarySearch([2, 5, 7, 9], 7); // => true
binarySearch([2, 5, 7, 9], 1); // => false

middle和middleItem变量在函数体的开头声明。所以，这些变量在binarySearch()函数体建立的整个做用域内都是可用的。

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

可是，middle和middleItem变量只在while循环代码块中使用。因此为何不直接在while代码块中声明这些变量呢?

function binarySearch(array, search) {
  let left = 0;
  let right = array.length - 1;

  while(left <= right) {
    const middle = Math.floor((left + right) / 2);
    const middleItem = array[middle];
    if (middleItem === search) {
      return true; 
    }
    if (middleItem < search) {
      left = middle + 1; 
    } else {
      right = middle - 1; 
    }
  }
  return false;
}

如今，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;

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

function binarySearch(array, search) {
  let left = 0;
  let right = array.length - 1;

  while(left <= right) {
    const middle = Math.floor((left + right) / 2);
    const middleItem = array[middle];
    if (middleItem === search) {
      return true; 
    }
    if (middleItem < search) {
      left = middle + 1; 
    } else {
      right = middle - 1; 
    }
  }
  return false;
}

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

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

function binarySearch(array, search) {
  let left = 0;
  let right = array.length - 1;

  while(left <= right) {
    const middle = Math.floor((left + right) / 2);
    if (array[middle] === search) {
      return true; 
    }
    if (array[middle] < search) {
      left = middle + 1; 
    } else {
      right = middle - 1; 
    }
  }
  return false;
}

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

6. 总结

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

在 JS 中使用变量时，第一个好的作法是使用const，不然使用let

试着保持变量的做用域尽量小。一样，将变量声明往尽量靠近使用位置。

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

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

---

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

原文：https://dmitripavlutin.com/ja...

交流

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