关于javascript:编写高质量-JS-变量的5种最佳做法

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

点赞再看 ，微信搜寻【大迁世界】 关注这个没有大厂背景，但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588… 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。

最近开源了一个 Vue 组件，还不够欠缺，欢送大家来一起欠缺它，也心愿大家能给个 star 反对一下，谢谢各位了。

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

变量无处不在，即便咱们在写一个小的函数，或者一个应用程序: 咱们总是先申明，调配和应用变量。编写好的变量可进步代码的可读性和易维护性。

在本文中，次要介绍 5 种无关在 JavaScript 中申明和应用变量的最佳做法。

我应用 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 申明。

变量存在于它们所创立的作用域内。代码块和函数体为 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 变量仅存在于应用变量的作用域。他们的生命周期和生命周期极短，因而更容易推断其作用。

我强烈心愿在函数主体的顶部申明所有变量，尤其是在函数较大的状况下。可怜的是，这种做法的毛病是使我在函数中应用的用意变量变得凌乱。

尽量在靠近应用地位的中央申明变量。这样，咱们就不必猜了: 嘿，我看到了这里申明的变量，然而它在哪里被应用了。

假如咱们有一个函数，该函数的主体中蕴含很多语句。咱们能够在函数的结尾申明并初始化变量后果，然而只能在 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变量在函数中有了它的正确地位。

从良好的变量命名的泛滥规定中，我辨别出两个重要的规定。

第一个很简略：应用驼峰命名为变量取名，并且在命名所有变量时保持一致。

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;
}

该代码分明地阐明了它的作用。这就是良好命名的力量。

我比拟少正文代码。我更喜爱编写代码即解释的格调，通过对变量、属性、函数和类的良好命名来表白用意。

编写自文档代码的一个好习惯是引入两头变量。在解决长表达式时很有用。

思考以下表达式：

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;
}

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

变量无处不在，咱们总是先申明，调配和应用变量。

在 JS 中应用变量时，第一个好的做法是应用const，否则应用let

试着放弃变量的作用域尽可能小。同样，将变量申明往尽可能凑近应用地位。

不要低估好的命名的重要性。始终遵循这样的规定: 变量名应该清晰而明确地示意保留变量的数据。不要胆怯应用较长的名字: 最好是清晰而不是简洁。

最初，少应用正文，多写写代码即的成果。在高度简单的中央，我更喜爱引入两头变量。

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

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

文章每周继续更新，能够微信搜寻「大迁世界」第一工夫浏览和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录，整顿了很多我的文档，欢送 Star 和欠缺，大家面试能够参照考点温习，另外关注公众号，后盾回复福利，即可看到福利，你懂的。

关于javascript:编写高质量-JS-变量的5种最佳做法

1. 首选 const，再 let

2. 最小化变量的范畴

3. 在靠近地位申明变量

4. 好的命名意味着易于浏览

5. 引入两头变量

6. 总结

交换