关于javascript:编写高质量-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;// 不能重新分配constpi = 4.89; // throws "TypeError: Assignment to constant variable"

另一方面，let申明不须要初始值，咱们能够屡次重新分配其值。

// let 初始化是可选的let result;// let can be reassignedresult = 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); // => truebinarySearch([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和欠缺，大家面试能够参照考点温习，另外关注公众号，后盾回复福利，即可看到福利，你懂的。