JavaScript 中的变量声明

简介: JavaScript 中的变量声明

JavaScript 中的变量是一个盒子,里面装有不同的数据,这个盒子有一个名字。一个变量可以包含不同的数据类型。该名称是必填项,因为它有助于稍后找到此框。如果没有名称,将很难找到它,因为盒子可能非常相似,您不能只检查它包含的所有内容。

当您声明一个变量时,除了您使用的是特殊关键字的名称。这些关键字为新创建的变量提供特殊功能,这些变量稍后将在特定情况下使用。这些功能使您能够以不同方式控制变量。

要声明一个变量,您只需写下特殊关键字、变量名、等号和值(如果有的话)。名称就像是内存空间中的位置指示符,我们可以在以后检索。

让我们通过所有变量关键字来了解我们为什么以及如何使用它们。

JavaScript 变量关键字

在 JavaScript 中,我们有 3 个变量关键字 var、let 和 const。

Var 是 JavaScript 中最早的变量声明方式。

网络异常,图片无法展示
|

Let 是 var 的一个新版本和更现代的方式,但是有一些差异,我们将很快讨论这些差异。

网络异常,图片无法展示
|

最后是 const 关键字,它与 let 关键字一样新颖现代。let 和 const 都是现在最常用的。

网络异常,图片无法展示
|

听起来很简单吧?但是,它们之间有很多差异。

JavaScript 关键字之间的区别

1️⃣ 声明

声明变量是我们创建变量时发生的第一件事。它与赋值非常相似,但又不相同。声明一个值就是创建一个这个值的引用供以后使用,赋值就是我们赋值的时候。但这可以同时发生。因此,通过使用 JavaScript 关键字和名称,您可以声明值,并使用等号为它赋值,从而分配一个值——这也称为初始化。

网络异常,图片无法展示
|

当涉及到 var 时,您实际上可以重新声明一个变量。但是当涉及到 let 或 const 时,你不能。所以你可以给一个变量框一些名字,然后使用相同的名称并再次创建另一个具有相同名称的框。但当然,两者不会同时存在,第一个将被覆盖。

但是,let 和 const 不能重新声明。因此,如果您使用 let 或 const 关键字为框命名并尝试使用相同的名称,这是不可能的,JavaScript 将抛出语法错误“...已被声明”。

网络异常,图片无法展示
|

2️⃣ Reassignment

这三个关键字的另一个主要区别是重新分配值的可能性。如果您不能重新声明一个值,并不意味着您不能更改该值,因为它是一个单独的过程。

如果您使用的是 var,则可以随时重新分配该变量的值。如果您确切地知道自己在做什么,并且您明确知道您不会对此变量进行任何更改,那么即使在现代代码中也可以使用 var 关键字,但作为初学者,最好坚持使用 let 和 const。let 关键字与 var 相同,您可以重新分配值。

最后,不能重新赋值的 const 关键字,一旦你赋值给它就不能改变。当您是初学者时,最好始终使用 const 以免意外出错,并且在开始时,您可能会看到赋值错误。使用 const 记住哪个关键字的作用对我帮助很大,因为它是最严格的。如果你作为初学者只使用 var,那么看到任何错误的可能性很小,那样你就不会真正理解为什么你的代码不起作用。

网络异常,图片无法展示
|

3️⃣ 命名

在 JavaScript 中命名变量时,坚持一些基本的命名约定规则很重要。除了命名约定,在整个编码过程中,您还必须想出名称。对于什么名字更好,开发者之间有不同的看法。要记住的最重要的事情是,您需要尝试以这样一种方式命名变量,即它能简短地解释它所包含的内容,并且当您返回到您的旧代码时,其他开发人员或您自己可以清楚地了解它。

以下是 JavaScript 中的几种命名约定:

  1. 变量名可以以字母、下划线 (_) 或美元符号 ($) 开头
  2. 字母大小写很重要(helloThere 和 Hellothere 可以有不同的变量)
  3. 您可以在任何地方使用数字,但不能在开头
  4. 没有空间
  5. 不能使用保留字(例如,const是保留字,所以它做了一些事情,你不能给。变量同名)
  6. 使用布尔值时,变量名最好以 is 或 has 开头。(有余额,被点击)
  7. 变量名称中不能包含连字符 (-) 如果您想了解更多有关 JavaScript 中的大小写的信息,请查看我的帖子。

4️⃣作用域

在JavaScript中,我们有不同的作用域。范围是指变量和函数在代码特定部分的可用性。这使得变量彼此分离,并使代码更易于控制和组织。这部分代码称为作用域。例如,盒子中的盒子中的盒子中的盒子中的盒子。第一个框是全局作用域,其中的下一个框是函数作用域,第二个框内的另一个框是块作用域。

每个变量关键字的作用都不同,具体取决于范围,了解它至关重要!

全局作用域是顶级作用域,也是作用域开始的地方。它是对代码的所有其他部分可见的环境。

函数作用域是函数的环境。因此,无论在函数内部创建哪个变量,我们说它是函数范围的,这意味着它不会超出函数范围。

块范围是第三个范围环境,只要这个变量是块处理的,它也不会让创建的变量超出其范围。块范围考虑 if 条件、switch 语句或循环,如 for 和 while。

网络异常,图片无法展示
|

我们在全局范围内声明的任何内容都将在代码中的任何地方以及该全局范围内的任何其他范围内可用。用 var 关键字声明的变量被认为是全局的,并且由于是全局的,它们被附加到 window 对象。窗口对象是浏览器环境的全局对象。

另一方面,let 和 const 不附加到窗口对象。它们仍然是全局的,可以在代码的任何地方访问。原因不明,因为我试图找到确切的解释,最后有些人试图猜测原因,有些人只是同意它就是这样设计的。此时,您不必担心这一点。

网络异常,图片无法展示
|

用 var 声明的变量也是函数作用域的,这意味着它们在函数作用域之外是不可访问的。函数内声明的任何变量都将被删除,并在函数结束后消失。

看看下一个例子,它看起来与上一个几乎相同。

但是,在函数内部,我创建了一个名为 keyFour 的新键变量,还修改了 keyOne。当我控制台记录函数内的键时,您会看到 keyOne 显示最新值。我们已经讨论过了,你还记得吗?var 可以重新声明,我们也可以重新分配一个新值。当我尝试控制台记录 keyOne 的更新值时,它显示的是旧值!为什么?因为新值不可访问并且是函数范围的。

此外,我用另一个 var、const 和 let 变量创建了一个额外的新键,在这个函数之外它们都不可用。所以 let 和 const 关键字也是函数作用域的。

网络异常,图片无法展示
|

快速提示:如果您不在函数范围内使用任何变量关键字声明变量而是分配一个值,则该变量会自动变为全局变量。但是,如果您使用严格模式,这将不起作用。如果您不知道什么是严格模式,只需简单地忽略此提示,并且永远不要在不使用任何关键字的情况下为变量赋值。

最后,块作用域是用 var 关键字声明的变量不是块作用域的,并且可以在作用域外访问。同时,let 和 const 关键字是块作用域的。

让我们做我们在函数范围内所做的完全相同的事情,但进入块范围。

网络异常,图片无法展示
|

让我们分析一下块作用域中发生了什么。

首先,我们更改了在此循环外也可用的 keyOne 值。与函数范围相比,我们无法检索新值,但这次我们可以,因为 var 不是块范围的。我们尝试再次检索一个有效的新变量。

其次,我们尝试从块作用域中检索 let 和 const,但它不可用。为什么?因为 let 和 const 都是块作用域的,就像在函数作用域中一样。

关于作用域有很多内容,但是现在就到此为止,因为我们的主要主题是一般的变量声明。

总之,JavaScript 中的变量声明对于管理代码中的数据至关重要。了解不同的变量关键字(var、let 和 const)及其在声明、重新分配和作用域方面的差异对于编写有效且高效的代码非常重要。遵循命名约定并以清晰简洁的方式命名变量也很重要,这样可以更轻松地阅读和维护代码。通过理解 JavaScript 中的变量声明,开发人员可以充分利用他们的代码并编写健壮且可扩展的程序。


相关文章
|
1天前
|
JavaScript 前端开发
JavaScript基础语法:包括变量声明、数据类型(Number, String, Boolean, Null, Undefined, Symbol, Object)、运算符、流程控制语句(if...else, switch, for, while, do...while)等。
JavaScript基础语法:包括变量声明、数据类型(Number, String, Boolean, Null, Undefined, Symbol, Object)、运算符、流程控制语句(if...else, switch, for, while, do...while)等。
31 0
|
1天前
|
JavaScript 前端开发
js基础语法:包括变量声明、数据类型(Number, String, Boolean, Null, Undefined, Symbol, Object)、运算符、流程控制语句(if...else, switch, for, while, do...while)等。具体案例使用演示
js基础语法:包括变量声明、数据类型(Number, String, Boolean, Null, Undefined, Symbol, Object)、运算符、流程控制语句(if...else, switch, for, while, do...while)等。具体案例使用演示
36 1
|
10月前
|
JavaScript C#
js中变量声明的规则
js中变量声明的规则
46 0
|
存储 JavaScript 前端开发
JavaScript入门第二章(变量声明/赋值/取值)
JavaScript入门第二章(变量声明/赋值/取值)
108 0
|
JavaScript 前端开发
JavaScript中变量声明var、let、const的区别
JavaScript中变量声明var、let、const的区别
86 0
JavaScript中变量声明var、let、const的区别
|
JavaScript 前端开发
前端百题斩【002】——js中6种变量声明方式
前端百题斩【002】——js中6种变量声明方式
|
JavaScript 前端开发
javascript变量声明前置
javascript变量声明前置
|
JavaScript 前端开发
JavaScript—ES6的变量声明
JavaScript—ES6的变量声明
103 0
JavaScript—ES6的变量声明
|
JavaScript 前端开发
JavaScript:学习笔记(7)——VAR、LET、CONST三种变量声明的区别
原文:JavaScript:学习笔记(7)——VAR、LET、CONST三种变量声明的区别 JavaScript:学习笔记(7)——VAR、LET、CONST三种变量声明的区别   ES2015(ES6)带来了许多闪亮的新功能,自2017年以来,许多JavaScript开发人员已经熟悉并开始使用这些功能。
1044 0