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

作为一名开发人员，你每天都会与变量打交道。变量的一个有趣之处在于它们可以产生巨大的影响。它们可以让你的工作变得轻松，也可以让你的工作变得困难。这篇文章将向你介绍七种实践，帮助你创建优秀的 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 变量，并使你的代码更简洁。

鏂囩珷鏉ユ簮锛�https://dev.to/alexdevero/7-practices-to-create-good-javascript-variables-1a6l