javascript作用域例子(JavaScript基础-了解变量)

javascript作用域例子(JavaScript基础-了解变量)(1)

变量是许多编程语言的基本组成部分,并且是新手程序员学习的第一个也是最重要的概念之一。 JavaScript中有许多不同的变量属性,以及命名它们时必须遵循的一些规则。 在 JavaScript 中,用于声明变量的三个关键字——var、let 和 const——每一个都会影响代码对变量的不同解释方式。

本文将介绍什么是变量,如何声明和命名它们,并仔细研究 var、let 和 const 之间的区别。 我们还将回顾范围提升的影响以及全局和局部范围对变量行为的重要性。

什么是变量

变量是用于存储值的命名容器。 我们可能多次引用的一条信息可以存储在一个变量中以供以后使用或修改。 在 JavaScript 中,变量中包含的值可以是任何 JavaScript 数据类型,包括数字、字符串或对象。

在今天的 JavaScript 所基于的 ECMAScript 2015 (ES6) 语言规范之前,只有一种声明变量的方法——使用 var 关键字。 因此,大多数较旧的代码和学习资源只会将 var 用于变量。 我们将在下面的单独部分中讨论 var、let 和 const 关键字之间的区别。

我们可以使用 var 来演示变量本身的概念。 在下面的示例中,我们将声明一个变量,并为其赋值。

javascript作用域例子(JavaScript基础-了解变量)(2)

声明由几个部分组成:

  • 使用 var 关键字声明变量
  • 变量名(或标识符)、用户名
  • 赋值操作,用 = 语法表示
  • 分配的值,“George”

现在我们可以在代码中使用userName。 JavaScript 会记住用户名代表字符串值 George。

javascript作用域例子(JavaScript基础-了解变量)(3)

如前所述,变量可用于表示任何 JavaScript 数据类型。 在此示例中,我们将使用字符串、数字、对象、布尔值和空值声明变量。

javascript作用域例子(JavaScript基础-了解变量)(4)

变量将数据存储在内存中,以后可以访问和修改。 也可以重新分配变量并赋予新值。

变量命名

变量名在 JavaScript 中称为标识符。命名规则如下:

  • 变量名只能由字母 (a-z)、数字 (0-9)、美元符号 ($) 和下划线 (_) 组成
  • 变量名不能包含任何空白字符(制表符或空格)
  • 数字不能以任何变量的名称开头
  • 有几个保留关键字不能用作变量的名称
  • 变量名区分大小写

JavaScript 也有在使用 var 或 let 声明的函数和变量的名称中使用驼峰式大小写(有时被风格化为 camelCase)的约定。这是将第一个单词小写,然后将每个后续单词的第一个字母大写的做法,它们之间没有空格。大多数不是常量的变量都会遵循这个约定,但也有一些例外。使用 const 关键字声明的常量变量的名称通常全部大写。

var let const 的不同之处

现代JS中(ES6之后),有三个不同的关键字来声明一个变量,这给语言增加了一层额外的复杂性。 三者之间的区别在于范围、提升和重新分配。

关键字

作用域

范围提升

重新赋值

重新声明

var

函数作用域

Yes

Yes

Yes

let

块作用域

No

Yes

No

const

块作用域

No

No

No

您可能想知道应该在自己的程序中使用这三个中的哪一个。 一种普遍接受的做法是尽可能使用 const,并在循环和重新分配的情况下使用 let。在处理遗留代码之外可以避免使用 var。

变量作用域

JavaScript 中的作用域是指代码的当前上下文,它决定了变量对 JavaScript 的可访问性。 两种类型的作用域是本地的和全局的:

  • 全局变量是在块外声明的变量
  • 局部变量是在块内声明的变量

在下面的示例中,我们将创建一个全局变量。

javascript作用域例子(JavaScript基础-了解变量)(5)

我们了解到可以重新分配变量。 使用局部作用域,我们实际上可以创建与外部作用域中的变量同名的新变量,而无需更改或重新分配原始值。

在下面的示例中,我们将创建一个全局物种变量。 函数内部是一个同名的局部变量。 通过将它们发送到控制台,我们可以看到变量的值如何根据范围不同而不同,并且原始值没有改变。

javascript作用域例子(JavaScript基础-了解变量)(6)

javascript作用域例子(JavaScript基础-了解变量)(7)

输出结果

在此示例中,局部变量是函数范围的。 使用 var 关键字声明的变量始终是函数范围的,这意味着它们将函数识别为具有单独的范围。 因此,无法从全局范围访问此局部范围的变量。

新的关键字 let 和 const 是块作用域的。 这意味着可以从任何类型的块创建一个新的本地范围,包括功能块、if 语句以及 for 和 while 循环。

为了说明函数范围变量和块范围变量之间的区别,我们将使用 let 在 if 块中分配一个新变量。

javascript作用域例子(JavaScript基础-了解变量)(8)

输出结果为:

javascript作用域例子(JavaScript基础-了解变量)(9)

如果使用var声明变量,结果会完全不同。

javascript作用域例子(JavaScript基础-了解变量)(10)

因为var没有块作用域,所以下面的变量覆盖了上面的同名变量。

范围提升

到目前为止,在大多数示例中,我们都使用 var 来声明一个变量,并用一个值对其进行了初始化。 声明和初始化后,我们可以访问或重新分配变量。

如果我们在声明和初始化之前尝试使用变量,它将返回 undefined。

javascript作用域例子(JavaScript基础-了解变量)(11)

但是,如果我们省略 var 关键字,我们就不再声明变量,而只是初始化它。 它将返回一个 ReferenceError 并停止脚本的执行。

javascript作用域例子(JavaScript基础-了解变量)(12)

其原因是由于范围提升,这是一种 JavaScript 行为,其中变量和函数声明被移动到其作用域的顶部。 由于只提升了实际声明,而不是初始化,因此第一个示例中的值返回 undefined。

如果使用let或const则不会这种提升,会直接报错。

javascript作用域例子(JavaScript基础-了解变量)(13)

总而言之,用 var 引入的变量可能会受到提升的影响,提升是 JavaScript 中将变量声明保存到内存中的一种机制。 这可能会导致代码中出现未定义的变量。 let 和 const 的引入通过在声明变量之前尝试使用变量时抛出错误来解决此问题。

常量Constants

许多编程语言都具有常量,它们是无法修改或更改的值。 在 JavaScript 中,const 标识符是在常量之后创建的,分配给 const 的值不能重新分配。将所有 const 标识符写成大写是常见的约定。 这标志着它们很容易与其他变量值区分开来。

javascript作用域例子(JavaScript基础-了解变量)(14)

由于 const 值不能重新赋值,所以需要同时声明和初始化,否则也会抛出错误。

在编程中不能改变的值被称为不可变的,而可以改变的值是可变的。 虽然 const 值不能重新分配,如果他们的值是对象,则对象的值是可变的,如下:

javascript作用域例子(JavaScript基础-了解变量)(15)

常量有助于让您未来的自己和与您一起进行项目的其他程序员清楚不应重新分配预期的变量。 如果您希望将来可能修改变量,您可能希望使用 let 来声明该变量。

最后:

在本教程中,我们了解了变量是什么、变量命名规则以及如何重新分配变量值。 我们还了解了作用域和提升,原始 var 关键字的一些限制,以及 let 和 const 如何纠正这些问题。感谢阅读。

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页