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

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

点赞再看，微信搜索**【大迁世界】**关注这个没有大厂背景，但有着一股向上积极心态人。本文 GitHub 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变量创建一个作用域。提高变量可读性的一个好习惯是将变量保持在最小作用域内。

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

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

  while(left  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