在 JavaScript 正确处理变量

变量无处不在。即使咱们写一个小函数或一个小工具，也要声明、赋值和读取变量。加强对变量的重视，能够提升代码的可读性和可维护性。

1.建议使用 const，要么使用 let

用 const 或 let 声明本身的 JavaScript 变量。二者之间的主要区别是 const 变量在声明时须要初始化，而且一旦初始化就没法再从新赋值。

// const 须要初始化
const pi = 3.14;
// const 不能被从新赋值
pi = 4.89; 
// throws "TypeError: Assignment to constant variable"
复制代码

let 声明不须要对值初始化，能够屡次从新赋值。

// let 要不要初始化随你
let result;
// let 可被从新赋值
result = 14;
result = result * 2;
复制代码

const 是一次性分配变量。由于你知道 const 变量不会被修改，因此与 let 相比，对 const 变量的推测比较容易。

声明变量时优先使用 const，而后是 let 。

假设你正在 review 一个函数，并看到一个 const result = ... 声明：

function myBigFunction(param1, param2) {
  /* 一写代码... */

  const result = otherFunction(param1);
  /* 一些代码... */
  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. 易于使用

我老是习惯于在函数开始的时候去声明全部变量，尤为是在写一些比较大的函数时。可是这样作会使我在函数中使用变量的意图变得很是混乱。

因此应该在变量声明时应该尽量靠的近使用位置。这样你就没必要去猜：哦，这里声明了变量，可是…它被用在什么地方呢？

假设有一个函数，在函数有包含不少语句。你能够在函数的开头声明并初始化变量 result，可是只在 return 语句中使用了 result：

function myBigFunction(param1, param2) {
  const result = otherFunction(param1);  
  let something;

  /* * 一些代码... */

  return something + result;}
复制代码

问题在于 result 变量在开头声明，却只在结尾用到。咱们并无充分的理由在开始的时后就声明这个变量。

因此为了更好地理解 result 变量的功能和做用，要始终使变量声明尽量的靠近使用它位置。

若是把代码改为这样：

function myBigFunction(param1, param2) {
  let something;

  /* * 一些代码... */

  const result = otherFunction(param1);  
  return something + 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;
}
复制代码

没有中间变量的解释，这个版本稍微不太好理解。

经过使用中间变量用代码解释代码。中间变量可能会增长一些语句，但出于加强代码可读性的目的仍是很是值得的的。

总结

• 变量无处不在。在 JavaScript 中使用变量时，首选 const，其次是 let。

• 尽量缩小变量的做用域。一样，声明变量时要尽量靠近其使用位置。

• 合理的命名是很是重要的。要遵循如下规则：变量名称应该清楚无误地代表是用来保存哪些数据的。不要惧怕使用更长的变量名：要追求清晰而不是简短。

• 最后，最好用代码本身来解释代码。在高度复杂的地方，我更喜欢引入中间变量。

若是个人文章对你有帮助的话，请你为我投票，很是感谢🙏

投票地址