创建良好的JavaScript变量的7种做法

![30-08-21-7-practices-to-create-good-javascript-variables-blog.jpg](http://www.guobacai.com/usr/uploads/2021/11/832540054.jpg)
作为一名开发人员，你每天都在与变量打交道。关于变量的一个有趣的事情是，它们可以有很大的影响。它们可以使你的工作变得更容易或更难。这篇文章将向你展示七种做法，它们将帮助你创建良好的JavaScript变量，使你的工作更容易。

## 使用有意义的、不言自明的变量名
这是其中一个非常容易和快速实现的做法，但也经常被忽视。这是不幸的，因为这种简单的做法可以产生很大的影响。它可以帮助使代码更干净，更容易扫描。它可以为开发者节省大量的时间。想一想吧。

当你为变量使用有意义的、不言自明的名字时，你需要更少的时间来记住这个东西的作用。当你以后回到那段代码时，你不必再去想那东西是做什么的，或者它应该用来做什么。你读了这个名字，一切都会立刻变得有意义。

是的，使用一些刚刚想到的缩写或占位符名称会更容易。然而，当你命名这个变量时，你节省的时间将在以后你试图弄清楚这个东西的作用时被消耗掉。比起想出有意义的、不言自明的名字，要花更多的时间来理解这个神秘的名字。
```
// Before:
const flb = fs.readFileSync('/foo/bar/bills.txt', 'utf8')
const cdt = new Date()
const cy = cd.getYear()
const cm = cd.getMonth()
const cd = cd.getDay()
const anms = ['dog', 'cat', 'bear', 'wolf', 'lion']
const clgs = ['Jack', 'Drake', 'Jill']

// After:
const fileWithBills = fs.readFileSync('/foo/bar/bills.txt', 'utf8')
const currentDate = new Date()
const currentYear = cd.getYear()
const currentMonth = cd.getMonth()
const currentDay = cd.getDay()
const animals = ['dog', 'cat', 'bear', 'wolf', 'lion']
const colleagues = ['Jack', 'Drake', 'Jill']
```

这种做法还有一个好处。你的代码将变得更容易搜索。当你想找带票据的文件的变量时，搜索 "fileWithBills "或 "bills "比搜索 "fl"、"flb"、"bls "或当时首先想到的任何东西更容易。下次你想为一个变量命名时，考虑一下这个时间的节省/浪费。

## 保持变量的局部性
当你声明变量时，通常最好将它们保持在本地。这将帮助你避免意外的碰撞。最重要的是，它可以帮助你避免用那些可能在某些时候变得多余的变量来污染全局命名空间。所以，尽量避免默认将变量声明为全局变量。

相反，在你想使用它们的同一范围内声明你的变量。如果你想在一个特定的函数中使用某个变量，请在该函数中声明它，而不是作为全局变量。这并不适用于你想在多个地方使用某个变量的情况。

当这种情况发生时，将该变量定义为全局变量就可以了，这样你就可以从任何范围引用它。

```
// Before (global variable):
const users = ['joejoe', 'steph', 'phill']

function someFunctionUsingUsers() {
  // Do something with data in "users" variable...
}

// After (local variable):
function someFunctionUsingUsers() {
  // Make "users" variable local:
  const users = ['joejoe', 'steph', 'phill']

// Do something with data in "users" variable...
}

// Variable is used across codebase:
// Keep "users" variable global:
const users = ['joejoe', 'steph', 'phill']

function someFunctionUsingUsers() {
  // Do something with data in "users" variable...
}

function anotherFunctionUsingUsers() {
  // Do something with data in "users" variable...
}

function yetAnotherFunctionUsingUsers() {
  // Do something with data in "users" variable...
}
```
## 优先使用let和const而不是var
在声明JavaScript变量时，最好使用let和const变量。这两个变量在吊装时不被初始化。而var被吊起，有时会导致问题。
```
// var:
console.log(pet)
// Output:
// undefined

var pet
pet = 'turtle'

// let and const:
console.log(pet)
// Output:
// ReferenceError: Cannot access 'pet' before initialization

let pet
pet = 'armadillo'
```
与var不同，let和const也是块范围内的变量。当你在某个代码块中声明它们时，它们将是可见的，并且只能在那里访问。这意味着在一个代码块内声明的let和const变量不会与在该代码块外声明的同名变量发生冲突。

通过代码块，我们也在谈论用if...else语句和循环创建的代码块。这并不适用于var变量。var变量不是代码块范围的。它只在两个范围内工作，全局和局部（函数范围）。在非函数体的块状代码中声明var变量，或在其内部声明，将导致全局变量。

默认情况下，这个变量在任何地方都是可见的，并且可以与其他变量发生冲突。
```
// Before with var:
// Create global var variable:
var name = 'Jack'

if (true) {
  // Create var variable in if...else block
  // with the same name as the global variable:
  var name = 'Tobias'
}

// Log the value of global "name" variable:
console.log(name)
// Output:
// 'Tobias'

// After with let (and also const):
// Create global let variable:
let name = 'Victoria'

if (true) {
  // Create let variable in if...else block
  // with the same name as the global variable:
  let name = 'Susan'
}

// Log the value of global "name" variable:
console.log(name)
// Output:
// 'Victoria'
```

## 每项任务使用一个let和const
这种做法似乎影响较小，但它仍然可以使你的工作至少轻松一些。每个赋值使用一个let和const有两个原因。第一个原因是，每个赋值使用一个let和const，可以让你用调试器（在开发工具中）逐步完成每个声明。

这可以使你更容易处理代码和调试潜在的问题。第二个原因是为了避免逗号（,）与分号（;）的意外互换，以及相反的情况。这可能发生在你写代码的时候，也可能发生在你读代码的时候。好吧，尤其是在阅读时。很容易混淆,和;。

```
/ Before (let/const and multiple assignments):
const name = 'Tommy'
age = 32
career = 'DevOps engineer'
skills = ['git', 'docker', 'kubernetes', 'JavaScript', 'serverless']

// After (let/const and one assignment):
const name = 'Tommy'
const age = 32
const career = 'DevOps engineer'
const skills = ['git', 'docker', 'kubernetes', 'JavaScript', 'serverless']
```

## 在声明变量时对其进行初始化
有两个原因可以说明为什么在声明JavaScript变量时对它们进行初始化比较好。第一个原因是，当某些变量未被定义时，它可以帮助你避免潜在的错误。这种情况有时会发生。在你初始化变量之前，声明一个变量并引用它是非常容易的。

第二个原因是纯粹的实用主义和美学。在你声明变量时初始化它们，可以帮助你使你的代码更短。分开做这两项工作，你需要两行，甚至更多。而同时进行这两项工作只需要一行代码，或者至少比另一种方法少几行。
```
// Before:
// Declare variables:
let name, age, hobbies

// ... and initialize them later:
name = 'Joe'
age = 57
hobbies = ['playing games', 'reading books']

// After:
// Declare and initialize variables:
let name = 'Joe'
let age = 57
let hobbies = ['playing games', 'reading books']
```

## 在顶部声明变量
只要有可能，尽量在当前范围的顶部声明你的JavaScript变量。这有三个目的。首先，它有助于使你的代码更加简洁。当你和其他使用你的代码的人知道所有的变量都被声明在作用域的顶部时，他们就知道在需要的时候去哪里找。

如果没有这种做法，你就必须在代码中寻找一个特定的变量。第二个原因是，它可以帮助你避免在变量被定义之前引用它们。当所有的变量都在顶部声明时，后面的任何东西都可以安全地引用这些变量（如果你用let或const工作的话）。

第三个原因是，它使你更容易避免意外地重新声明现有的变量。在现代IDE和智能感应下，这种情况不太可能发生。然而，这仍然是可能的。当所有的JavaScript变量都在上面时，这种可能性就会降低，你可以快速检查一些名称是否已经被使用。

## 在你使用它们的地方创建变量
这似乎是前面规则的一个例外。可能是这样。然而，特殊情况有时需要特殊的方法。其中一种情况是，当你分配变量时，你想在一个特定的地方使用，因为一件事。在这种情况下，最好是在那个地方或在它附近创建该变量。

这样做将有助于你将相关的代码分组。这种分组将使你的代码更干净，更容易扫描和理解。
```
/ Before:
const stuff = ['mess']

// a lot of code...
// a lot of code...
// a lot of code...
// a lot of code...
// a lot of code...
// a lot of code...
// a lot of code...
// a lot of code...
// a lot of code...

function functionUsingStuff() {
  // Do something with data in "stuff" variable...
}

// After:
// a lot of code...
// a lot of code...
// a lot of code...
// a lot of code...
// a lot of code...
// a lot of code...
// a lot of code...
// a lot of code...
// a lot of code...

const stuff = ['mess']
function functionUsingStuff() {
  // Do something with data in "stuff" variable...
}

// Alternately:
// a lot of code...
// a lot of code...
// a lot of code...
// a lot of code...
// a lot of code...
// a lot of code...
// a lot of code...
// a lot of code...
// a lot of code...

function functionUsingStuff() {
  const stuff = ['mess'] // i.e. keep variables local
  // Do something with data in "stuff" variable...
}
```

## 结论：创建良好的JavaScript变量的7种做法
命名JavaScript变量不一定是一门火箭科学。有一些容易实现的做法会使你的工作更容易。我希望我们讨论的这七条能够帮助你创建好的JavaScript变量，使你的代码更加简洁。

创建良好的JavaScript变量的7种做法

评论已关闭