关于javascript:在-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。
• 尽可能放大变量的作用域。同样，申明变量时要尽可能凑近其应用地位。
• 正当的命名是十分重要的。要遵循以下规定：变量名称应该分明无误地表明是用来保留哪些数据的。不要胆怯应用更长的变量名：要谋求清晰而不是简短。
• 最初，最好用代码本人来解释代码。在高度简单的中央，我更喜爱引入两头变量。

本文首发微信公众号：前端先锋

欢送扫描二维码关注公众号，每天都给你推送陈腐的前端技术文章

欢送持续浏览本专栏其它高赞文章：

• 深刻了解 Shadow DOM v1
• 一步步教你用 WebVR 实现虚拟现实游戏
• 13 个帮你进步开发效率的古代 CSS 框架
• 疾速上手 BootstrapVue
• JavaScript 引擎是如何工作的？从调用栈到 Promise 你须要晓得的所有
• WebSocket 实战：在 Node 和 React 之间进行实时通信
• 对于 Git 的 20 个面试题
• 深刻解析 Node.js 的 console.log
• Node.js 到底是什么？
• 30 分钟用 Node.js 构建一个 API 服务器
• Javascript 的对象拷贝
• 程序员 30 岁前月薪达不到 30K，该何去何从
• 14 个最好的 JavaScript 数据可视化库
• 8 个给前端的顶级 VS Code 扩大插件
• Node.js 多线程齐全指南
• 把 HTML 转成 PDF 的 4 个计划及实现

• 更多文章 …