本文已经原作者Shadeed 授权翻译。
变量无处不在，即使我们在写一个小的函数，或者一个应用程序:我们总是先声明，分配和使用变量。编写好的变量可提高代码的可读性和易维护性。
在本文中，主要介绍 5种有关在 JavaScript 中声明和使用变量的最佳做法。
1.首选 const，再 let
我使用const或let声明变量，两者之间的主要区别是const变量需要一个初始值，并且一旦初始化就无法重新分配其值。
另一方面，let声明不需要初始值，我们可以多次重新分配其值。
// const 需要初始化
const pi = 3.14;
// 不能重新分配const
pi = 4.89; // throws "TypeError: Assignment to constant variable"
- 1.
- 2.
- 3.
- 4.
另一方面，let声明不需要初始值，我们可以多次重新分配其值。
// let 初始化是可选的
let result;
// let can be reassigned
result = 14;
result = result * 2;
- 1.
- 2.
- 3.
- 4.
- 5.
选择变量的声明类型时的一个好习惯是首选const，否则使用let。
function myBigFunction(param1, param2) {
/* lots of stuff... */
const result = otherFunction(param1);
/* lots of stuff... */
return something;
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
例如，如果我们正在查看函数体，并看到const result = ...声明：
function myBigFunction(param1, param2) {
/* lots of stuff... */
const result = otherFunction(param1);
/* lots of stuff... */
return something;
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
不知道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
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
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;
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
现在，middle和middleItem变量仅存在于使用变量的作用域。他们的生命周期和生命周期极短，因此更容易推断其作用。
3.在接近位置声明变量
我强烈希望在函数主体的顶部声明所有变量，尤其是在函数较大的情况下。不幸的是，这种做法的缺点是使我在函数中使用的意图变量变得混乱。
尽量在接近使用位置的地方声明变量。这样，我们就不用猜了:嘿，我看到了这里声明的变量，但是它在哪里被使用了。
假设我们有一个函数，该函数的主体中包含很多语句。我们可以在函数的开头声明并初始化变量结果，但是只能在return语句中使用result：
function myBigFunction(param1, param2) {
const result = otherFunction(param1);
let something;
/*
* calculate something...
*/
return something + result;
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
问题在于result 变量在开头声明，但仅在结尾使用，没有足够的理由在开始时声明该变量。
让我们通过将result 变量声明移到return语句之前来改进这个函数
function myBigFunction(param1, param2) {
let something;
/*
* calculate something...
*/
const result = otherFunction(param1);
return something + result;
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
现在，result变量在函数中有了它的正确位置。
4.好的命名意味着易于阅读
从良好的变量命名的众多规则中，我区分出两个重要的规则。
第一个很简单：使用驼峰命名为变量取名，并且在命名所有变量时保持一致。
const message = 'Hello';
const isLoading = true;
let count
- 1.
- 2.
- 3.
有特殊含义的数字或字符串，变量命名通常是大写的，在单词之间加下划线，以区别于常规变量
const SECONDS_IN_MINUTE = 60;
const GRAPHQL_URI = 'http://site.com/graphql';
- 1.
- 2.
第二条规则，在变量命名中，我认为这是最重要的：变量名称应明确无歧义地指出哪些数据保存了该变量。
以下是一些很好的变量命名示例：
let message = 'Hello';
let isLoading = true;
let count;
- 1.
- 2.
- 3.
message 名称表示此变量包含某种消息，很可能是字符串。
isLoading相同，布尔值指示加载是否在进行中。
count变量表示保存一些计数结果的数字类型变量。
选择一个明确表明其角色的变量名。
举个例子，这样就能看出区别了。假设看到了这样一个函数:
function salary(ws, r) {
let t = 0;
for (w of ws) {
t += w * r;
}
return t;
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
你能总结出这个函数的作用吗?像ws、r、t、w这样的变量名几乎没有说明它们的意图。
相反，相同的函数，但使用了解释性变量命名
function calculateTotalSalary(weeksHours, ratePerHour) {
let totalSalary = 0;
for (const weekHours of weeksHours) {
const weeklySalary = weekHours * ratePerHour;
totalSalary += weeklySalary;
}
return totalSalary;
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
该代码清楚地说明了它的作用。这就是良好命名的力量。
5. 引入中间变量
我比较少注释代码。我更喜欢编写代码即解释的风格，通过对变量、属性、函数和类的良好命名来表达意图。
编写自文档代码的一个好习惯是引入中间变量。在处理长表达式时很有用。
考虑以下表达式：
const sum = val1 * val2 + val3 / val4;
- 1.
我们引入两个中间变量，增强长表达式的可读性:
const multiplication = val1 * val2;
const division = val3 / val4;
const sum = multiplication + division;
- 1.
- 2.
- 3.
- 4.
另外，让我们回顾一下二进制搜索实现算法：
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;
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
这里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;
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
这个版本，没有解释变量，可读性就比较差。
6. 总结
变量无处不在，我们总是先声明，分配和使用变量。
在 JS 中使用变量时，第一个好的做法是使用const，否则使用let
试着保持变量的作用域尽可能小。同样，将变量声明往尽可能靠近使用位置。
不要低估好的命名的重要性。始终遵循这样的规则:变量名应该清晰而明确地表示保存变量的数据。不要害怕使用较长的名字:最好是清晰而不是简洁。
最后，少使用注释，多写写代码即的效果 。在高度复杂的地方，我更喜欢引入中间变量。
作者：Shadeed 译者：前端小智 来源：dmitripavlutin原文：https://dmitripavlutin.com/javascript-variables-practices/
本文转载自微信公众号「大迁世界」，可以通过以下二维码关注。转载本文请联系大迁世界公众号。
